/* Tidobytes: original orange artwork, warm neutrals, restrained glass. */
:root{
 --brand-orange:#ff7c25;--brand-amber:#ffaf45;
 --bg:#faf9f7;--surface:#ffffff;--ink:#24211e;--muted:#655e56;
 --border:#e8e3dc;--accent:#ad460b;--soft:#fff0e4;
 --scroll-thumb:#c6b8a8;--scroll-hover:#a28d77;
 --feature-bg:#fff1df;--feature-border:#f2dfc8;--feature-ink:#392619;
 --feature-muted:#735b44;--ring:#f7dfc5;--shadow:0 3px 14px #49270c05;
 color-scheme:light;
}
body.dark{
 --bg:#121211;--surface:#1b1a18;--ink:#f5f2ed;--muted:#bcb4a9;
 --border:#37322d;--accent:#ffad6f;--soft:#35251a;
 --scroll-thumb:#65574a;--scroll-hover:#9b7c5e;
 --feature-bg:#261d15;--feature-border:#493322;--feature-ink:#fff0df;
 --feature-muted:#d0b69b;--ring:#4d3522;--shadow:0 3px 14px #0000000d;
 color-scheme:dark;
}
html:has(body.dark){--scroll-thumb:#65574a;--scroll-hover:#9b7c5e;color-scheme:dark}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button:focus-visible,a:focus-visible,.embed-help summary:focus-visible{outline:2px solid var(--brand-orange);outline-offset:3px}
input,select,textarea{accent-color:var(--brand-orange)}
header{background:var(--surface);box-shadow:0 1px 0 #00000002}
nav button,.dark nav button,.sidebar-bottom button,.dark .sidebar-bottom button{color:var(--muted)}
nav button:hover{background:var(--soft)}
nav button.active,.dark nav button.active{background:var(--soft);color:var(--accent);box-shadow:inset 3px 0 0 var(--brand-orange)}
.nav-label,.dark .nav-label{color:var(--muted)}
.collections-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-radius:6px;text-align:left}
.collections-toggle:hover{background:var(--soft);filter:none;color:var(--accent)}
.collection-chevron{transition:transform .15s}
.collections-toggle[aria-expanded=false] .collection-chevron{transform:rotate(-90deg)}
.sidebar-collapsed #collectionsBtn{display:none}
.search-shortcut,.dark .search-shortcut,kbd,.dark kbd{color:var(--muted)}
.search-shortcut{background:var(--bg)}
.search-shortcut:hover{border-color:var(--scroll-thumb)}
.signature,.dark .signature,.signature strong,.dark .signature strong,footer,.dark footer{color:var(--muted)}
.avatar{background:var(--soft);color:var(--accent)}
.local-status i{background:var(--brand-orange)}
.eyebrow,.dark .eyebrow{color:var(--accent)}
.intro .eyebrow span{background:var(--brand-orange)}
h1{letter-spacing:-1.5px}
h1 span,.dark h1 span{color:var(--muted)}
.primary{background:var(--brand-orange);color:#291707;border:1px solid #e86b18;box-shadow:inset 0 1px 0 #ffffff36,0 2px 3px #56270008}
.primary:hover{background:#ff9138;filter:none}
.quiet,.dark .quiet{background:var(--surface);color:var(--ink)}
.quiet:hover{border-color:var(--scroll-thumb)}
.featured,.dark .featured{background:var(--feature-bg);border-color:var(--feature-border)}
.featured h2,.dark .featured h2{color:var(--feature-ink);font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:29px;line-height:1.22;letter-spacing:-1px}
.featured p,.dark .featured p{color:var(--feature-muted)}
.featured button,.dark .featured button{color:var(--accent)}
.orbit{border-color:var(--ring)}
.dark .orbit{border-color:var(--ring)}
.orbit-center{transform:translate(-50%,-50%)}
.orbit-center img{width:112px;height:112px;filter:none}
.orbit-tile,.dark .orbit-tile{background:var(--surface);border-color:var(--feature-border);color:var(--accent);box-shadow:0 4px 10px #40210b08}
.art-caption,.dark .art-caption{color:var(--feature-muted)}
.search-field{background:var(--surface)}
.search-field:focus-within{border-color:var(--brand-orange);box-shadow:0 0 0 3px #ff7c2512}
.search-field>span{color:var(--muted)}
input::placeholder,textarea::placeholder,.dark input::placeholder,.dark textarea::placeholder{color:var(--muted);opacity:1}
.view-toggle .selected{background:var(--soft);color:var(--accent)}
.chip,.dark .chip{color:var(--muted);background:var(--surface);border-color:var(--border)}
.chip.active,.dark .chip.active{background:var(--soft);border-color:var(--brand-orange);color:var(--accent);font-weight:700}
.cards,.dark .cards{background:none}
.card{background:linear-gradient(145deg,#ffffffef,#ffffffd9);border-color:#e9e3da;box-shadow:inset 0 1px 0 #fff,0 3px 12px #49301a05;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card:before{background:linear-gradient(145deg,#fff7ed70,transparent 70%);opacity:1}
.card:hover{border-color:#e8b58d;box-shadow:inset 0 1px 0 #fff,0 6px 18px #49270c0b}
.dark .card{background:linear-gradient(145deg,#25221ff5,#1c1b19ef);border-color:#3b342d;box-shadow:inset 0 1px 0 #ffffff09,0 3px 12px #0001}
.dark .card:before{background:linear-gradient(145deg,#ff9b4810,transparent 65%);opacity:1}
.dark .card:hover{border-color:#8c5b36;box-shadow:inset 0 1px 0 #ffffff0c,0 6px 18px #0002}
.card-title{color:var(--ink);font-size:13px;line-height:20px}
.card-description,.dark .card-description{color:var(--muted);font-size:12px;line-height:18px;min-height:36px}
.card-footer,.dark .card-footer{border-top-color:var(--border)}
.category-badge,.dark .category-badge{color:var(--muted);font-size:10px}
.app-icon{background:var(--tint);border-color:#ffffffa0;box-shadow:inset 0 1px 0 #fff8}
.dark .app-icon{background:color-mix(in srgb,var(--cat) 16%,#24211e);border-color:#ffffff14;color:color-mix(in srgb,var(--cat) 35%,#fff 65%);box-shadow:inset 0 1px 0 #ffffff08}
.card-footer button,.dark .card-footer button,.card summary,.dark .card summary{color:var(--muted)}
.star,.dark .star{color:var(--muted)}
.star.on{color:#ab540d}
.dark .star.on{color:var(--brand-amber)}
.menu{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.menu button:hover{background:var(--soft)}
.notice{background:var(--soft);color:var(--ink)}
.tabs{background:var(--bg);border-bottom:1px solid var(--border)}
.tab{background:var(--bg);color:var(--muted)}
.tab.active{background:var(--soft);color:var(--ink);border:1px solid var(--brand-orange);box-shadow:none}
.nav-icon svg{vertical-align:middle;width:17px;height:17px}
.tab-pin{padding:4px;display:grid;place-items:center;color:var(--muted);border-radius:4px;flex:none}
.tab-pin:hover,.tab-pin.is-pinned{color:var(--accent);background:var(--soft)}
.tab-pin:focus-visible{outline-offset:0}
.pinned-tab{min-width:64px;max-width:64px;padding:1px 5px;gap:2px;background:var(--soft);border-color:var(--border)}
.pinned-tab .tab-label{text-align:center;font-size:17px;padding:4px 0;line-height:24px}
.pinned-tab.active{background:var(--soft)}
.card-top .app-icon{margin-right:auto}
.card-pin{display:grid;place-items:center;color:var(--accent);padding:4px;border-radius:4px;margin-right:4px}
.cards.list .card-pin{position:absolute;right:47px;top:11px}
.address input,.dark .address input{color:var(--muted)}
.addressbar{background:var(--surface)}
.embed-help summary{color:var(--muted)}
.embed-help-content button{color:var(--accent)}
dialog::backdrop{background:#17110c70}
dialog label input,dialog select,dialog textarea{outline-color:var(--brand-orange)}
.check-label input{accent-color:var(--brand-orange)}
#toast{background:#302116;color:#fff3e4;border:1px solid #754b2b}
@media(max-width:760px){.featured h2,.dark .featured h2{font-size:27px}.sidebar-expanded .sidebar-scrim{background:#17110c55}}

/* Real app icons and a generous card hit area. */
.site-favicon{width:24px;height:24px;display:inline-grid;place-items:center;flex:none;vertical-align:middle;line-height:1;position:relative}
.site-favicon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px;pointer-events:none}
.favicon-fallback{font-size:11px;font-weight:700;line-height:1;color:var(--muted)}
.favicon-loaded .favicon-fallback{display:none}
.card-title:after{content:'';position:absolute;inset:0;z-index:1;border-radius:14px;cursor:pointer}
.card-top .app-icon,.card .star,.card .card-pin,.card-footer>button,.card details,.card .reorder{position:relative;z-index:2}
.card details .menu{z-index:6}
.card-title:focus-visible{outline:none}
.card:has(.card-title:focus-visible){outline:2px solid var(--brand-orange);outline-offset:3px}
.card[draggable=true]{cursor:grab}
.card[draggable=true] .card-title:after{pointer-events:none}
.card .app-icon{width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;flex:none}
.card .app-icon .site-favicon{width:36px;height:36px;display:grid;place-items:center;margin:0}
.card .app-icon .favicon-fallback{font-size:15px}
.card .app-icon .site-favicon img{object-position:center;max-width:100%;max-height:100%;margin:0}
.tab .tab-label{display:flex;align-items:center;gap:8px;min-width:0}
.tab .site-favicon{width:17px;height:17px}
.tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinned-tab .tab-label{justify-content:center;min-height:30px}
.tab .favicon-fallback{font-size:9px}
.tabs{padding:6px 10px;min-height:46px;max-height:46px;border-bottom:1px solid var(--border);gap:6px;align-items:stretch}
.tab{border:1px solid var(--border);border-radius:12px;padding:1px 8px;min-height:33px}
.pinned-tab{padding:1px 5px;border-radius:12px}
#dashboard.subview{padding-top:28px}
.library-actions{display:flex;gap:9px;align-items:center;flex:none}
.library-actions .primary{padding:10px 13px}
@media(max-width:760px){#dashboard.subview{padding-top:22px}.library-actions{gap:6px}.library-actions .primary{font-size:10px;padding:8px}.library-heading{align-items:flex-start}.cards.list .card{grid-template-columns:48px 1fr}}

.powered-link{display:inline-flex;align-items:center;gap:6px;border-radius:6px;color:inherit;text-decoration:none;min-height:32px}
.powered-link:hover{color:var(--accent)}
.powered-link .wordmark{flex:none}
.card-title:is(a){text-decoration:none;font:inherit;font-size:13px;font-weight:700;line-height:20px;color:var(--ink)}
#openBrowserDialog p{margin:14px 0 22px}
.page-zoom-control{display:flex;align-items:center;flex:none}
.page-zoom-control select{height:32px;min-width:69px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--ink);font:inherit;font-size:11px;padding:4px 6px;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#frames iframe{width:calc(100% / var(--app-zoom,1));height:calc(100% / var(--app-zoom,1));transform:scale(var(--app-zoom,1));transform-origin:top left;max-width:none}
.install-preview-icon{display:block;object-fit:contain;margin:16px 0;width:72px;height:72px}
#installDialog p{margin-top:14px}
#installBtn{align-items:center;gap:11px}
#connectionNotice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:20;padding:10px 16px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-size:11px;max-width:calc(100vw - 24px)}
@media(display-mode:standalone){body{overscroll-behavior-y:none}#installBtn{display:none}}
@media(max-width:760px){.page-zoom-control select{min-width:61px;font-size:10px}.addressbar{gap:2px}.addressbar #externalBtn{font-size:10px;padding:7px}.addressbar .icon-button{min-width:26px;width:26px;padding:3px 4px}.addressbar .embed-help{display:none}}

/* Rounded selection and a sidebar order the user controls. */
#nav button[data-view]{border:1px solid transparent;border-radius:999px;box-shadow:none}
#nav button[data-view].active,.dark #nav button[data-view].active{border-color:var(--brand-orange);box-shadow:none}
.workspace-nav-label{display:flex;align-items:center;justify-content:space-between;gap:4px}
.workspace-nav-label>button{padding:2px 4px;color:var(--muted);font-size:17px;border-radius:5px;line-height:1}
.workspace-nav-label>button:hover,.workspace-nav-label>button[aria-pressed=true]{color:var(--accent);background:var(--soft)}
.nav-row{position:relative}
.arranging-nav .nav-row{display:flex;align-items:center;gap:3px;border:1px dashed var(--border);border-radius:12px;margin-bottom:5px;padding:2px;cursor:grab}
.arranging-nav .nav-row>button[data-view]{margin:0;min-width:0;flex:1;padding:9px 7px;gap:7px}
.arranging-nav .nav-text{font-size:11px}
.arranging-nav .nav-count{display:none}
.nav-reorder-controls{display:flex;flex-direction:column;gap:1px;flex:none}
#nav .nav-reorder-controls button{border:0;background:none;color:var(--muted);width:22px;height:21px;padding:0;margin:0;display:grid;place-items:center;font-size:13px;border-radius:4px}
#nav .nav-reorder-controls button:hover{background:var(--soft);color:var(--accent)}
#nav .nav-reorder-controls button:disabled{opacity:.25;cursor:default}
.sidebar-collapsed .nav-reorder-controls{display:none}

/* Brightness is local to the workspace. Native display settings are untouched. */
.brightness-control{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}
.brightness-control label{font-size:17px}
.brightness-control input{width:80px;height:18px;margin:0;cursor:pointer;accent-color:var(--brand-orange)}
.brightness-control output{font-size:10px;min-width:31px;font-variant-numeric:tabular-nums}
.brightness-control button{font-size:17px;padding:2px 4px;border-radius:5px}
.dark .brightness-control{display:none}
.header-right{gap:12px}
#displayBtn,#browserDisplayBtn{font-size:19px}
#brightnessShade{position:fixed;inset:0;pointer-events:none;z-index:9999;background:#000;opacity:var(--workspace-dim,0)}
#dialogBrightness{width:100%;accent-color:var(--brand-orange);margin-top:18px;cursor:pointer}
#displayDialog label{display:flex;flex-direction:row;justify-content:space-between;gap:12px}
#displayDialog output{font-variant-numeric:tabular-nums}
dialog{filter:brightness(calc(1 - var(--workspace-dim,0)))}
.display-defaults{display:flex;gap:10px;margin-top:22px}
@media(max-width:1100px){.local-status{display:none}}
@media(max-width:760px){.brightness-control{display:none}.header-right{gap:5px}.display-defaults{flex-wrap:wrap}}