.tl-app{max-width:1120px;margin:auto;min-width:0;padding-bottom:max(24px,env(safe-area-inset-bottom));font-size:16px}

.tl-app [hidden]{display:none!important}
.tl-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}
.tl-heading h1{margin:4px 0;font-size:clamp(1.7rem,5vw,2.4rem);overflow-wrap:anywhere}
.tl-heading p{margin:4px 0}
.tl-heading>div>a{font-size:.85rem;text-decoration:none;color:var(--muted)}
.tl-heading>div>a:hover{text-decoration:underline}
.tl-app .small{font-size:.86rem}
.tl-app button,.tl-app button.button,.tl-app a.button{min-height:44px;cursor:pointer;font-size:.9rem}
.tl-app button:not(.button){border:1px solid var(--border-subtle,#d3ddd5);border-radius:10px;padding:8px 12px;background:var(--surface,#fffdf7);color:var(--ink)}
.tl-app button:disabled{opacity:.5;cursor:default}
.tl-app :is(button,a,input,select,textarea):focus-visible{outline:3px solid #d7a84b;outline-offset:3px}
.tl-app label{font-size:.9rem}
.tl-app :is(input,select,textarea){font-size:16px;max-width:100%;min-width:0}
.tl-app input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--green)}
.tl-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px}
.tl-toolbar{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:8px;padding:4px 0;margin:0;background:none;box-shadow:none;border:0;position:static}
.tl-app .tl-toolbar .button{padding:10px 16px}
.tl-save-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:24px;font-size:.8rem;color:var(--muted)}
.tl-save-line button{font-size:.8rem}
.tl-instructions{max-width:650px;margin:8px 0 12px;color:var(--muted)}
#tl-description:empty{display:none}
#tl-message,#tl-card-message{font-size:.85rem;color:var(--muted)}
.tl-board{display:grid;gap:2px;overflow:hidden;border:1px solid var(--border-subtle,#d6ddd5);border-radius:14px;background:var(--surface,#fffdf7)}
.tl-row{display:grid;grid-template-columns:76px minmax(0,1fr);min-width:0;min-height:76px;background:#f0f0eb}
.tl-label{display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;margin:0;color:#202825;font:700 1.3rem/1.2 system-ui;overflow-wrap:anywhere;min-width:0}
.tl-books{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;min-width:0;max-width:100%;padding:14px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#8b9d92 transparent;position:relative;min-height:148px;scroll-padding:12px}
.tl-books:focus-visible{outline:3px solid #d7a84b;outline-offset:-3px}
.tl-books.tl-group-empty{min-height:76px}
.tl-row-empty{font-size:.8rem;color:var(--muted);align-self:center;margin:10px}
.tl-book{width:76px;flex:0 0 76px;min-width:0;position:relative;margin:0}
.tl-book-button{border:0!important;padding:0!important;background:none!important;text-align:left;display:block;width:100%;color:var(--ink);border-radius:5px!important}
.tl-book img{width:72px;height:108px;object-fit:contain;background:#dce4db;border-radius:4px;display:block;pointer-events:none}
.tl-book-title{display:block;font-size:11px;line-height:1.3;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-book a{color:var(--ink);text-decoration:none}
.tl-handle{position:absolute;top:0;right:-5px;width:44px;height:44px;padding:0!important;border-radius:8px!important;border:0!important;background:transparent!important;color:#20302b!important;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab!important;font-size:16px!important;opacity:.75}
.tl-handle::before{content:"";position:absolute;inset:10px 12px;border-radius:4px;background:rgba(255,253,247,.9);pointer-events:none}
.tl-handle::after{content:"";position:absolute;top:15px;left:17px;width:10px;height:15px;background:radial-gradient(circle,#52655b 1px,transparent 1.5px) 0 0/5px 5px;pointer-events:none}
.tl-label.tl-long-label{font-size:.95rem}
.tl-dragging .tl-handle{touch-action:none;cursor:grabbing!important}
.tl-drop-target{box-shadow:inset 0 0 0 3px #d7a84b}
.tl-insert{position:absolute;top:8px;bottom:8px;width:4px;border-radius:2px;background:#c6972d;pointer-events:none}
.tl-drag-ghost{position:fixed;z-index:10000;width:72px;height:108px;opacity:.8;pointer-events:none;box-shadow:0 12px 32px #0006}
.tl-dragging{user-select:none;-webkit-user-select:none}
.tl-pool-section{margin:20px 0 0;min-width:0}
.tl-pool-section h2{font:600 1rem/1.4 system-ui;margin:0}
.tl-pool-section p{margin:6px 0}
.tl-pool{padding:14px 0;min-height:146px}
.tl-management button{border-color:transparent!important;background:transparent!important}
.tl-app .tl-management{margin-top:16px;padding:0;border:0}
.tl-management summary{display:flex;align-items:center;min-height:44px;width:fit-content;cursor:pointer;font-size:.85rem;color:var(--muted)}
.tl-management>div{display:flex;gap:10px;flex-wrap:wrap}
.tl-app .tl-management summary:focus-visible{outline:3px solid #d7a84b;outline-offset:3px}
.tl-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.tl-gallery-card{border:1px solid var(--border-subtle,#d6ddd5);border-radius:16px;background:var(--surface,#fffdf7);padding:22px;color:var(--ink);text-decoration:none;display:block}
.tl-gallery-card h2{font-size:1.15rem;overflow-wrap:anywhere;margin:16px 0 8px}
.tl-mini{display:flex;gap:4px;height:6px}
.tl-mini span{flex:1;border-radius:3px}
.tl-empty{text-align:center;max-width:560px;margin:28px auto;padding:24px}
.tl-empty p{max-width:450px;margin:12px auto}
.tl-dialog{width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--border-subtle,#cdd7ce);border-radius:18px;background:var(--surface,#fffdf7);color:var(--ink);padding:22px;box-shadow:0 24px 80px #0005;font-size:16px}
.tl-dialog::backdrop{background:#111a18a6}
.tl-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.tl-dialog h2{font-size:1.3rem;margin:0;overflow-wrap:anywhere}
.tl-dialog-heading button{flex:none;width:44px;padding:8px!important;border:0!important;background:transparent!important;font-size:16px!important}
.tl-dialog form{display:grid;gap:14px}
.tl-dialog label{display:block;margin:0}
.tl-dialog :is(input:not([type=checkbox]):not([type=color]),textarea,select){display:block;width:100%;margin-top:5px}
.tl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tl-picker-books{display:grid;gap:8px;margin:14px 0}
.tl-picker-book{display:flex!important;align-items:center;gap:12px;border:1px solid var(--border-subtle,#d6ddd5);border-radius:10px;padding:10px!important;min-height:72px;cursor:pointer}
.tl-picker-book img{width:34px;height:51px;object-fit:contain}
.tl-picker-book span{min-width:0;overflow-wrap:anywhere}
.tl-picker-book small{display:block;color:var(--muted)}
.tl-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}
.tl-tier-setting{display:grid;grid-template-columns:minmax(60px,1fr) 48px repeat(3,44px);gap:6px;margin:10px 0;align-items:center}
.tl-tier-setting input[type=color]{padding:3px;width:44px;height:44px;border:1px solid var(--border-subtle,#ccc);border-radius:7px}
.tl-tier-setting button{padding:4px!important;border-color:transparent!important;background:transparent!important}
.tl-rank{max-width:420px}
.tl-rank #tl-rank-actions{display:grid;gap:12px}
.tl-rank-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px;min-width:0;margin:0;padding:0;border:0}
.tl-rank-tiers legend{padding:0;margin-bottom:8px;color:var(--muted);font-size:.85rem}
.tl-rank-tiers button{border-left:4px solid var(--tier-color)!important;overflow-wrap:anywhere}
.tl-rank-tiers button[aria-current]{opacity:1;color:var(--muted)}
.tl-rank-reorder{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tl-app .tl-remove-book,#tl-delete{color:#a73b38}
.tl-app .tl-remove-book{border-color:transparent!important;background:transparent!important}
.tl-card-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.tl-card-options>label:first-child{flex:0 1 180px}
.tl-card-options .tl-checkbox{margin:0!important}
.tl-card{width:min(760px,calc(100% - 24px))}
.tl-card img{display:block;width:100%;height:auto;border-radius:10px;margin:18px 0}
.tl-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.tl-checkbox{display:flex!important;align-items:center;gap:10px;margin:16px 0!important}
.tl-public-footer{text-align:center;margin:36px 0}
.tl-public .tl-book{width:86px;flex-basis:86px}
.tl-public .tl-book-title{white-space:normal;overflow-wrap:anywhere}
.tl-public .tl-books{min-height:160px}
.tl-public .tl-row{min-height:160px}
#tl-public-url{overflow-wrap:anywhere;display:block;margin:12px 0}

:root[data-theme=dark] .tl-row{background:#252b2e}
:root[data-theme=dark] .tl-board{background:#151c20}
:root[data-theme=dark] .tl-app .tl-remove-book,:root[data-theme=dark] #tl-delete{color:#f2aaa6}
:root[data-theme=dark] .tl-book img{background:#35433c}

@media(max-width:600px){.tl-heading{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:12px}
.tl-tools{gap:2px}
.tl-toolbar{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tl-app .tl-toolbar .button{padding:10px 4px;font-size:13px;width:100%;white-space:nowrap}
.tl-row{grid-template-columns:52px minmax(0,1fr);min-height:76px}
.tl-label{font-size:1.1rem;padding:6px}
.tl-books{gap:10px;padding:12px 10px;min-height:140px}
.tl-book{width:64px;flex-basis:64px}
.tl-book img{width:62px;height:93px}
.tl-handle{top:0;right:-5px}
.tl-label.tl-long-label{font-size:.75rem}
.tl-dialog{padding:16px}
.tl-tier-setting{grid-template-columns:minmax(50px,1fr) 40px repeat(3,40px);gap:3px}
.tl-tier-setting input[type=color]{width:38px}
.tl-tier-setting button{min-width:40px}
.tl-public .tl-book{width:70px;flex-basis:70px}
.tl-public .tl-books{min-height:150px}
.tl-two{grid-template-columns:1fr}
.tl-empty{padding:16px 0}
.tl-dialog :is(input,textarea){scroll-margin:60px 0}
}

@media(prefers-reduced-motion:no-preference){.tl-book-button:hover{transform:translateY(-2px)}
.tl-book-button{transition:transform .12s ease}
}


.tl-heading>div{min-width:0}
.tl-heading p{overflow-wrap:anywhere}


.tl-book-button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}


@media(hover:hover) and (pointer:fine){.tl-handle{opacity:0}.tl-book:hover .tl-handle,.tl-book:focus-within .tl-handle,.tl-dragging .tl-handle{opacity:1}}