.tsb-board {
    max-width: 1100px;
    margin: 24px auto;
    padding: 20px;
    background: #fffdf8;
    border: 2px solid #efe6d6;
    border-radius: 20px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    box-sizing: border-box;
}
.tsb-board *, .tsb-board *::before, .tsb-board *::after { box-sizing: border-box; }
.tsb-board-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.tsb-title { margin:0; font-size:28px; line-height:1.3; color:#3d4d66; }
.tsb-current-time { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:#eef6ff; border:1px solid #d6e8ff; }
.tsb-current-time-label { font-size:14px; color:#567; }
.tsb-digital-time { font-size:24px; font-weight:700; color:#245; letter-spacing:0.03em; }

/* common clock */
.tsb-clock-wrap { width:300px; height:300px; margin:0 auto; }
.tsb-clock-wrap.is-small { width:180px; height:180px; }
.tsb-clock { position:relative; width:100%; height:100%; border-radius:50%; background:#fff; border:6px solid #5aaeff; box-shadow:0 6px 16px rgba(0,0,0,0.08); overflow:hidden; }
.tsb-color-ring { position:absolute; inset:28px; border-radius:50%; background:conic-gradient(from -90deg, #f6c143 0deg 60deg, #95d364 60deg 120deg, #67c7d1 120deg 180deg, #8298ff 180deg 240deg, #c59cf4 240deg 300deg, #ffb36b 300deg 360deg); opacity:0.95; z-index:1; }
.tsb-clock-wrap.is-small .tsb-color-ring { inset:18px; }
.tsb-color-ring::after { content:""; position:absolute; inset:48px; border-radius:50%; background:#fff; }
.tsb-clock-wrap.is-small .tsb-color-ring::after { inset:32px; }
.tsb-hour-number { position:absolute; z-index:6; font-size:23px; font-weight:800; color:#111; width:32px; text-align:center; line-height:1; text-shadow:0 1px 0 rgba(255,255,255,0.8); }
.tsb-clock-wrap.is-small .tsb-hour-number { font-size:15px; width:22px; }
.tsb-tick { position:absolute; left:50%; top:10px; width:2px; height:8px; background:#8dbef1; transform-origin:50% 140px; z-index:2; }
.tsb-tick.major { width:3px; height:14px; background:#2f80d0; }
.tsb-clock-wrap.is-small .tsb-tick { top:7px; height:5px; transform-origin:50% 80px; }
.tsb-clock-wrap.is-small .tsb-tick.major { height:9px; }
.tsb-hand { position:absolute; left:50%; top:50%; transform-origin:50% 100%; border-radius:999px; z-index:5; }
.tsb-hour-hand { width:10px; height:78px; background:#f44336; }
.tsb-minute-hand { width:8px; height:108px; background:#3498db; }
.tsb-clock-wrap.is-small .tsb-hour-hand { width:7px; height:46px; }
.tsb-clock-wrap.is-small .tsb-minute-hand { width:6px; height:64px; }
.tsb-center-dot { position:absolute; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%, -50%); border-radius:50%; background:#3d89d8; border:4px solid #d9efff; z-index:6; }
.tsb-clock-wrap.is-small .tsb-center-dot { width:15px; height:15px; border-width:3px; }

/* split mode */
.tsb-main-layout { display:grid; grid-template-columns:minmax(320px, 410px) minmax(0, 1fr); gap:20px; align-items:start; }
.tsb-main-layout.is-clock-only { grid-template-columns:1fr; }
.tsb-left-panel, .tsb-right-panel { display:flex; flex-direction:column; gap:18px; min-width:0; }
.tsb-clock-card, .tsb-upcoming-card, .tsb-timeline-card, .tsb-board-timeline-card, .tsb-board-list-card { background:#ffffff; border:1px solid #e7edf5; border-radius:18px; padding:18px; box-shadow:0 6px 14px rgba(0,0,0,0.04); }
.tsb-section-title { margin:0 0 12px; font-size:20px; color:#334; }
.tsb-card-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.tsb-card-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #e4edf7; border-left:10px solid var(--tsb-card-color, #e4edf7); border-radius:14px; background:#fff; }
.tsb-card-item.is-active { box-shadow:0 0 0 3px rgba(255,123,123,0.18); border-color:#ff7b7b; }
.tsb-card-icon { font-size:24px; line-height:1; }
.tsb-card-meta { display:flex; flex-direction:column; gap:2px; }
.tsb-card-name { font-weight:700; color:#334; }
.tsb-card-time { font-size:13px; color:#5d6d80; }
.tsb-timeline-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.tsb-timeline-range { font-size:13px; color:#607086; background:#f3f8fe; border:1px solid #e1ebf8; padding:6px 10px; border-radius:999px; }
.tsb-timeline-grid { display:grid; gap:10px; }
.tsb-timeline-row { display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:start; padding:10px; border-radius:14px; border:1px solid #e8eef6; background:#fcfdff; }
.tsb-timeline-row.is-now { background:#fff9f7; border-color:#ffb7aa; box-shadow:0 0 0 3px rgba(255,151,129,0.12); }
.tsb-hour-label { font-weight:800; color:#38506b; font-size:18px; line-height:1.4; padding-top:4px; }
.tsb-hour-content { display:flex; flex-wrap:wrap; gap:8px; min-height:36px; }
.tsb-hour-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background:#fff; border:1px solid var(--tsb-card-color, #dfe8f2); border-left:8px solid var(--tsb-card-color, #dfe8f2); color:#2b3948; line-height:1.2; }
.tsb-hour-chip.is-active { box-shadow:0 0 0 3px rgba(255,123,123,0.18); }
.tsb-hour-chip-icon { font-size:20px; line-height:1; }
.tsb-hour-chip-label { font-weight:700; }
.tsb-hour-chip-time { font-size:12px; color:#5e6d80; }
.tsb-hour-empty { color:#93a1b1; font-size:18px; line-height:1.6; }

/* board mode */
.tsb-board-mode-wrap { display:grid; gap:20px; }
.tsb-whiteboard { position:relative; min-height:680px; aspect-ratio: 4 / 3; border:2px solid #d7dbe0; border-radius:14px; background:#fdfdfd; overflow:hidden; box-shadow: inset 0 0 0 1px #f4f4f4; }
.tsb-whiteboard::before, .tsb-whiteboard::after { content:""; position:absolute; background:rgba(101,178,255,0.35); }
.tsb-whiteboard::before { left:50%; top:8%; width:1px; height:84%; transform:translateX(-50%); }
.tsb-whiteboard::after { left:8%; top:50%; width:84%; height:1px; transform:translateY(-50%); }
.tsb-whiteboard-surface { position:absolute; inset:0; background:
    linear-gradient(30deg, transparent 49.6%, rgba(101,178,255,0.20) 49.8%, rgba(101,178,255,0.20) 50.2%, transparent 50.4%),
    linear-gradient(-28deg, transparent 49.6%, rgba(101,178,255,0.15) 49.8%, rgba(101,178,255,0.15) 50.2%, transparent 50.4%);
    background-size: 100% 100%, 100% 100%; pointer-events:none; }
.tsb-board-clock-center { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3; }
.tsb-board-card { position:absolute; width:190px; max-width:190px; transform:translate(-50%, -50%); z-index:4; }
.tsb-board-card-anchor-north { transform: translate(-50%, 0); }
.tsb-board-card-anchor-north-east { transform: translate(-100%, 0); }
.tsb-board-card-anchor-east { transform: translate(-100%, -50%); }
.tsb-board-card-anchor-south-east { transform: translate(-100%, -100%); }
.tsb-board-card-anchor-south { transform: translate(-50%, -100%); }
.tsb-board-card-anchor-south-west { transform: translate(0, -100%); }
.tsb-board-card-anchor-west { transform: translate(0, -50%); }
.tsb-board-card-anchor-north-west { transform: translate(0, 0); }
.tsb-board-card-line { position:absolute; left:50%; top:50%; width:78px; height:1px; background:rgba(101,178,255,0.45); transform-origin:left center; transform: rotate(var(--tsb-line-angle, 0deg)); z-index:1; display:none; }
.tsb-board-card-inner { position:relative; z-index:2; display:flex; align-items:center; gap:8px; min-height:58px; padding:8px 10px; background:#fff; border:3px solid var(--tsb-card-color, #ddd); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
@media (min-width: 641px) { .tsb-board-card-line { display:block; } }
.tsb-board-card.is-active .tsb-board-card-inner { box-shadow:0 0 0 3px rgba(255,123,123,0.18), 0 2px 10px rgba(0,0,0,0.05); border-color:#ff9a9a; }
.tsb-board-mini-clock { flex:0 0 32px; width:32px; height:32px; border-radius:50%; border:2px solid var(--tsb-card-color, #ddd); display:flex; align-items:center; justify-content:center; background:#fff; }
.tsb-board-mini-clock-icon { font-size:16px; line-height:1; }
.tsb-board-card-body { min-width:0; display:flex; flex-direction:column; }
.tsb-board-card-time { font-size:11px; font-weight:700; color:#5e6d80; line-height:1.2; }
.tsb-board-card-label { font-size:20px; font-weight:700; color:#111; line-height:1.2; word-break:break-word; }
.tsb-board-card-note { font-size:10px; color:#7c8793; line-height:1.2; }
.tsb-board-timeline-grid .tsb-timeline-row { background:#fff; }

/* board card sizing tweaks */
.tsb-board-card:nth-child(odd) .tsb-board-card-inner { min-height:54px; }
.tsb-board-card-inner { overflow:hidden; }

/* landscape-ish tablet split remains */
@media (max-width: 900px) {
    .tsb-main-layout { grid-template-columns:1fr; }
    .tsb-clock-wrap { width:280px; height:280px; }
    .tsb-tick { transform-origin:50% 130px; }
    .tsb-hour-number { font-size:21px; }
    .tsb-whiteboard { min-height:760px; }
}
@media (max-width: 900px) and (orientation: landscape) and (min-width: 700px) {
    .tsb-main-layout { grid-template-columns:minmax(250px, 320px) minmax(0, 1fr); align-items:start; }
    .tsb-clock-wrap:not(.is-small) { width:220px; height:220px; }
    .tsb-main-layout .tsb-tick { top:8px; transform-origin:50% 100px; }
    .tsb-main-layout .tsb-hour-number { font-size:17px; }
    .tsb-timeline-row { grid-template-columns:68px 1fr; }
    .tsb-hour-label { font-size:16px; }

    /* ボード表示は横画面でも画面内に収まりやすいよう縮小 */
    .tsb-whiteboard {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }
    .tsb-board-clock-center .tsb-clock-wrap.is-small {
        width: 140px;
        height: 140px;
    }
    .tsb-board-clock-center .tsb-clock-wrap.is-small .tsb-hour-number {
        font-size: 12px;
        width: 18px;
    }
    .tsb-board-clock-center .tsb-clock-wrap.is-small .tsb-tick {
        transform-origin: 50% 61px;
    }
    .tsb-board-card {
        width: 145px;
        max-width: 145px;
    }
    .tsb-board-card-inner {
        min-height: 48px;
        padding: 6px 8px;
        gap: 6px;
    }
    .tsb-board-mini-clock {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
    }
    .tsb-board-mini-clock-icon {
        font-size: 13px;
    }
    .tsb-board-card-time,
    .tsb-board-card-note {
        font-size: 9px;
    }
    .tsb-board-card-label {
        font-size: 15px;
    }
    .tsb-board-card-line {
        width: 58px;
    }
}
@media (max-width: 768px) {
    .tsb-board-card { width:165px; max-width:165px; }
    .tsb-board-card-label { font-size:17px; }
}
@media (max-width: 640px) {
    .tsb-board { padding:14px; }
    .tsb-title { font-size:24px; }
    .tsb-current-time { width:100%; justify-content:center; }
    .tsb-clock-wrap:not(.is-small) { width:250px; height:250px; }
    .tsb-main-layout .tsb-tick { top:8px; transform-origin:50% 117px; }
    .tsb-main-layout .tsb-hour-number { font-size:18px; }
    .tsb-timeline-row { grid-template-columns:68px 1fr; }
    .tsb-hour-label { font-size:16px; }
    .tsb-hour-chip { width:100%; }
    .tsb-whiteboard { min-height:auto; padding:14px; display:grid; gap:12px; }
    .tsb-whiteboard::before, .tsb-whiteboard::after, .tsb-whiteboard-surface { display:none; }
    .tsb-board-clock-center { position:relative; left:auto; top:auto; transform:none; margin:0 auto 6px; }
    .tsb-board-card { position:relative; left:auto !important; top:auto !important; transform:none; width:100%; }
    .tsb-board-card-line { display:none !important; }
    .tsb-board-card-inner { min-height:56px; }
    .tsb-board-card-label { font-size:19px; }
}

@media (orientation: landscape) and (max-height: 500px) {
    .tsb-board {
        padding: 10px;
    }
    .tsb-board-header {
        margin-bottom: 12px;
    }
    .tsb-title {
        font-size: 20px;
    }
    .tsb-current-time {
        padding: 8px 10px;
    }
    .tsb-digital-time {
        font-size: 18px;
    }
    .tsb-whiteboard {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .tsb-board-clock-center .tsb-clock-wrap.is-small {
        width: 118px;
        height: 118px;
    }
    .tsb-board-clock-center .tsb-clock-wrap.is-small .tsb-hour-number {
        font-size: 10px;
        width: 16px;
    }
    .tsb-board-clock-center .tsb-clock-wrap.is-small .tsb-tick {
        transform-origin: 50% 50px;
    }
    .tsb-board-card {
        width: 122px;
        max-width: 122px;
    }
    .tsb-board-card-inner {
        min-height: 42px;
        padding: 5px 6px;
        gap: 5px;
        border-width: 2px;
    }
    .tsb-board-mini-clock {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
    }
    .tsb-board-mini-clock-icon {
        font-size: 11px;
    }
    .tsb-board-card-time,
    .tsb-board-card-note {
        font-size: 8px;
    }
    .tsb-board-card-label {
        font-size: 13px;
    }
    .tsb-board-card-line {
        width: 46px;
    }
}


html.tsb-mobile-open,
body.tsb-mobile-open {
    overflow: hidden !important;
}

.tsb-mobile-launch-wrap {
    display: none;
    margin-top: 14px;
    justify-content: center;
}

.tsb-mobile-launch {
    appearance: none;
    border: 0;
    background: #3d89d8;
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(61,137,216,0.25);
}

.tsb-mobile-overlay {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(12, 18, 24, 0.92);
    z-index: 999999;
}

.tsb-mobile-overlay.is-open {
    display: block;
}

.tsb-mobile-overlay-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: #fff;
}

.tsb-mobile-overlay-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.tsb-mobile-overlay-title {
    font-size: 16px;
    font-weight: 700;
}

.tsb-mobile-close {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,0.15);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 26px;
    line-height: 1;
}

.tsb-mobile-overlay-note {
    font-size: 12px;
    color: rgba(255,255,255,0.84);
    margin-bottom: 10px;
}

.tsb-mobile-stage-frame {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tsb-mobile-stage {
    width: min(calc(100vw - 20px), calc((100vh - 92px) * 4 / 3));
    max-width: 100%;
    aspect-ratio: 4 / 3;
}

.tsb-mobile-stage .tsb-whiteboard {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
}

@media (max-width: 900px) {
    .tsb-mobile-launch-wrap {
        display: flex;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .tsb-mobile-overlay-inner {
        padding: 8px 12px;
    }

    .tsb-mobile-overlay-note {
        margin-bottom: 6px;
    }

    .tsb-mobile-stage {
        width: min(calc(100vw - 24px), calc((100vh - 70px) * 4 / 3));
    }

    .tsb-mobile-stage .tsb-board-clock-center .tsb-clock-wrap.is-small {
        width: 150px;
        height: 150px;
    }

    .tsb-mobile-stage .tsb-board-clock-center .tsb-clock-wrap.is-small .tsb-hour-number {
        font-size: 12px;
        width: 18px;
    }

    .tsb-mobile-stage .tsb-board-clock-center .tsb-clock-wrap.is-small .tsb-tick {
        transform-origin: 50% 66px;
    }

    .tsb-mobile-stage .tsb-board-card {
        width: 148px;
        max-width: 148px;
    }

    .tsb-mobile-stage .tsb-board-card-inner {
        min-height: 48px;
        padding: 6px 7px;
        gap: 6px;
    }

    .tsb-mobile-stage .tsb-board-card-label {
        font-size: 15px;
    }

    .tsb-mobile-stage .tsb-board-card-time,
    .tsb-mobile-stage .tsb-board-card-note {
        font-size: 9px;
    }

    .tsb-mobile-stage .tsb-board-mini-clock {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }

    .tsb-mobile-stage .tsb-board-card-line {
        width: 52px;
    }
}

@media (max-width: 900px) and (orientation: portrait) {
    .tsb-mobile-stage {
        width: min(calc(100vw - 16px), calc((100vh - 118px) * 4 / 3));
    }

    .tsb-mobile-overlay-note::after {
        content: " 横向きにすると、さらに見やすくなります。";
    }
}


/* practical mode */
.tsb-practical-layout {
    display: grid;
    grid-template-columns: minmax(250px, 34%) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
.tsb-practical-left,
.tsb-practical-right { min-width: 0; }
.tsb-practical-right { display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.tsb-practical-clock-card,
.tsb-practical-next-card,
.tsb-practical-today-card {
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.04);
}
.tsb-practical-clock-card {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
}
.tsb-practical-clock-title,
.tsb-practical-panel-title { font-size: 20px; font-weight: 800; color: #334; line-height: 1.2; }
.tsb-practical-clock-card .tsb-clock-wrap { width: 220px; height: 220px; }
.tsb-practical-clock-card .tsb-tick { top: 8px; transform-origin: 50% 100px; }
.tsb-practical-clock-card .tsb-hour-number { font-size: 18px; }
.tsb-practical-now-chip { width: 100%; border-radius: 16px; padding: 12px 14px; background: #f7fbff; border: 1px solid #dcebff; text-align: center; }
.tsb-practical-now-chip.is-empty { background: #fafafa; border-color: #ececec; }
.tsb-practical-now-chip-label { display:block; font-size:12px; font-weight:700; color:#688; margin-bottom:4px; }
.tsb-practical-now-chip-main { display:block; font-size:24px; font-weight:800; color:#223; line-height:1.2; }
.tsb-practical-next-inner { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; }
.tsb-practical-next-clock-wrap { display:flex; align-items:center; justify-content:center; }
.tsb-practical-next-name { font-size: 28px; font-weight: 800; line-height: 1.15; color: #223; }
.tsb-practical-next-note,
.tsb-practical-next-empty { font-size: 14px; color: #66788a; }
.tsb-practical-today-list { display:grid; gap:8px; }
.tsb-practical-item { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border:1px solid #e8edf4; border-radius:14px; background:#fff; }
.tsb-practical-item.is-now { border-color:#ffb7aa; background:#fff8f6; box-shadow:0 0 0 3px rgba(255,151,129,0.10); }
.tsb-practical-item.is-next { border-color:#a8ccff; background:#f7fbff; }
.tsb-practical-item.is-done { opacity:0.72; }
.tsb-practical-item-name { font-size:22px; font-weight:800; line-height:1.15; color:#223; }
.tsb-practical-item-note { font-size:12px; line-height:1.2; color:#728294; margin-top:2px; }
.tsb-practical-item-status { min-width:46px; padding:6px 8px; border-radius:999px; font-size:12px; font-weight:700; text-align:center; color:transparent; }
.tsb-practical-item-status.is-now { color:#fff; background:#ff8f75; }
.tsb-practical-item-status.is-next { color:#fff; background:#61a7ff; }
.tsb-practical-item-status.is-done { color:#fff; background:#9aa8b8; }
.tsb-mini-clock { position:relative; width:40px; height:40px; border-radius:50%; background:#fff; border:3px solid #5aaeff; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.tsb-mini-clock.is-large { width:60px; height:60px; border-width:4px; }
.tsb-mini-tick { position:absolute; background:#7fb4ea; }
.tsb-mini-tick-top,.tsb-mini-tick-bottom { left:50%; width:2px; height:7px; transform:translateX(-50%); }
.tsb-mini-tick-top { top:3px; }
.tsb-mini-tick-bottom { bottom:3px; }
.tsb-mini-tick-left,.tsb-mini-tick-right { top:50%; width:7px; height:2px; transform:translateY(-50%); }
.tsb-mini-tick-left { left:3px; }
.tsb-mini-tick-right { right:3px; }
.tsb-mini-hand { position:absolute; left:50%; top:50%; transform-origin:50% 100%; border-radius:999px; }
.tsb-mini-hour { width:4px; height:12px; background:#f44336; }
.tsb-mini-minute { width:3px; height:16px; background:#3498db; }
.tsb-mini-clock.is-large .tsb-mini-hour { width:5px; height:18px; }
.tsb-mini-clock.is-large .tsb-mini-minute { width:4px; height:25px; }
.tsb-mini-center { position:absolute; left:50%; top:50%; width:8px; height:8px; transform:translate(-50%, -50%); border-radius:50%; background:#3d89d8; }
.tsb-mini-clock.is-large .tsb-mini-center { width:10px; height:10px; }
.tsb-mobile-launch-wrap.is-practical { display:flex; }
.tsb-mobile-practical-stage { width:min(100vw - 20px, 100%); }
.tsb-mobile-overlay.is-practical-overlay { background:#eef5fb; }
.tsb-mobile-overlay-inner-practical { color:#223; padding:10px; }
.tsb-mobile-overlay-inner-practical .tsb-mobile-overlay-bar { margin-bottom:6px; }
.tsb-mobile-overlay-inner-practical .tsb-mobile-overlay-title { color:#223; }
.tsb-mobile-overlay-inner-practical .tsb-mobile-close { color:#223; background:rgba(0,0,0,0.08); }
.tsb-mobile-overlay-inner-practical .tsb-mobile-stage-frame { overflow:hidden; }
.tsb-practical-layout.is-overlay { width:100%; height:100%; grid-template-columns:31% 1fr; gap:10px; }
.tsb-practical-layout.is-overlay .tsb-practical-clock-card,
.tsb-practical-layout.is-overlay .tsb-practical-next-card,
.tsb-practical-layout.is-overlay .tsb-practical-today-card { padding:10px; border-radius:14px; }
.tsb-practical-layout.is-overlay .tsb-practical-clock-title,
.tsb-practical-layout.is-overlay .tsb-practical-panel-title { font-size:16px; }
.tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-clock-wrap { width:min(25vw, 170px); height:min(25vw, 170px); }
.tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-tick { top:7px; transform-origin:50% calc(min(25vw, 170px) / 2 - 10px); }
.tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-hour-number { font-size:14px; }
.tsb-practical-layout.is-overlay .tsb-practical-now-chip { padding:8px 10px; }
.tsb-practical-layout.is-overlay .tsb-practical-now-chip-main { font-size:18px; }
.tsb-practical-layout.is-overlay .tsb-practical-next-inner { grid-template-columns:62px 1fr; gap:10px; }
.tsb-practical-layout.is-overlay .tsb-practical-next-name { font-size:22px; }
.tsb-practical-layout.is-overlay .tsb-practical-item { grid-template-columns:36px 1fr auto; gap:8px; padding:6px 8px; }
.tsb-practical-layout.is-overlay .tsb-practical-item-name { font-size:18px; }
.tsb-practical-layout.is-overlay .tsb-practical-item-note,
.tsb-practical-layout.is-overlay .tsb-practical-next-note,
.tsb-practical-layout.is-overlay .tsb-practical-next-empty { font-size:11px; }
.tsb-practical-layout.is-overlay .tsb-practical-item-status { min-width:40px; font-size:11px; padding:5px 7px; }
.tsb-practical-layout.is-overlay .tsb-mini-clock { width:34px; height:34px; }
.tsb-practical-layout.is-overlay .tsb-mini-clock.is-large { width:52px; height:52px; }
@media (max-width: 900px) {
    .tsb-practical-layout { grid-template-columns:1fr; }
    .tsb-practical-clock-card .tsb-clock-wrap { width:190px; height:190px; }
    .tsb-practical-clock-card .tsb-tick { transform-origin:50% 85px; }
}
@media (max-width: 900px) and (orientation: landscape) {
    .tsb-practical-layout { grid-template-columns:29% 1fr; gap:10px; }
    .tsb-practical-clock-card,.tsb-practical-next-card,.tsb-practical-today-card { padding:10px; border-radius:14px; }
    .tsb-practical-clock-title,.tsb-practical-panel-title { font-size:16px; }
    .tsb-practical-clock-card .tsb-clock-wrap { width:150px; height:150px; }
    .tsb-practical-clock-card .tsb-tick { top:7px; transform-origin:50% 66px; }
    .tsb-practical-clock-card .tsb-hour-number { font-size:14px; width:22px; }
    .tsb-practical-now-chip { padding:8px 10px; }
    .tsb-practical-now-chip-main { font-size:18px; }
    .tsb-practical-next-inner { grid-template-columns:56px 1fr; gap:10px; }
    .tsb-practical-next-name { font-size:22px; }
    .tsb-practical-item { grid-template-columns:34px 1fr auto; gap:8px; padding:6px 8px; }
    .tsb-practical-item-name { font-size:18px; }
    .tsb-practical-item-note,.tsb-practical-next-note,.tsb-practical-next-empty { font-size:11px; }
    .tsb-practical-item-status { min-width:40px; font-size:11px; padding:5px 7px; }
    .tsb-mini-clock { width:32px; height:32px; }
    .tsb-mini-clock.is-large { width:48px; height:48px; }
}
@media (max-width: 640px) and (orientation: portrait) {
    .tsb-practical-layout { grid-template-columns:1fr; }
    .tsb-practical-next-name { font-size:24px; }
    .tsb-practical-item-name { font-size:20px; }
}


.tsb-mini-clock { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.tsb-mini-clock-svg { width: 100%; height: 100%; display: block; }
.tsb-mini-clock-face { fill: #ffffff; stroke: #5aaeff; stroke-width: 6; }
.tsb-mini-clock-mark { stroke: #7fb4ea; stroke-width: 2.3; stroke-linecap: round; }
.tsb-mini-clock-number { font-size: 11px; font-weight: 700; fill: #334; font-family: Arial, Helvetica, sans-serif; }
.tsb-mini-clock-hand { stroke-linecap: round; }
.tsb-mini-clock-hour { stroke: #f44336; stroke-width: 5; }
.tsb-mini-clock-minute { stroke: #3498db; stroke-width: 4; }
.tsb-mini-clock-center { fill: #3d89d8; }
.tsb-mini-clock.is-large .tsb-mini-clock-number { font-size: 10px; }
.tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 72px; height: 72px; }
.tsb-practical-item-clock .tsb-mini-clock { width: 42px; height: 42px; }
.tsb-practical-layout.is-overlay .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 62px; height: 62px; }
.tsb-practical-layout.is-overlay .tsb-practical-item-clock .tsb-mini-clock { width: 36px; height: 36px; }
@media (max-width: 900px) and (orientation: landscape) {
    .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 60px; height: 60px; }
    .tsb-practical-item-clock .tsb-mini-clock { width: 34px; height: 34px; }
    .tsb-mini-clock-number { font-size: 10px; }
    .tsb-mini-clock.is-large .tsb-mini-clock-number { font-size: 9px; }
}


/* child-friendly stronger clock numbers */
.tsb-hour-number {
    font-size: 28px;
    font-weight: 900;
    color: #0f1720;
    text-shadow: 0 1px 0 rgba(255,255,255,0.95), 0 0 2px rgba(255,255,255,0.8);
}
.tsb-clock-wrap.is-small .tsb-hour-number { font-size: 18px; width: 24px; }
.tsb-practical-clock-card .tsb-hour-number { font-size: 24px; }
.tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-hour-number { font-size: 20px; }

/* clearer hour/minute hand lengths */
.tsb-hour-hand { height: 72px; }
.tsb-minute-hand { height: 112px; }
.tsb-clock-wrap.is-small .tsb-hour-hand { height: 40px; }
.tsb-clock-wrap.is-small .tsb-minute-hand { height: 66px; }

/* practical mode: larger clocks and time-band colors */
.tsb-practical-layout { grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); }
.tsb-practical-clock-card, .tsb-practical-next-card, .tsb-practical-today-card { overflow: hidden; }
.tsb-practical-clock-card .tsb-clock-wrap { width: 250px; height: 250px; }
.tsb-practical-clock-card .tsb-tick { transform-origin: 50% 115px; }
.tsb-practical-clock-card .tsb-practical-now-chip { border-width: 2px; }
.tsb-practical-next-card { border-top: 8px solid var(--tsb-band-border, #a8ccff); background: linear-gradient(180deg, var(--tsb-band-bg, #f7fbff) 0%, #fff 26%); }
.tsb-practical-next-inner { grid-template-columns: 94px 1fr; }
.tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 86px; height: 86px; }
.tsb-practical-next-name { font-size: 30px; }
.tsb-practical-item { grid-template-columns: 56px 1fr auto; border-left: 8px solid var(--tsb-band-border, #a8ccff); background: linear-gradient(90deg, var(--tsb-band-bg, #f7fbff) 0%, #fff 32%); }
.tsb-practical-item-clock .tsb-mini-clock { width: 50px; height: 50px; }
.tsb-practical-item-name { font-size: 24px; }
.tsb-practical-item-note { font-size: 13px; }
.tsb-mini-clock-face { stroke-width: 5; }
.tsb-mini-clock-number { font-size: 12px; font-weight: 800; }
.tsb-mini-clock.is-large .tsb-mini-clock-number { font-size: 12px; }
.tsb-mini-clock-mark { stroke-width: 2.6; }
.tsb-mini-clock-hour { stroke-width: 5.2; }
.tsb-mini-clock-minute { stroke-width: 4.2; }

/* overlay fullscreen practical */
.tsb-mobile-overlay-tools { display:flex; align-items:center; gap:10px; }
.tsb-mobile-print {
    appearance:none; border:0; background:#3d89d8; color:#fff; padding:10px 14px; border-radius:999px; font-size:14px; font-weight:700;
}
.tsb-practical-layout.is-overlay { grid-template-columns: 34% 1fr; gap: 12px; }
.tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-clock-wrap { width: min(30vw, 240px); height: min(30vw, 240px); }
.tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-tick { transform-origin: 50% calc(min(30vw, 240px) / 2 - 10px); }
.tsb-practical-layout.is-overlay .tsb-practical-next-inner { grid-template-columns: 82px 1fr; }
.tsb-practical-layout.is-overlay .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 76px; height: 76px; }
.tsb-practical-layout.is-overlay .tsb-practical-item { grid-template-columns: 48px 1fr auto; }
.tsb-practical-layout.is-overlay .tsb-practical-item-clock .tsb-mini-clock { width: 44px; height: 44px; }
.tsb-practical-layout.is-overlay .tsb-practical-item-name { font-size: 20px; }
.tsb-practical-layout.is-overlay .tsb-practical-item-note, .tsb-practical-layout.is-overlay .tsb-practical-next-note { font-size: 12px; }

/* editor */
.tsb-editor-trigger-wrap { margin-top: 14px; display:flex; justify-content:flex-end; }
.tsb-editor-trigger, .tsb-editor-save {
    appearance:none; border:0; background:#4a86d9; color:#fff; padding:12px 18px; border-radius:12px; font-size:15px; font-weight:700;
}
.tsb-editor-modal { position:fixed; inset:0; display:none; background:rgba(10,16,22,0.7); z-index:999998; }
.tsb-editor-modal.is-open { display:block; }
.tsb-editor-panel { position:absolute; inset:20px; background:#fff; border-radius:18px; padding:18px; overflow:auto; }
.tsb-editor-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tsb-editor-close { appearance:none; border:0; background:#eef2f6; width:40px; height:40px; border-radius:999px; font-size:26px; }
.tsb-editor-help { margin:6px 0 10px; color:#66788a; }
.tsb-editor-status { min-height:22px; font-weight:700; color:#275fa4; margin-bottom:8px; }
.tsb-editor-rows { display:grid; gap:12px; }
.tsb-editor-row { border:1px solid #e7edf5; border-radius:14px; padding:12px; background:#fbfdff; }
.tsb-editor-row-head { font-size:14px; font-weight:800; margin-bottom:8px; }
.tsb-editor-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
.tsb-editor-grid label { display:grid; gap:6px; font-size:12px; font-weight:700; color:#526171; }
.tsb-editor-grid input { width:100%; border:1px solid #cad7e4; border-radius:10px; padding:10px 11px; font-size:14px; }
.tsb-editor-actions { margin-top:14px; display:flex; justify-content:flex-end; }
@media (max-width: 900px) {
    .tsb-practical-layout { grid-template-columns: 1fr; }
    .tsb-practical-clock-card .tsb-clock-wrap { width: 220px; height: 220px; }
    .tsb-practical-clock-card .tsb-tick { transform-origin: 50% 100px; }
    .tsb-editor-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) and (orientation: landscape) {
    .tsb-practical-layout { grid-template-columns: 32% 1fr; }
    .tsb-practical-clock-card .tsb-clock-wrap { width: 190px; height: 190px; }
    .tsb-practical-clock-card .tsb-tick { transform-origin: 50% 85px; }
    .tsb-practical-next-inner { grid-template-columns: 72px 1fr; }
    .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 66px; height: 66px; }
    .tsb-practical-item { grid-template-columns: 44px 1fr auto; }
    .tsb-practical-item-clock .tsb-mini-clock { width: 40px; height: 40px; }
    .tsb-practical-item-name { font-size: 20px; }
    .tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-clock-wrap { width: min(31vw, 220px); height: min(31vw, 220px); }
}
@media print {
    @page { size: A4 landscape; margin: 8mm; }
    html, body { background: #fff !important; }
    body * { visibility: hidden !important; }
    .tsb-mobile-overlay.is-open.is-practical-overlay,
    .tsb-mobile-overlay.is-open.is-practical-overlay * { visibility: visible !important; }
    .tsb-mobile-overlay.is-open.is-practical-overlay {
        position: static !important;
        inset: auto !important;
        display: block !important;
        background: #fff !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-inner-practical {
        padding: 0 !important;
        color: #000 !important;
    }
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-bar {
        margin-bottom: 4mm !important;
    }
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-close,
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-print,
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-note,
    .tsb-editor-trigger-wrap,
    .tsb-editor-modal {
        display: none !important;
    }
    .tsb-mobile-practical-stage {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 印刷時は左の現在時刻時計を非表示にして、右側カード領域だけをA4に収める */
    .tsb-practical-layout.is-overlay {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-left {
        display: none !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-right {
        display: block !important;
        width: 100% !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-card,
    .tsb-practical-layout.is-overlay .tsb-practical-today-card {
        width: 100% !important;
        box-sizing: border-box !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border-radius: 4mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-card {
        margin-bottom: 4mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-panel-title {
        font-size: 13pt !important;
        margin-bottom: 2mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-inner {
        grid-template-columns: 18mm 1fr !important;
        gap: 3mm !important;
        align-items: center !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large {
        width: 17mm !important;
        height: 17mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-name {
        font-size: 16pt !important;
        line-height: 1.15 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-note,
    .tsb-practical-layout.is-overlay .tsb-practical-next-empty {
        font-size: 8.5pt !important;
        line-height: 1.2 !important;
    }

    /* 最大10件でもA4横に収まりやすいよう2列印刷 */
    .tsb-practical-layout.is-overlay .tsb-practical-today-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item {
        grid-template-columns: 14mm 1fr auto !important;
        gap: 2.5mm !important;
        min-height: 0 !important;
        padding: 2.8mm 3mm !important;
        border-left-width: 3mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-clock .tsb-mini-clock {
        width: 13mm !important;
        height: 13mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-name {
        font-size: 11.5pt !important;
        line-height: 1.1 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-note {
        font-size: 7.5pt !important;
        line-height: 1.15 !important;
        margin-top: 0.5mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-status {
        min-width: 12mm !important;
        padding: 1.2mm 1.8mm !important;
        font-size: 7pt !important;
    }

    /* 印刷では余白節約のため小時計の文字をやや小さく */
    .tsb-practical-layout.is-overlay .tsb-mini-clock-number {
        font-size: 6.5px !important;
    }
    .tsb-practical-layout.is-overlay .tsb-mini-clock.is-large .tsb-mini-clock-number {
        font-size: 6.8px !important;
    }
}


/* v0.6.2 stronger A4 print fitting */
@media print {
    @page { size: A4 landscape; margin: 6mm; }

    html, body {
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    /* 印刷では余計なUIは完全に非表示 */
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-bar,
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-note,
    .tsb-editor-trigger-wrap,
    .tsb-editor-modal {
        display: none !important;
    }

    /* 中央寄せの影響を除去して先頭から表示 */
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-stage-frame,
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-stage-frame.is-practical-frame {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-practical-stage {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 左の現在時刻時計は印刷しない */
    .tsb-practical-layout.is-overlay {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-left {
        display: none !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-right {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 次カードはコンパクトに */
    .tsb-practical-layout.is-overlay .tsb-practical-next-card,
    .tsb-practical-layout.is-overlay .tsb-practical-today-card {
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 4mm !important;
        padding: 2.5mm 3mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        box-shadow: none !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-card {
        margin: 0 0 3mm 0 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-panel-title {
        font-size: 11pt !important;
        line-height: 1.1 !important;
        margin: 0 0 1.5mm 0 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-inner {
        display: grid !important;
        grid-template-columns: 14mm 1fr !important;
        gap: 2.5mm !important;
        align-items: center !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large {
        width: 13mm !important;
        height: 13mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-name {
        font-size: 13pt !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-next-note,
    .tsb-practical-layout.is-overlay .tsb-practical-next-empty {
        font-size: 7pt !important;
        line-height: 1.1 !important;
        margin-top: 0.5mm !important;
    }

    /* 予定一覧は2列固定で1ページ内に収める */
    .tsb-practical-layout.is-overlay .tsb-practical-today-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item {
        display: grid !important;
        grid-template-columns: 12mm 1fr 10mm !important;
        gap: 2mm !important;
        align-items: center !important;
        padding: 2mm 2.2mm !important;
        min-height: 19mm !important;
        border-left-width: 2.5mm !important;
        border-radius: 3mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        box-shadow: none !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-clock .tsb-mini-clock {
        width: 11mm !important;
        height: 11mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-name {
        font-size: 9.8pt !important;
        line-height: 1.02 !important;
        margin: 0 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-note {
        font-size: 6.2pt !important;
        line-height: 1.05 !important;
        margin-top: 0.4mm !important;
    }
    .tsb-practical-layout.is-overlay .tsb-practical-item-status {
        min-width: 8mm !important;
        padding: 0.8mm 1mm !important;
        font-size: 6pt !important;
        border-radius: 999px !important;
    }

    /* 小時計も収まり優先で微調整 */
    .tsb-practical-layout.is-overlay .tsb-mini-clock-number {
        font-size: 5.8px !important;
    }
    .tsb-practical-layout.is-overlay .tsb-mini-clock.is-large .tsb-mini-clock-number {
        font-size: 6px !important;
    }
    .tsb-practical-layout.is-overlay .tsb-mini-clock-face {
        stroke-width: 5 !important;
    }
    .tsb-practical-layout.is-overlay .tsb-mini-clock-mark {
        stroke-width: 2 !important;
    }

    /* 念のため全体を少し縮小して1ページ固定性を強化 */
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-practical-stage {
        transform: scale(0.96) !important;
        transform-origin: top left !important;
    }
}


/* v0.6.3 print adaptive fill for A4 */
@media print {
    /* default: no forced scale so space can be used */
    .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-practical-stage {
        transform: none !important;
        transform-origin: top left !important;
    }

    /* 1〜4件: かなり大きく */
    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-next-card,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-next-card,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-next-card,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-next-card,
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-next-card,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-next-card {
        min-height: 22mm !important;
    }

    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-today-list,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-today-list,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-today-list,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-today-list,
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-today-list,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-today-list {
        gap: 3mm !important;
    }

    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-item,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-item,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-item,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-item {
        min-height: 39mm !important;
        padding: 3.2mm 3.4mm !important;
        grid-template-columns: 16mm 1fr 11mm !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-item,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-item {
        min-height: 31mm !important;
        padding: 2.8mm 3mm !important;
        grid-template-columns: 15mm 1fr 10mm !important;
    }

    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-item-clock .tsb-mini-clock,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-item-clock .tsb-mini-clock,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-item-clock .tsb-mini-clock,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-item-clock .tsb-mini-clock {
        width: 14.5mm !important;
        height: 14.5mm !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-item-clock .tsb-mini-clock,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-item-clock .tsb-mini-clock {
        width: 13.5mm !important;
        height: 13.5mm !important;
    }

    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large,
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large {
        width: 16mm !important;
        height: 16mm !important;
    }

    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-next-name,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-next-name,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-next-name,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-next-name {
        font-size: 16pt !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-next-name,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-next-name {
        font-size: 15pt !important;
    }

    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-item-name,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-item-name,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-item-name,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-item-name {
        font-size: 12.8pt !important;
        line-height: 1.05 !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-item-name,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-item-name {
        font-size: 11.6pt !important;
        line-height: 1.05 !important;
    }

    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-item-note,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-item-note,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-item-note,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-item-note {
        font-size: 7.4pt !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-item-note,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-item-note {
        font-size: 6.8pt !important;
    }

    /* 7〜8件: 中くらい */
    .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item,
    .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item {
        min-height: 26mm !important;
        grid-template-columns: 13.5mm 1fr 9mm !important;
        padding: 2.4mm 2.6mm !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-clock .tsb-mini-clock,
    .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-clock .tsb-mini-clock {
        width: 12.2mm !important;
        height: 12.2mm !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-name,
    .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-name {
        font-size: 10.8pt !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-note,
    .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-note {
        font-size: 6.4pt !important;
    }

    /* 9〜10件: 前版に近い安全サイズ + 少しだけ拡大 */
    .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item,
    .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item {
        min-height: 22mm !important;
        grid-template-columns: 12.5mm 1fr 8.5mm !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item-clock .tsb-mini-clock,
    .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item-clock .tsb-mini-clock {
        width: 11.5mm !important;
        height: 11.5mm !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item-name,
    .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item-name {
        font-size: 10.2pt !important;
    }

    /* 少件数時は小時計の数字も少し見やすく */
    .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-mini-clock-number,
    .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-mini-clock-number,
    .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-mini-clock-number,
    .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-mini-clock-number {
        font-size: 6.5px !important;
    }
    .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-mini-clock-number,
    .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-mini-clock-number {
        font-size: 6.2px !important;
    }
}


/* v0.7.0 digital time and portrait print improvements */
.tsb-practical-next-time,
.tsb-practical-item-time {
    font-size: 13px;
    font-weight: 800;
    color: #223;
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin-bottom: 2px;
}
.tsb-practical-item-time { font-size: 12px; }
.tsb-practical-next-name,
.tsb-practical-item-name { color: #111; }
.tsb-practical-next-note,
.tsb-practical-item-note { color: #45515e; }

@media (max-width: 900px) and (orientation: landscape) {
    .tsb-practical-next-time { font-size: 12px; }
    .tsb-practical-item-time { font-size: 11px; }
}

@media print {
    @page { size: A4 portrait; margin: 7mm; }

    html, body {
        width: 210mm !important;
        min-height: 297mm !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    body * { visibility: hidden !important; }

    body.tsb-print-normal .tsb-print-source-normal,
    body.tsb-print-normal .tsb-print-source-normal *,
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay,
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay * {
        visibility: visible !important;
    }

    body.tsb-print-normal .tsb-board[data-display-mode="practical"],
    body.tsb-print-normal .tsb-board[data-display-mode="practical"] *,
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay,
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay * {
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* normal practical print source positioning */
    body.tsb-print-normal .tsb-board[data-display-mode="practical"] {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    body.tsb-print-normal .tsb-board[data-display-mode="practical"] > :not(.tsb-practical-layout) {
        display: none !important;
    }

    /* overlay print source positioning */
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-inner-practical {
        padding: 0 !important;
        margin: 0 !important;
        color: #000 !important;
    }
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-bar,
    body.tsb-print-overlay .tsb-mobile-overlay.is-open.is-practical-overlay .tsb-mobile-overlay-note,
    body.tsb-print-normal .tsb-editor-trigger-wrap,
    body.tsb-print-normal .tsb-editor-modal,
    body.tsb-print-overlay .tsb-editor-trigger-wrap,
    body.tsb-print-overlay .tsb-editor-modal {
        display: none !important;
    }
    body.tsb-print-overlay .tsb-mobile-stage-frame,
    body.tsb-print-overlay .tsb-mobile-stage-frame.is-practical-frame {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.tsb-print-overlay .tsb-mobile-practical-stage {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* shared practical print styling */
    body.tsb-print-normal .tsb-practical-layout,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.tsb-print-normal .tsb-practical-left,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-left {
        display: none !important;
    }
    body.tsb-print-normal .tsb-practical-right,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-right {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.tsb-print-normal .tsb-practical-next-card,
    body.tsb-print-normal .tsb-practical-today-card,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-card,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-today-card {
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 4mm !important;
        padding: 3mm !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    body.tsb-print-normal .tsb-practical-next-card,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-card {
        margin: 0 0 3.5mm 0 !important;
        min-height: 24mm !important;
    }
    body.tsb-print-normal .tsb-practical-panel-title,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-panel-title {
        font-size: 12pt !important;
        line-height: 1.1 !important;
        margin: 0 0 2mm 0 !important;
        color: #000 !important;
    }
    body.tsb-print-normal .tsb-practical-next-inner,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-inner {
        display: grid !important;
        grid-template-columns: 19mm 1fr !important;
        gap: 3mm !important;
        align-items: center !important;
    }
    body.tsb-print-normal .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large {
        width: 18mm !important;
        height: 18mm !important;
    }
    body.tsb-print-normal .tsb-practical-next-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-time {
        font-size: 9pt !important;
        margin-bottom: 0.8mm !important;
        color: #000 !important;
    }
    body.tsb-print-normal .tsb-practical-next-name,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-name {
        font-size: 15pt !important;
        line-height: 1.08 !important;
        color: #000 !important;
    }
    body.tsb-print-normal .tsb-practical-next-note,
    body.tsb-print-normal .tsb-practical-next-empty,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-note,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-empty {
        font-size: 8pt !important;
        line-height: 1.12 !important;
        color: #000 !important;
        margin-top: 0.5mm !important;
    }

    /* portrait print list defaults: one column, narrower width not needed because paper is portrait */
    body.tsb-print-normal .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-today-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3mm !important;
    }

    body.tsb-print-normal .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item {
        display: grid !important;
        grid-template-columns: 19mm 1fr 13mm !important;
        gap: 3mm !important;
        align-items: center !important;
        width: 100% !important;
        padding: 3mm !important;
        min-height: 28mm !important;
        border-left-width: 3mm !important;
        border-radius: 4mm !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    body.tsb-print-normal .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-clock .tsb-mini-clock {
        width: 18mm !important;
        height: 18mm !important;
    }
    body.tsb-print-normal .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-time {
        font-size: 8.8pt !important;
        line-height: 1.08 !important;
        margin-bottom: 0.6mm !important;
        color: #000 !important;
    }
    body.tsb-print-normal .tsb-practical-item-name,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-name {
        font-size: 14pt !important;
        line-height: 1.08 !important;
        color: #000 !important;
        margin: 0 !important;
    }
    body.tsb-print-normal .tsb-practical-item-note,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-note {
        font-size: 7.8pt !important;
        line-height: 1.1 !important;
        color: #000 !important;
        margin-top: 0.4mm !important;
    }
    body.tsb-print-normal .tsb-practical-item-status,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-status {
        min-width: 12mm !important;
        padding: 1.2mm 1.6mm !important;
        font-size: 7pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        border: 0.2mm solid rgba(0,0,0,0.15) !important;
        background: rgba(255,255,255,0.7) !important;
    }

    /* clocks darker and clearer in print */
    body.tsb-print-normal .tsb-mini-clock-face,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-face {
        stroke: #2e86de !important;
        stroke-width: 5 !important;
        fill: #fff !important;
    }
    body.tsb-print-normal .tsb-mini-clock-mark,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-mark {
        stroke: #2e86de !important;
        stroke-width: 2.2 !important;
    }
    body.tsb-print-normal .tsb-mini-clock-number,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-number {
        fill: #000 !important;
        font-size: 7px !important;
        font-weight: 800 !important;
    }
    body.tsb-print-normal .tsb-mini-clock-hour,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-hour {
        stroke: #e53935 !important;
    }
    body.tsb-print-normal .tsb-mini-clock-minute,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-minute {
        stroke: #1e88e5 !important;
    }

    /* count-based fitting for portrait */
    body.tsb-print-normal .tsb-practical-layout.tsb-count-1 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-2 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-3 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-4 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-item {
        min-height: 38mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-5 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-6 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-item {
        min-height: 31mm !important;
    }

    /* 7件以上は2列にして収める */
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-today-list,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-today-list,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-today-list,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-today-list {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item {
        grid-template-columns: 14mm 1fr 10mm !important;
        min-height: 24mm !important;
        padding: 2.3mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item-clock .tsb-mini-clock {
        width: 13mm !important;
        height: 13mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-item-name,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-item-name,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-item-name,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-item-name,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-name,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-name,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item-name,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item-name {
        font-size: 11.5pt !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-item-time,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-item-time,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-item-time,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item-time {
        font-size: 7.6pt !important;
    }
}


/* v0.8.0 decorative print + public edit + larger clocks */
.tsb-print-deco-header { display:none; }
.tsb-editor-trigger-wrap { margin-top: 14px; display:flex; justify-content:flex-end; }
.tsb-editor-trigger { background: linear-gradient(180deg, #6caeff 0%, #4a86d9 100%); box-shadow: 0 4px 12px rgba(74,134,217,0.2); }

/* clearer normal practical colors */
.tsb-practical-next-card,
.tsb-practical-item { border-color: var(--tsb-band-border, #a8ccff); }
.tsb-practical-next-time,
.tsb-practical-item-time { color: var(--tsb-band-accent, #223); font-weight: 900; }

/* bigger on-screen mini clocks too */
.tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 92px; height: 92px; }
.tsb-practical-item-clock .tsb-mini-clock { width: 54px; height: 54px; }
.tsb-mini-clock-number { font-size: 12.5px; font-weight: 900; }
.tsb-mini-clock.is-large .tsb-mini-clock-number { font-size: 12.5px; }
@media (max-width: 900px) and (orientation: landscape) {
    .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width: 74px; height: 74px; }
    .tsb-practical-item-clock .tsb-mini-clock { width: 44px; height: 44px; }
}

@media print {
    @page { size: A4 portrait; margin: 7mm; }

    /* decorative header */
    body.tsb-print-normal .tsb-print-deco-header,
    body.tsb-print-overlay .tsb-print-deco-header {
        display: block !important;
        position: relative !important;
        margin: 0 0 4mm 0 !important;
        padding: 4mm 4mm 3.2mm !important;
        border-radius: 6mm !important;
        background: linear-gradient(180deg, #fffef9 0%, #f9fcff 100%) !important;
        border: 0.6mm solid #d8e4f5 !important;
        box-shadow: none !important;
        text-align: center !important;
        overflow: hidden !important;
    }
    body.tsb-print-normal .tsb-print-deco-ribbon,
    body.tsb-print-overlay .tsb-print-deco-ribbon {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        height: 3.5mm !important;
        background: linear-gradient(90deg, #f6c143 0%, #95d364 20%, #67c7d1 40%, #8298ff 60%, #c59cf4 80%, #ffb36b 100%) !important;
    }
    body.tsb-print-normal .tsb-print-deco-title,
    body.tsb-print-overlay .tsb-print-deco-title {
        font-size: 20pt !important;
        font-weight: 900 !important;
        color: #000 !important;
        line-height: 1.1 !important;
        margin-top: 1mm !important;
        letter-spacing: 0.04em !important;
    }
    body.tsb-print-normal .tsb-print-deco-sub,
    body.tsb-print-overlay .tsb-print-deco-sub {
        font-size: 9pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        opacity: 0.8 !important;
        margin-top: 1mm !important;
    }

    /* card appearance more decorative */
    body.tsb-print-normal .tsb-practical-next-card,
    body.tsb-print-normal .tsb-practical-today-card,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-card,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-today-card {
        background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, var(--tsb-band-bg, #fff) 100%) !important;
        border: 0.55mm solid #d7e0ef !important;
    }
    body.tsb-print-normal .tsb-practical-next-card,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-card {
        border-top: 1.4mm solid var(--tsb-band-border, #f6c143) !important;
    }
    body.tsb-print-normal .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item {
        background: linear-gradient(90deg, var(--tsb-band-bg, #fff) 0%, #ffffff 72%) !important;
        border: 0.35mm solid #dbe3f0 !important;
        border-left: 3.2mm solid var(--tsb-band-border, #f6c143) !important;
    }

    /* larger, clearer clocks */
    body.tsb-print-normal .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large {
        width: 23mm !important;
        height: 23mm !important;
    }
    body.tsb-print-normal .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-clock .tsb-mini-clock {
        width: 22mm !important;
        height: 22mm !important;
    }
    body.tsb-print-normal .tsb-practical-next-inner,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-inner {
        grid-template-columns: 24mm 1fr !important;
        gap: 3.5mm !important;
    }
    body.tsb-print-normal .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-practical-item {
        grid-template-columns: 24mm 1fr 14mm !important;
        gap: 3mm !important;
    }
    body.tsb-print-normal .tsb-mini-clock-number,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-number {
        fill: #000 !important;
        font-size: 8.2px !important;
        font-weight: 900 !important;
    }
    body.tsb-print-normal .tsb-mini-clock-face,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-face {
        stroke-width: 5.5 !important;
    }
    body.tsb-print-normal .tsb-mini-clock-mark,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-mark {
        stroke-width: 2.35 !important;
    }
    body.tsb-print-normal .tsb-mini-clock-hour,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-hour { stroke-width: 5.2 !important; }
    body.tsb-print-normal .tsb-mini-clock-minute,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay .tsb-mini-clock-minute { stroke-width: 4.2 !important; }

    /* black typography */
    body.tsb-print-normal .tsb-practical-panel-title,
    body.tsb-print-normal .tsb-practical-next-time,
    body.tsb-print-normal .tsb-practical-next-name,
    body.tsb-print-normal .tsb-practical-next-note,
    body.tsb-print-normal .tsb-practical-item-time,
    body.tsb-print-normal .tsb-practical-item-name,
    body.tsb-print-normal .tsb-practical-item-note,
    body.tsb-print-normal .tsb-practical-item-status,
    body.tsb-print-overlay .tsb-practical-panel-title,
    body.tsb-print-overlay .tsb-practical-next-time,
    body.tsb-print-overlay .tsb-practical-next-name,
    body.tsb-print-overlay .tsb-practical-next-note,
    body.tsb-print-overlay .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-item-name,
    body.tsb-print-overlay .tsb-practical-item-note,
    body.tsb-print-overlay .tsb-practical-item-status { color: #000 !important; }

    /* count-based fill, portrait decorative template */
    body.tsb-print-normal .tsb-practical-layout.tsb-count-1 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-2 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-3 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-4 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-1 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-2 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-3 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-4 .tsb-practical-item {
        min-height: 42mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-5 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-6 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-5 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-6 .tsb-practical-item {
        min-height: 34mm !important;
    }

    /* for 7-10 keep two columns but larger than before */
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-today-list,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-today-list,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-today-list,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-today-list,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-today-list {
        grid-template-columns: 1fr 1fr !important;
        gap: 3mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-item,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item {
        grid-template-columns: 16mm 1fr 10mm !important;
        min-height: 26mm !important;
        padding: 2.5mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item-clock .tsb-mini-clock,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item-clock .tsb-mini-clock {
        width: 16mm !important;
        height: 16mm !important;
    }
    body.tsb-print-normal .tsb-practical-layout.tsb-count-7 .tsb-practical-item-time,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-8 .tsb-practical-item-time,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-9 .tsb-practical-item-time,
    body.tsb-print-normal .tsb-practical-layout.tsb-count-10 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-7 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-8 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-9 .tsb-practical-item-time,
    body.tsb-print-overlay .tsb-practical-layout.is-overlay.tsb-count-10 .tsb-practical-item-time { font-size: 7.8pt !important; }
}


/* v0.9.0 fullscreen fit + illustration selector */
.tsb-editor-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tsb-editor-grid select { width:100%; border:1px solid #cad7e4; border-radius:10px; padding:10px 11px; font-size:14px; background:#fff; }

.tsb-illustration-badge {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-width:54px; padding:4px 4px; border-radius:14px;
    background: color-mix(in srgb, var(--tsb-band-bg, #f3f8ff) 82%, #fff 18%);
    border:1px solid color-mix(in srgb, var(--tsb-band-border, #a8ccff) 60%, #fff 40%);
}
.tsb-illustration-badge.is-next { min-width:74px; padding:6px 6px; }
.tsb-illustration-emoji { font-size:26px; line-height:1; }
.tsb-illustration-badge.is-next .tsb-illustration-emoji { font-size:30px; }
.tsb-illustration-label { font-size:10px; line-height:1.15; font-weight:800; color:#334; text-align:center; word-break:keep-all; }
.tsb-practical-next-media, .tsb-practical-item-media { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.tsb-practical-item-media { gap:6px; }
.tsb-practical-next-inner { align-items:center; }
.tsb-practical-item { align-items:center; }
.tsb-practical-item-time, .tsb-practical-next-time { margin-bottom:3px; }

/* mobile fullscreen overlay: maximize viewport and float controls */
.tsb-mobile-overlay.is-practical-overlay { background:#eef5fb; }
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-overlay-inner-practical {
    padding: 0 !important;
    color:#223;
}
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-overlay-bar {
    position:absolute; top:max(env(safe-area-inset-top), 8px); right:8px; left:auto;
    z-index:20; margin:0; padding:0; background:transparent; justify-content:flex-end;
}
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-overlay-title { display:none; }
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-overlay-tools { display:flex; gap:8px; }
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-print,
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-close {
    appearance:none; border:0; border-radius:999px; height:44px; min-width:44px;
    background: rgba(255,255,255,0.94); color:#223; box-shadow:0 4px 10px rgba(0,0,0,0.12); font-weight:800;
}
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-print { padding:0 16px; }
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-stage-frame.is-practical-frame {
    width:100vw; height:100dvh; min-height:100dvh; padding:8px; box-sizing:border-box;
    overflow:hidden; align-items:center; justify-content:center;
}
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-practical-stage {
    flex:0 0 auto; width:auto; max-width:none; transform-origin: top left;
}
.tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay {
    width:auto; height:auto;
}
@media (max-width: 900px) {
    .tsb-mobile-overlay.is-practical-overlay .tsb-mobile-stage-frame.is-practical-frame {
        padding-top: calc(max(env(safe-area-inset-top), 8px) + 46px);
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-clock-card .tsb-clock-wrap { width:140px; height:140px; }
}
@media (max-width: 900px) and (orientation: landscape) {
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay { grid-template-columns: 29% 1fr; gap:8px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-clock-card,
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-card,
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-today-card { padding:8px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-name { font-size:18px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-name { font-size:16px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-item { grid-template-columns:60px 1fr auto; gap:8px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-inner { grid-template-columns:84px 1fr; gap:10px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-clock-wrap .tsb-mini-clock.is-large { width:54px; height:54px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-item-clock .tsb-mini-clock { width:34px; height:34px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-illustration-badge { min-width:44px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-illustration-emoji { font-size:22px; }
    .tsb-mobile-overlay.is-practical-overlay .tsb-illustration-label { font-size:9px; }
}

@media print {
    .tsb-illustration-badge { min-width: 18mm !important; padding: 1.8mm !important; }
    .tsb-illustration-badge.is-next { min-width: 20mm !important; }
    .tsb-illustration-emoji { font-size: 18px !important; }
    .tsb-illustration-badge.is-next .tsb-illustration-emoji { font-size: 22px !important; }
    .tsb-illustration-label { font-size: 6.8pt !important; color:#000 !important; }
}


/* v0.9.1 fullscreen practical overlay stabilization */
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-stage-frame.is-practical-frame {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.tsb-mobile-overlay.is-practical-overlay .tsb-mobile-practical-stage {
    margin: 0 auto;
}

/* portrait fullscreen: prioritize cards, hide left clock panel */
@media (max-width: 900px) and (orientation: portrait) {
    .tsb-mobile-overlay.is-practical-overlay .tsb-mobile-stage-frame.is-practical-frame {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: calc(max(env(safe-area-inset-top), 8px) + 56px) !important;
        padding-bottom: calc(max(env(safe-area-inset-bottom), 8px) + 10px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-mobile-practical-stage {
        width: min(100%, 560px) !important;
        max-width: 560px !important;
        transform: none !important;
        height: auto !important;
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        height: auto !important;
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-left {
        display: none !important;
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-right {
        width: 100% !important;
    }
}

/* landscape fullscreen: use a fixed design width then scale to fit the viewport */
@media (max-width: 900px) and (orientation: landscape) {
    .tsb-mobile-overlay.is-practical-overlay .tsb-mobile-stage-frame.is-practical-frame {
        align-items: center !important;
        justify-content: center !important;
        padding-top: calc(max(env(safe-area-inset-top), 8px) + 52px) !important;
        padding-bottom: calc(max(env(safe-area-inset-bottom), 8px) + 8px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        overflow: hidden !important;
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-mobile-practical-stage {
        width: 980px !important;
        max-width: none !important;
        height: auto !important;
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay {
        width: 980px !important;
        grid-template-columns: 260px 1fr !important;
        gap: 12px !important;
        height: auto !important;
    }
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-clock-card,
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-next-card,
    .tsb-mobile-overlay.is-practical-overlay .tsb-practical-layout.is-overlay .tsb-practical-today-card {
        padding: 10px !important;
    }
}