@font-face {
  font-family: "Shantell";
  src: url("fonts/shantell-sans.woff2") format("woff2-variations");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+20B9, U+2318;
}

/* ---------- tokens: a notebook page in daylight, a chalkboard at night ---------- */
:root {
  --paper: #fbf9f4;
  --paper-2: #f2eee3;
  --card: #fffdf8;
  --ink: #24263a;          /* ballpoint */
  --ink-2: #5c5f71;
  --ink-3: #9a9bab;
  --rule: rgb(36 38 58 / 16%);
  --dot: rgb(36 38 58 / 13%);
  --hi: #ffd84d;           /* highlighter */
  --hi-soft: rgb(255 216 77 / 55%);
  --marigold: #f2a71b;
  --peacock: #127a85;
  --peacock-soft: #d6eef0;
  --cheek: #ff9fb0;
  --danger: #d23c33;
  --on-ink: #fbf9f4;
  --shadow: 3px 3px 0 var(--ink);
  --shadow-lg: 5px 5px 0 var(--ink);
  --r: 255px 14px 225px 14px / 14px 225px 14px 255px;   /* wobbly hand-drawn box */
  --r2: 14px 225px 14px 255px / 225px 14px 255px 14px;
  --r-sm: 22px 6px 18px 8px / 8px 18px 6px 22px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Shantell", "Comic Neue", "Segoe Print", "Chalkboard SE", system-ui, "Noto Sans Devanagari", sans-serif;
  --wide: 1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1d2723; --paper-2: #26322d; --card: #223029;
    --ink: #f1efe4; --ink-2: #bcc4ba; --ink-3: #7f8c85;
    --rule: rgb(241 239 228 / 18%); --dot: rgb(241 239 228 / 9%);
    --hi: #ffe680; --hi-soft: rgb(255 230 128 / 26%);
    --marigold: #f7bd45; --peacock: #82d6df; --peacock-soft: #2b4a49; --cheek: #f59aa8;
    --danger: #ff8f84; --on-ink: #1d2723;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.5px);
  background-size: 24px 24px;
  color: var(--ink); font: 400 16.5px/1.5 var(--font); font-variation-settings: "BNCE" 0;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2.5px dashed var(--peacock); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
svg { flex: none; display: block; overflow: visible; }
.defs { position: absolute; width: 0; height: 0; }
kbd { font: 600 12px var(--font); color: var(--ink-3); border: 1.5px solid var(--rule); border-radius: var(--r-sm); padding: 1px 7px; }

/* hand-drawn icons wobble a little; they "boil" when you point at them */
.ic { filter: url(#rough); }
:is(button, a, [role="button"]):hover > .ic, :is(button, a):hover .ic { filter: url(#boil); }

/* the sketchy box used everywhere */
.sketch { border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); }

/* ---------- the cloud mascot ---------- */
.mascot { width: 96px; height: 70px; }
.mascot .c-body { fill: var(--card); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; filter: url(#rough); }
.mascot .c-eyes { fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
.mascot .c-smile, .mascot .c-frown { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.mascot .c-frown { opacity: 0; }
.mascot .c-cheek { fill: var(--cheek); opacity: .7; }
.mascot.sad .c-smile { opacity: 0; } .mascot.sad .c-frown { opacity: 1; } .mascot.sad .c-cheek { opacity: 0; }
.mascot.bob { animation: bob 2.2s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }

/* ---------- gates: setup and sign in ---------- */
.boot { min-height: 100vh; }
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.gate-inner { width: min(390px, 100%); }
.gate .mascot { margin: 0 0 10px -6px; }
.gate h1 { margin: 0 0 4px; font-size: 40px; line-height: 1.1; font-weight: 700; }
.gate p { margin: 0 0 26px; color: var(--ink-2); }
.gate .fine { margin-top: 20px; font-size: 14px; }
.pw { position: relative; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
.pw:focus-within { box-shadow: var(--shadow-lg); transform: translate(-1px, -1px); }
.pw input { width: 100%; height: 58px; padding: 0 64px 0 20px; border: 0; background: none; font-size: 18px; }
.pw input:focus { outline: none; }
.pw input::placeholder { color: var(--ink-3); }
.pw-go { position: absolute; right: 7px; top: 7px; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: var(--r2); background: var(--marigold); color: #24263a; display: grid; place-items: center; transition: transform .2s var(--spring); }
.pw-go:hover { transform: rotate(-6deg) scale(1.05); }
.pw-go:active { transform: scale(.88); }
.pw-go:disabled { opacity: .6; }
.err { min-height: 24px; margin-top: 14px; color: var(--danger); font-size: 15.5px; font-weight: 600; }
.shake { animation: shake .45s var(--ease); }
@keyframes shake { 15%, 55% { transform: translateX(-8px) rotate(-1deg); } 35%, 75% { transform: translateX(8px) rotate(1deg); } }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.setup-list li { padding: 9px 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); font: 600 15px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.setup-list li:nth-child(even) { border-radius: var(--r2); }

/* ---------- header ---------- */
.head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 68px; padding: 0 max(20px, calc((100vw - var(--wide)) / 2)); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px dashed transparent; transition: border-color .2s; }
.head.scrolled { border-bottom-color: var(--rule); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; text-decoration: none; white-space: nowrap; }
.brand-cloud { width: 40px; height: 30px; }
.brand:hover .brand-cloud { animation: bob 1s ease-in-out infinite; }
.search-trigger { flex: 1; max-width: 440px; margin: 0 auto; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; color: var(--ink-3); text-align: left; transition: transform .2s var(--spring), box-shadow .15s; }
.search-trigger:hover { box-shadow: var(--shadow); transform: translate(-1px, -1px) rotate(-.4deg); color: var(--ink-2); }
.search-trigger .label { flex: 1; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.btn-new { height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px 0 13px; border: 2px solid var(--ink); border-radius: var(--r2); background: var(--marigold); color: #24263a; font-weight: 700; font-size: 17px; box-shadow: var(--shadow); transition: transform .2s var(--spring), box-shadow .15s; }
.btn-new:hover { transform: translate(-1px, -2px) rotate(-2deg); box-shadow: var(--shadow-lg); }
.btn-new:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); transition-duration: .05s; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 2px solid transparent; transition: transform .2s var(--spring), border-color .15s; }
.avatar:hover { border-color: var(--ink); transform: rotate(8deg); }

/* ---------- page ---------- */
.page { max-width: var(--wide); margin: 0 auto; padding: 8px 20px 150px; }
.crumbs { display: flex; align-items: center; gap: 2px; min-height: 28px; margin-left: -6px; overflow-x: auto; scrollbar-width: none; }
.crumbs button { padding: 2px 6px; color: var(--ink-2); font-size: 16px; white-space: nowrap; text-decoration: underline transparent wavy 1.5px; text-underline-offset: 5px; transition: text-decoration-color .15s, color .15s; }
.crumbs button:hover { color: var(--ink); text-decoration-color: var(--marigold); }
.crumbs .sep { color: var(--ink-3); }
.crumbs .drop-target { color: var(--ink); background: var(--hi-soft); border-radius: var(--r-sm); }
.titlebar { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; min-height: 52px; }
.title { flex: 1; margin: 0; font-size: 36px; line-height: 1.15; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bouncy { font-variation-settings: "BNCE" 0; }
.boing { animation: boing .9s var(--ease); }
@keyframes boing { 0% { font-variation-settings: "BNCE" 0; } 35% { font-variation-settings: "BNCE" 100; } 70% { font-variation-settings: "BNCE" 30; } 100% { font-variation-settings: "BNCE" 0; } }
.view-tools { display: flex; align-items: center; gap: 8px; }
.chip { height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 2px solid transparent; border-radius: var(--r); color: var(--ink-2); font-size: 15.5px; white-space: nowrap; transition: border-color .15s, transform .2s var(--spring); }
.chip:hover { border-color: var(--ink); color: var(--ink); transform: rotate(-1.5deg); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); }
.seg button { width: 36px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-3); transition: background .15s, color .15s, transform .2s var(--spring); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--hi); color: #24263a; transform: rotate(-3deg); }

.section-label { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 12px; font-size: 17px; font-weight: 700; }
.section-label:first-child { margin-top: 0; }
.section-label > span { background: linear-gradient(100deg, transparent 2%, var(--hi-soft) 4%, var(--hi-soft) 96%, transparent 98%) 0 85% / 100% 45% no-repeat; padding: 0 4px; }
.section-label a { font-weight: 600; font-size: 15.5px; color: var(--peacock); text-decoration: underline wavy 1.5px; text-underline-offset: 5px; }

/* ---------- recent strip: photos pinned to the page ---------- */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(136px, 1fr); gap: 18px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 12px 6px 14px; margin: -10px -6px 0; }
.card { position: relative; scroll-snap-align: start; padding: 7px 7px 0; background: #fffdf8; color: #24263a; border: 2px solid var(--ink); border-radius: 4px 6px 5px 3px; box-shadow: var(--shadow); text-align: left; transition: transform .25s var(--spring), box-shadow .15s; }
.card:nth-child(odd) { transform: rotate(-2deg); } .card:nth-child(even) { transform: rotate(1.6deg); } .card:nth-child(3n) { transform: rotate(-.8deg); }
.card::before { content: ""; position: absolute; z-index: 1; top: -9px; left: 50%; width: 52px; height: 17px; margin-left: -26px; background: rgb(255 216 77 / 75%); border-left: 2px dotted rgb(0 0 0 / 8%); border-right: 2px dotted rgb(0 0 0 / 8%); transform: rotate(-5deg); }
.card:hover { transform: rotate(0) translateY(-4px) scale(1.03); box-shadow: var(--shadow-lg); }
.card:active { transform: scale(.97); }
.card .ph { aspect-ratio: 1; display: grid; place-items: center; background: #f2eee3; overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .cap { padding: 6px 2px 8px; }
.card .cap b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .cap small { color: #8b8c9b; font-size: 12.5px; }

/* ---------- folders ---------- */
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 14px; }
.folder { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px 0 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); text-align: left; user-select: none; -webkit-user-select: none; transition: transform .25s var(--spring), box-shadow .15s, background .15s; }
.folder:nth-child(even) { border-radius: var(--r2); }
.folder:hover { transform: translate(-1px, -2px); box-shadow: var(--shadow-lg); animation: wiggle .5s ease-in-out; }
.folder:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); animation: none; }
.folder .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder.sel { background: var(--hi); color: #24263a; }
.folder.drop-target { background: var(--hi-soft); transform: scale(1.04) rotate(-1deg); box-shadow: var(--shadow-lg); animation: wiggle .5s ease-in-out infinite; }
.folder.cut, .row.cut, .tile.cut { opacity: .4; filter: grayscale(.6); }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.6deg; } 75% { rotate: 1.4deg; } }

/* doodle folder: the front flap swings open on hover */
.fold { width: 34px; height: 28px; flex: none; }
.fold .back, .fold .front { stroke: #24263a; stroke-width: 2.2; stroke-linejoin: round; }
.fold .back { fill: #d98d0a; }
.fold .front { fill: var(--marigold); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s var(--spring); }
:is(.folder, .row, .hit):hover .fold .front { transform: skewX(-12deg) scaleY(.78); }
.fold { filter: url(#rough); }

/* ---------- files: list ---------- */
.rows { display: grid; }
.row { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px 84px 40px; align-items: center; gap: 0 4px; height: 64px; padding: 0 4px 0 6px; border-bottom: 2px dashed var(--rule); user-select: none; -webkit-user-select: none; }
.row:last-child { border-bottom-color: transparent; }
.row::before { content: ""; position: absolute; z-index: -1; inset: 7px 2px; border-radius: var(--r-sm); background: var(--paper-2); opacity: 0; transition: opacity .12s; }
.row:hover::before { opacity: 1; }
/* selected: a highlighter swipe */
.row.sel::before { opacity: 1; background: var(--hi); transform-origin: left center; transform: skewX(-6deg); animation: swipe .28s var(--ease); }
.row.sel { color: #24263a; }
@media (prefers-color-scheme: dark) { .row.sel { color: var(--ink); } .row.sel::before { background: var(--hi-soft); } .folder.sel { background: var(--hi-soft); color: var(--ink); } }
@keyframes swipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.row .nm { min-width: 0; padding-left: 10px; }
.row .nm span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 16.5px; }
.row .nm small { display: block; color: var(--ink-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { color: var(--ink-2); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta.r { text-align: right; padding-right: 6px; }
.thumb { position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 5px 8px 6px 4px; overflow: hidden; transition: transform .25s var(--spring); }
.row:nth-child(odd) .thumb { rotate: -3deg; } .row:nth-child(even) .thumb { rotate: 2.5deg; }
.row:hover .thumb { transform: rotate(0) scale(1.08); rotate: 0deg; }
.thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.thumb img.ok { opacity: 1; }
.row .thumb:has(.fold) { border: 0; background: none; }
.badge { font: 700 11px var(--font); color: #fff; padding: 3px 6px; border: 1.5px solid #24263a; border-radius: var(--r-sm); transform: rotate(-4deg); }
.more { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: transform .2s var(--spring); }
.more:hover { color: var(--ink); background: var(--paper-2); transform: rotate(90deg); }
.folder .more { position: absolute; right: 8px; top: 50%; margin-top: -19px; background: var(--card); }
.folder.sel .more { background: var(--hi); }
.folder .more, .row .more { opacity: 0; }
.folder:hover .more, .row:hover .more, .folder.sel .more, .row.sel .more, .more:focus-visible { opacity: 1; }

/* round select toggle: a hand-drawn circle that gets ticked */
.pick { position: absolute; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; background: var(--card); border: 2px solid var(--ink); border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%; color: transparent; opacity: 0; transition: opacity .12s, transform .25s var(--spring); }
.row .pick { left: 0; top: 4px; }
.folder .pick { left: -9px; top: -9px; }
.tile .pick { left: 4px; top: 4px; }
.row:hover .pick, .folder:hover .pick, .tile:hover .pick, .selecting .pick { opacity: 1; }
.sel > .pick { opacity: 1; background: var(--peacock); color: #fff; transform: rotate(-8deg) scale(1.1); }
.sel > .pick svg { animation: tick .3s var(--ease); }
@keyframes tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.pick:active { transform: scale(.85); }

/* ---------- files: grid of polaroids ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 26px 20px; padding-top: 10px; }
.tile { position: relative; padding: 9px 9px 0; background: #fffdf8; color: #24263a; border: 2px solid var(--ink); border-radius: 4px 7px 5px 3px; box-shadow: var(--shadow); user-select: none; -webkit-user-select: none; transition: transform .3s var(--spring), box-shadow .15s; }
.tile:nth-child(3n+1) { transform: rotate(-2.2deg); } .tile:nth-child(3n+2) { transform: rotate(1.4deg); } .tile:nth-child(3n) { transform: rotate(-.6deg); }
.tile::before { content: ""; position: absolute; z-index: 1; top: -10px; left: 50%; width: 58px; height: 18px; margin-left: -29px; background: rgb(255 216 77 / 75%); border-left: 2px dotted rgb(0 0 0 / 8%); border-right: 2px dotted rgb(0 0 0 / 8%); transform: rotate(3deg); }
.tile:nth-child(even)::before { transform: rotate(-4deg); background: rgb(127 211 220 / 70%); }
.tile:hover { transform: rotate(0) translateY(-5px) scale(1.03); box-shadow: var(--shadow-lg); z-index: 3; }
.tile:active { transform: scale(.97); }
.tile .ph { aspect-ratio: 1; display: grid; place-items: center; background: #f2eee3; overflow: hidden; }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.tile .ph img.ok { opacity: 1; }
.tile .ph .badge { font-size: 15px; padding: 5px 9px; }
.tile .lb { padding: 7px 2px 9px; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .lb small { display: block; font-weight: 400; color: #8b8c9b; font-size: 12.5px; }
.tile.sel { background: var(--hi); transform: rotate(0) scale(.97); }

/* ---------- uploads in progress: a scribbled, moving progress bar ---------- */
.row.pending .meta.r { color: var(--peacock); font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { position: absolute; left: 66px; right: 50px; bottom: 9px; height: 9px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--card); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--marigold) 0 6px, var(--hi) 6px 12px); background-size: 17px 100%; transition: width .25s linear; animation: march .6s linear infinite; }
@keyframes march { to { background-position: 17px 0; } }
.row.failed .meta.r { color: var(--danger); }
.row.failed .bar i { background: var(--danger); animation: none; }
.row.pending .thumb { animation: bob 1.6s ease-in-out infinite; }

/* deleting: the item crumples into a ball and drops */
.leaving { animation: crumple .42s cubic-bezier(.55, 0, .7, .4) forwards; pointer-events: none; }
@keyframes crumple {
  0% { transform: none; }
  30% { transform: scale(.9, .8) rotate(-4deg); border-radius: 30%; }
  60% { transform: scale(.45) rotate(-25deg); border-radius: 50%; opacity: 1; }
  100% { transform: translate(30px, 80px) scale(.15) rotate(-80deg); border-radius: 50%; opacity: 0; }
}

/* skeleton: pencil lines waiting to be filled */
.skel { display: grid; gap: 14px; padding-top: 6px; }
.skel i { height: 18px; border-radius: var(--r-sm); background: repeating-linear-gradient(90deg, var(--rule) 0 14px, transparent 14px 22px); }
.skel i:nth-child(2) { width: 80%; } .skel i:nth-child(3) { width: 90%; } .skel i:nth-child(4) { width: 60%; }

/* empty */
.empty { padding: 60px 0 40px; text-align: center; }
.empty .mascot { width: 132px; height: 97px; margin: 0 auto 16px; }
.empty h2 { margin: 0 0 6px; font-size: 25px; font-weight: 700; }
.empty p { margin: 0 auto 24px; color: var(--ink-2); max-width: 40ch; }
.note { color: var(--ink-2); font-size: 14.5px; margin: -6px 0 14px; }

/* ---------- buttons, menus, dialogs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 2px solid var(--ink); border-radius: var(--r); font-weight: 700; white-space: nowrap; background: var(--card); box-shadow: var(--shadow); transition: transform .2s var(--spring), box-shadow .15s; }
.btn:hover { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: var(--shadow-lg); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); transition-duration: .05s; }
.btn.primary { background: var(--marigold); color: #24263a; }
.btn.dark { background: var(--marigold); color: #24263a; }
.btn.ghost { border-color: transparent; box-shadow: none; background: none; color: var(--ink-2); }
.btn.ghost:hover { color: var(--ink); text-decoration: underline wavy 1.5px; text-underline-offset: 5px; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.soft-danger { color: var(--danger); border-color: var(--danger); box-shadow: 3px 3px 0 var(--danger); }

.menu { position: fixed; z-index: 60; min-width: 226px; padding: 7px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r2); box-shadow: var(--shadow-lg); transform-origin: top right; }
.menu button { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; text-align: left; font-weight: 500; }
.menu button::before { content: ""; position: absolute; z-index: -1; inset: 3px 0; border-radius: var(--r-sm); background: var(--hi-soft); transform: skewX(-6deg); opacity: 0; }
.menu button:hover::before, .menu button:focus-visible::before { opacity: 1; }
.menu button:focus-visible { outline: none; }
.menu button.danger { color: var(--danger); }
.menu hr { border: 0; border-top: 2px dashed var(--rule); margin: 6px 8px; }
.menu kbd { margin-left: auto; }
.menu .meter { padding: 8px 12px 10px; font-size: 14.5px; color: var(--ink-2); }
.menu .meter b { display: block; color: var(--ink); font-size: 18px; font-weight: 700; }

dialog { border: 2px solid var(--ink); border-radius: var(--r); padding: 26px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); width: min(410px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(29 39 35 / 35%); }
dialog h2 { margin: 0 0 6px; font-size: 23px; font-weight: 700; }
dialog p { margin: 0 0 18px; color: var(--ink-2); }
dialog input[type="text"] { width: 100%; height: 50px; padding: 0 14px; border: 2px solid var(--ink); border-radius: var(--r2); background: var(--paper); margin-bottom: 22px; font-size: 17px; }
dialog input[type="text"]:focus { outline: none; box-shadow: var(--shadow); }
dialog .actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- search palette ---------- */
.palette-wrap { position: fixed; inset: 0; z-index: 55; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgb(29 39 35 / 30%); }
.palette { width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r2); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.palette .q { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 64px; border-bottom: 2px dashed var(--rule); color: var(--ink-2); }
.palette .q input { flex: 1; height: 100%; border: 0; background: none; font-size: 20px; color: var(--ink); }
.palette .q input:focus { outline: none; }
.palette .q input::placeholder { color: var(--ink-3); }
.palette .res { overflow-y: auto; padding: 8px; }
.palette .hit { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; text-align: left; }
.palette .hit::before { content: ""; position: absolute; z-index: -1; inset: 3px 0; border-radius: var(--r-sm); background: var(--hi-soft); transform: skewX(-5deg); opacity: 0; }
.palette .hit.on::before { opacity: 1; }
.palette .hit .thumb { width: 40px; height: 40px; }
.palette .hit .fold { margin: 0 3px; }
.palette .hit b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .hit small { display: block; color: var(--ink-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .hit > div { min-width: 0; flex: 1; }
.palette .hint { padding: 18px; color: var(--ink-3); font-size: 16px; }
.palette .head-l { padding: 8px 12px 4px; color: var(--ink-3); font-size: 13.5px; font-weight: 700; }

/* ---------- selection bar ---------- */
.selbar { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 2px; padding: 6px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; background: var(--ink); color: var(--on-ink); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--marigold); transform: translateX(-50%) rotate(-.6deg); }
.selbar .count { padding: 0 12px 0 10px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.selbar button { height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: var(--r-sm); white-space: nowrap; color: inherit; font-weight: 600; transition: transform .2s var(--spring); }
.selbar button:hover { color: var(--hi); transform: translateY(-2px) rotate(-2deg); }
.selbar button.danger { color: #ffb3ab; }
@media (prefers-color-scheme: dark) { .selbar button.danger { color: #c0392b; } .selbar button:hover { color: #8a5a00; } }
@media (max-width: 900px) { .selbar button span { display: none; } .selbar button { padding: 0 11px; } }

/* ---------- drop zone ---------- */
.dropzone { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: color-mix(in srgb, var(--paper) 78%, transparent); }
.dropzone > div { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 48px; border: 3px dashed var(--ink); border-radius: var(--r); background: var(--hi-soft); color: var(--ink); font-size: 20px; font-weight: 700; transform: rotate(-1.5deg); }
.drop-mascot { width: 120px; height: 88px; animation: bob 1.1s ease-in-out infinite; }

/* ---------- toasts: little speech bubbles ---------- */
.toasts { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 70; display: grid; gap: 12px; justify-items: center; pointer-events: none; }
.toast { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); max-width: calc(100vw - 32px); font-size: 15.5px; font-weight: 500; }
.toast::after { content: ""; position: absolute; left: 28px; bottom: -10px; width: 14px; height: 14px; background: var(--card); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: skewX(25deg) rotate(45deg); }
.toast.error { border-color: var(--danger); box-shadow: 3px 3px 0 var(--danger); }
.toast.error::after { border-color: var(--danger); }
.toast button { color: var(--peacock); font-weight: 700; text-decoration: underline wavy 1.5px; text-underline-offset: 4px; }

/* ---------- upload card ---------- */
.uppill { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 35; width: min(350px, calc(100vw - 24px)); background: var(--card); border: 2px solid var(--ink); border-radius: var(--r2); box-shadow: var(--shadow-lg); overflow: hidden; }
.uppill .top { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 10px; }
.uppill .mascot { width: 52px; height: 38px; }
.uppill .txt { flex: 1; min-width: 0; }
.uppill .txt b { display: block; font-weight: 700; font-size: 16px; }
.uppill .txt small { display: block; color: var(--ink-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppill .total { height: 9px; margin: 0 12px 12px; border: 2px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.uppill .total i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--marigold) 0 6px, var(--hi) 6px 12px); background-size: 17px 100%; transition: width .3s linear; animation: march .6s linear infinite; }
.uppill.done .total i { animation: none; background: var(--peacock); }
.uppill ul { list-style: none; margin: 0; padding: 4px 6px 6px; max-height: 220px; overflow: auto; border-top: 2px dashed var(--rule); }
.uppill li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; font-size: 14.5px; }
.uppill li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppill li span:last-child { color: var(--ink-2); flex: none; font-variant-numeric: tabular-nums; }
.uppill li.failed span:last-child { color: var(--danger); }
.uppill .icb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: transform .2s var(--spring); }
.uppill .icb:hover { color: var(--ink); transform: scale(1.1) rotate(-8deg); }

/* ---------- viewer: the photo is placed on a dark table ---------- */
.viewer { position: fixed; inset: 0; z-index: 50; background: #1b1d27; color: #f4f1e6; display: grid; grid-template-rows: auto 1fr; }
.viewer header { display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 10px 0 20px; }
.viewer header .t { flex: 1; min-width: 0; }
.viewer header .t b { display: block; font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer header .t small { color: #a5a8b8; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vbtn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; display: grid; place-items: center; color: #f4f1e6; text-decoration: none; transition: transform .2s var(--spring), border-color .15s; }
.vbtn:hover { border-color: #f4f1e6; transform: rotate(-8deg); }
.viewer .stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 4px 76px 32px; }
.viewer .stage > img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fffdf8; padding: 10px; border-radius: 3px; box-shadow: 6px 6px 0 rgb(0 0 0 / 35%); }
.viewer .stage > video { max-width: 100%; max-height: 100%; border-radius: 8px; }
.viewer .stage > iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.viewer .stage > pre { width: min(860px, 100%); height: 100%; margin: 0; overflow: auto; padding: 22px; border-radius: 10px; background: #fffdf8; color: #24263a; font: 14px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.viewer .nofile { display: grid; justify-items: center; gap: 18px; text-align: center; color: #d6d6e0; }
.viewer .nofile .badge { font-size: 18px; padding: 8px 12px; }
.viewer .nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border: 2px solid #f4f1e6; border-radius: 50%; display: grid; place-items: center; color: #f4f1e6; transition: transform .2s var(--spring), background .15s; }
.viewer .nav:hover { background: rgb(255 255 255 / 10%); transform: scale(1.1); }
.viewer .nav.l { left: 14px; } .viewer .nav.r { right: 14px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .menu { animation: plop .28s var(--spring); }
  dialog[open] { animation: plop .32s var(--spring); }
  .palette { animation: drop .4s var(--spring); }
  .palette-wrap, .dropzone { animation: fade .15s ease-out; }
  .selbar:not([hidden]) { animation: hop .4s var(--spring); }
  .toast { animation: pop .4s var(--spring); }
  .uppill { animation: hop .45s var(--spring); }
  .viewer { animation: fade .2s ease-out; }
  .viewer .stage > img { animation: place .45s var(--spring); }
  .gate-inner { animation: hop .55s var(--spring); }
  .gate .mascot { animation: bob 2.6s ease-in-out infinite; }
  .empty .mascot { animation: bob 2.6s ease-in-out infinite; }
  .folders > *, .rows > *, .tiles > *, .strip > * { animation: appear .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 30ms); }
  ::view-transition-old(content) { animation: vt-out .16s ease-in both; }
  ::view-transition-new(content) { animation: vt-in .38s var(--spring) both; }
  html.vt-back::view-transition-new(content) { animation-name: vt-in-back; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  :is(button, a, [role="button"]):hover .ic { filter: url(#rough); }
}
.content { view-transition-name: content; }
@keyframes plop { from { opacity: 0; transform: scale(.85) rotate(-3deg); } }
@keyframes drop { from { opacity: 0; transform: translateY(-30px) rotate(-2deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(14px); } }
@keyframes hop { from { opacity: 0; transform: translate(var(--tx, 0), 24px) rotate(var(--rot, 0deg)) scale(.9); } }
@keyframes place { from { opacity: 0; transform: rotate(-6deg) scale(.8); } }
@keyframes appear { from { opacity: 0; translate: 0 10px; scale: .96; } }
.selbar { --tx: -50%; --rot: -.6deg; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(22px) rotate(.4deg); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-22px) rotate(-.4deg); } }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .head { gap: 8px; height: 62px; padding: 0 12px; }
  .brand span:last-child { display: none; }
  .brand-cloud { width: 38px; height: 28px; }
  .search-trigger { height: 42px; }
  .search-trigger kbd { display: none; }
  .btn-new { padding: 0; width: 44px; justify-content: center; }
  .btn-new span { display: none; }
  .page { padding: 4px 14px 150px; }
  .title { font-size: 30px; }
  .titlebar { margin-bottom: 16px; }
  .view-tools .chip span { display: none; }
  .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .folder { height: 58px; padding: 0 4px 0 10px; gap: 8px; }
  .folder .nm { font-size: 16px; }
  .folder .more { display: none; } /* long-press selects; actions live in the bottom bar */
  .folder { padding-right: 10px; }
  .row { grid-template-columns: 56px minmax(0, 1fr) auto 40px; }
  .row .meta.when { display: none; }
  .more { opacity: 1 !important; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .tile .lb small { display: none; }
  .viewer .stage { padding: 0 8px 16px; }
  .viewer .nav { display: none; }
  .uppill { right: 12px; left: 12px; width: auto; }
  .palette-wrap { padding: 8px; }
  .palette { max-height: calc(100dvh - 16px); }
}