/* Tiles — encrypted link & password locker. No external fonts or resources are loaded. */
html{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* Design tokens — iOS-style glass. Contrast of every text/fill pair measured >= 4.5:1 (see ui-ux-pro-max checks). */
:root{
  --bg:#f2f2f7; --surface:#ffffff; --sunk:rgba(118,118,128,.12); --ink:#1c1c1e; --muted:#6c6c70; --line:rgba(60,60,67,.16);
  --glass:rgba(255,255,255,.70); --glass-strong:rgba(255,255,255,.86); --glass-edge:rgba(255,255,255,.65);
  --accent:#0066d6; --accent-text:#0066d6; --accent-ink:#ffffff; --accent-soft:#e1ecfb; --danger:#d70015; --danger-fill:#d70015;
  --ambient-a:rgba(0,122,255,.13); --ambient-b:rgba(255,45,85,.08); --ambient-c:rgba(52,199,89,.10);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.07);
  --shadow-lg:0 2px 6px rgba(0,0,0,.06),0 24px 60px rgba(0,0,0,.16);
  --blur:saturate(180%) blur(22px);
  --ease:cubic-bezier(.32,.72,0,1);
  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --surface:#1c1c1e; --sunk:rgba(118,118,128,.24); --ink:#f2f2f7; --muted:#aeaeb2; --line:rgba(84,84,88,.55);
  --glass:rgba(28,28,30,.70); --glass-strong:rgba(36,36,38,.86); --glass-edge:rgba(255,255,255,.10);
  --accent:#0a6cff; --accent-text:#5aa7ff; --accent-ink:#ffffff; --accent-soft:#14243c; --danger:#ff6961; --danger-fill:#d70015;
  --ambient-a:rgba(10,132,255,.22); --ambient-b:rgba(255,55,95,.12); --ambient-c:rgba(48,209,88,.12);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1c1c1e; --sunk:rgba(118,118,128,.24); --ink:#f2f2f7; --muted:#aeaeb2; --line:rgba(84,84,88,.55);
  --glass:rgba(28,28,30,.70); --glass-strong:rgba(36,36,38,.86); --glass-edge:rgba(255,255,255,.10);
  --accent:#0a6cff; --accent-text:#5aa7ff; --accent-ink:#ffffff; --accent-soft:#14243c; --danger:#ff6961; --danger-fill:#d70015;
  --ambient-a:rgba(10,132,255,.22); --ambient-b:rgba(255,55,95,.12); --ambient-c:rgba(48,209,88,.12);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:20px 48px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px}
@media (max-width:760px){.app{grid-template-columns:minmax(0,1fr);gap:16px;padding-inline:16px}}

/* rail */
.brand{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;margin:2px 0 18px}
.brand .logo{flex:none;transform:rotate(-6deg);transition:transform .25s ease}
.brand:hover .logo{transform:rotate(4deg) scale(1.06)}
@media (prefers-reduced-motion:reduce){.brand .logo{transition:none}}
.rail-label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;margin:0 0 8px}
.folders{display:flex;flex-direction:column;gap:2px}
.folder{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:10px;color:var(--ink);font-size:15.5px}
.folder svg{width:18px;height:18px}
.folder .count{font-size:13px}
.folder:hover{background:var(--sunk)}
.folder[aria-current="true"]{background:var(--surface);box-shadow:var(--shadow);font-weight:600}
.folder .count{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.folder svg{flex:none;color:var(--muted)}
.folder[aria-current="true"] svg{color:var(--accent)}
.new-folder{margin-top:10px;border:1px dashed var(--line);background:none;border-radius:10px;padding:9px 12px;font-size:15px;width:100%;text-align:left;color:var(--muted)}
.new-folder:hover{color:var(--ink);border-color:var(--muted)}
.store-note{margin-top:18px;font-size:12px;color:var(--muted)}
@media (max-width:760px){
  .brand{margin-bottom:10px}
  .rail-label,.store-note{display:none}
  .folders{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .folder{width:auto;white-space:nowrap;background:var(--surface);border:1px solid var(--line)}
  .folder[aria-current="true"]{border-color:var(--accent)}
  .folder .count{margin-left:4px}
  .rail-row{display:flex;gap:6px;align-items:flex-start}
  .rail-row .folders{flex:1;min-width:0}
  .new-folder{margin-top:0;width:auto;white-space:nowrap}
}

/* collapsible sidebar */
.brand-name{flex:1;min-width:0}
.rail-toggle{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;background:none;border-radius:8px;color:var(--muted)}
.rail-toggle:hover{background:var(--sunk);color:var(--ink)}
.rail-toggle .arrow{transition:transform .2s ease;transform-origin:15px 12px}
.app{transition:grid-template-columns .2s ease}
.app.rail-closed{grid-template-columns:64px minmax(0,1fr)}
.app.rail-closed .brand{flex-direction:column;gap:12px;align-items:center}
.app.rail-closed .brand-name,.app.rail-closed .rail-label,.app.rail-closed .fname,.app.rail-closed .folder .count,.app.rail-closed .store-note{display:none}
.app.rail-closed .rail-toggle .arrow{transform:scaleX(-1)}
.app.rail-closed .folder{justify-content:center;padding:10px 0}
.app.rail-closed .new-folder{text-align:center;padding:9px 0;font-size:18px}
@media (max-width:760px){
  .app.rail-closed{grid-template-columns:minmax(0,1fr)}
  .app.rail-closed .brand{flex-direction:row}
  .app.rail-closed .brand-name{display:block}
  .app.rail-closed .rail-row{display:none}
}
@media (prefers-reduced-motion:reduce){.app,.rail-toggle .arrow{transition:none}}

/* main */
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.head h1{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:-.02em;margin:0;text-wrap:balance;min-width:0;overflow-wrap:anywhere}
.head .spacer{flex:1}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 10px;height:38px;min-width:0;flex:0 1 240px}
.search input{border:0;background:none;outline:none;width:100%;min-width:0}
.search svg{color:var(--muted);flex:none}
.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:600}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--sunk)}
.btn.danger{color:var(--danger)}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:9px;border:0;background:none;color:var(--muted)}
.icon-btn:hover{background:var(--sunk);color:var(--ink)}

.group{margin-bottom:30px}
.group h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;margin:0 0 12px;display:flex;gap:8px;align-items:center}
.group h2 span{font-variant-numeric:tabular-nums;color:var(--muted);opacity:.7}
.group-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 8px 4px 4px;margin-left:-4px;border-radius:7px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.group-toggle:hover{background:var(--sunk);color:var(--ink)}
.group-toggle .chev{transition:transform .15s ease}
.group-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.group-toggle .chev{transition:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 10px}
@media (max-width:420px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px}}

.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink);border:0;background:none;padding:6px 2px;border-radius:14px;min-width:0}
.tile:hover .face{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,30,45,.1),0 10px 24px rgba(20,30,45,.12)}
.face{position:relative;width:68px;height:68px;border-radius:19px;display:grid;place-items:center;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
@media (max-width:420px){.face{width:58px;height:58px;border-radius:16px}}
.face img{width:100%;height:100%;object-fit:cover}
.face .mono{font-family:var(--f-display);font-weight:700;font-size:26px;color:#fff;width:100%;height:100%;display:grid;place-items:center}
.badge{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;border:2px solid var(--bg)}
.face-wrap{position:relative}
.label{font-size:13px;font-weight:500;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-hit{display:block;border:0;background:none;padding:0;line-height:0;border-radius:19px;color:inherit;text-decoration:none}
.label.editable{padding:1px 6px;border-radius:6px;cursor:pointer;border:0;background:none;color:var(--ink)}
.tile .face{transition:transform .15s ease,box-shadow .15s ease}
.tile:hover .face{transform:none}
.icon-hit:hover .face{transform:translateY(-2px)}
.label.editable:hover{background:var(--sunk);text-decoration:underline;text-underline-offset:2px}
.sub{font-size:11px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-6px}
.edit-dot{position:absolute;top:0;right:8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;opacity:0;transition:opacity .12s}
.tile:hover .edit-dot,.tile:focus-within .edit-dot{opacity:1}
@media (hover:none){.edit-dot{opacity:1;width:22px;height:22px;right:4px}}
.add-tile .face{background:none;box-shadow:none;border:1.5px dashed var(--line);color:var(--muted)}
.add-tile:hover .face{border-color:var(--accent);color:var(--accent);box-shadow:none}

/* note tiles look like paper */
.face.note{background:var(--accent-soft);place-items:start;padding:9px 9px;font-size:9.5px;line-height:1.3;color:var(--ink);text-align:left;overflow:hidden}
.face.note p{margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

.empty{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;max-width:560px}
.empty h2{font-family:var(--f-display);font-size:20px;margin:0 0 6px}
.empty p{color:var(--muted);margin:0 0 16px;max-width:52ch}
.empty .row{display:flex;gap:8px;flex-wrap:wrap}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.45);display:grid;place-items:center;padding:16px;z-index:10}
.modal{background:var(--surface);border-radius:18px;width:min(460px,100%);max-height:calc(100% - 32px);overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h3{font-family:var(--f-display);font-size:21px;margin:0 0 16px;letter-spacing:-.01em;overflow-wrap:anywhere}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--sunk);border-radius:10px;padding:3px;margin-bottom:16px}
.tabs button{border:0;background:none;padding:7px;border-radius:8px;font-weight:600;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:12px;font-weight:600;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;outline:none;min-width:0;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field textarea{min-height:130px;resize:vertical}
.mono-in{font-family:var(--f-mono);font-size:13.5px}
.logo-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.logo-row .face{width:60px;height:60px;border-radius:17px;flex:none}
.logo-row .acts{display:flex;gap:6px;flex-wrap:wrap}
.swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.swatches button{width:22px;height:22px;border-radius:50%;border:2px solid transparent}
.swatches button[aria-pressed="true"]{border-color:var(--ink)}
.foot{display:flex;gap:8px;align-items:center;margin-top:18px;flex-wrap:wrap}
.foot .spacer{flex:1}
.err{color:var(--danger);font-size:13px;margin:4px 0 0}
.view-row{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 6px 6px 12px;margin-bottom:10px}
.view-row .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;width:72px;flex:none}
.view-row .v{flex:1;min-width:0;overflow-wrap:anywhere}
.view-row .v.pw{font-family:var(--f-mono);font-size:14px}
.note-body{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;max-height:50vh;overflow:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;z-index:20}
.confirm{background:var(--sunk);border-radius:10px;padding:12px;margin-top:12px;font-size:14px}
.confirm .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.face,.edit-dot{transition:none}}

/* roomier spacing */
.app{gap:48px;padding-block:32px 64px;padding-inline:28px}
.app.rail-closed{grid-template-columns:64px minmax(0,1fr)}
.brand{margin-bottom:28px}
.rail-label{margin-bottom:12px}
.folders{gap:6px}
.new-folder{margin-top:16px}
.head{gap:14px;margin-bottom:36px}
.group{margin-bottom:48px}
.group h2{margin-bottom:20px}
.grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:32px 20px}
.tile{gap:10px;padding:8px 4px}
.face{width:76px;height:76px;border-radius:22px}
.icon-hit{border-radius:22px}
.modal{padding:30px;width:min(500px,100%)}
.modal h3{margin-bottom:22px}
.field{margin-bottom:18px;gap:7px}
.field input,.field textarea,.field select{padding:11px 13px}
.logo-row{margin-bottom:22px;gap:18px}
.foot{margin-top:26px}
.view-row{margin-bottom:12px;padding:9px 8px 9px 14px}
@media (max-width:760px){
  .app{gap:24px;padding-inline:16px;padding-block:20px 48px}
  .app.rail-closed{grid-template-columns:minmax(0,1fr)}
  .brand{margin-bottom:14px}
  .head{margin-bottom:26px}
  .group{margin-bottom:36px}
}
@media (max-width:420px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 10px}
  .face{width:66px;height:66px;border-radius:19px}
  .modal{padding:22px}
}

/* rail actions (settings / lock) */
.brand-actions{display:flex;gap:2px}
.app.rail-closed .brand-actions{flex-direction:column}

/* lock screen */
.lock{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.lock-card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);width:min(420px,100%);padding:30px}
.lock-card .brand{margin-bottom:18px}
.lock-card h1{font-family:var(--f-display);font-size:22px;margin:0 0 6px;letter-spacing:-.01em}
.lock-card p.lead{color:var(--muted);margin:0 0 20px;font-size:14px}
.lock-card .btn{width:100%;justify-content:center}
.lock-card .links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px}
.linkish{border:0;background:none;padding:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:2px}
.linkish:hover{color:var(--ink)}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);margin:4px 0 18px}
.check input{margin-top:3px;accent-color:var(--accent)}
.meter{height:5px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:2px}
.meter i{display:block;height:100%;width:0;background:var(--danger);transition:width .2s}
.meter i.ok{background:var(--accent)} .meter i.good{background:#2f8a4c}
.hint{font-size:12px;color:var(--muted);margin:0}
.settings-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.settings-row:first-of-type{border-top:0}
.settings-row .t{flex:1;min-width:0}
.settings-row .t b{display:block;font-weight:600}
.settings-row .t span{font-size:13px;color:var(--muted)}
.settings-row select{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.btn.danger-solid{background:var(--danger);border-color:var(--danger);color:#fff}
@media (max-width:760px){.new-folder{margin-top:0}}

/* select mode (pencil next to the folder name) */
.head .pen-toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.pick-bar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:2px;max-width:calc(100vw - 24px);background:var(--ink);color:var(--bg);border-radius:999px;padding:5px;box-shadow:0 8px 28px rgba(10,14,20,.28)}
.pick-count{padding:0 10px 0 12px;font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.pick-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit}
.pick-btn:hover:not(:disabled){background:color-mix(in srgb,currentColor 16%,transparent)}
.pick-btn.danger:hover:not(:disabled){color:#ff8a80}
.pick-btn:disabled{opacity:.35;cursor:not-allowed}
.pick-sep{width:1px;height:20px;background:currentColor;opacity:.2;margin:0 3px}
body.picking main{padding-bottom:80px}
body.picking .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
.tile.pick{width:100%;cursor:pointer}
.tile.pick .tick{position:absolute;top:-7px;left:-7px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--muted);display:grid;place-items:center;color:var(--accent-ink);box-shadow:var(--shadow);z-index:1}
.tile.pick[aria-pressed="true"] .tick{background:var(--accent);border-color:var(--accent)}
.tile.pick[aria-pressed="true"] .face{outline:3px solid var(--accent);outline-offset:3px}
.tile.pick:hover .face{transform:none}
.move-list{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto}
.move-list .folder[aria-current="true"]{opacity:.6}

/* folder icon picker */
.field-label{font-size:12px;font-weight:600;color:var(--muted)}
.icon-pick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.icon-pick button{height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--muted)}
.icon-pick button:hover{color:var(--ink);border-color:var(--muted)}
.icon-pick button[aria-checked="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}


/* =====================================================================
   iOS glass theme (ui-ux-pro-max: Glassmorphism + Minimalism, iOS rules)
   ===================================================================== */
body{font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* soft ambient colour behind the glass, fixed so it doesn't scroll */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(55vmax 55vmax at -5% -10%,var(--ambient-a),transparent 60%),
  radial-gradient(45vmax 45vmax at 105% 5%,var(--ambient-b),transparent 60%),
  radial-gradient(55vmax 55vmax at 50% 115%,var(--ambient-c),transparent 60%)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
.glass,aside,.head,.modal,.pick-bar,.toast,.lock-card,.empty{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* sidebar: one floating glass panel on desktop */
@media (min-width:761px){
  aside{position:sticky;top:20px;align-self:start;background:var(--glass);border:.5px solid var(--glass-edge);border-radius:22px;padding:16px 12px;box-shadow:var(--shadow);max-height:calc(100vh - 40px);overflow:auto}
  .brand{padding:0 4px}
  .rail-label{padding:0 8px}
}
.brand{font-size:21px;font-weight:700;letter-spacing:-.02em}
.rail-label{font-size:12px;letter-spacing:.04em;font-weight:600}
.store-note{padding:0 8px}
.rail-toggle,.icon-btn{width:40px;height:40px;border-radius:12px;color:var(--accent-text)}
.rail-toggle:hover,.icon-btn:hover{background:var(--sunk);color:var(--accent-text)}
.folder{border-radius:12px;min-height:44px;padding:10px 12px;font-size:16px;transition:background-color .15s}
.folder:hover{background:var(--sunk)}
.folder[aria-current="true"]{background:var(--accent-soft);color:var(--accent-text);box-shadow:none;font-weight:600}
.folder[aria-current="true"] svg{color:var(--accent-text)}
.folder[aria-current="true"] .count{color:var(--accent-text)}
.new-folder{border:0;background:none;color:var(--accent-text);font-weight:500;border-radius:12px;min-height:44px}
.new-folder:hover{background:var(--sunk);color:var(--accent-text)}
@media (max-width:760px){
  .folder{background:var(--glass);border:.5px solid var(--glass-edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:999px;min-height:40px;padding:8px 14px;font-size:15px}
  .folder[aria-current="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
  .folder[aria-current="true"] svg,.folder[aria-current="true"] .count{color:var(--accent-ink)}
  .new-folder{background:var(--sunk);border-radius:999px;min-height:40px;padding:8px 14px}
}

/* header: sticky glass bar (like an iOS navigation bar) */
.head{position:sticky;top:12px;z-index:4;background:var(--glass);border:.5px solid var(--glass-edge);border-radius:20px;padding:10px 10px 10px 18px;box-shadow:var(--shadow);margin-bottom:28px}
.head h1{font-family:var(--f-display);font-size:28px;font-weight:700;letter-spacing:-.025em}
.head .pen-toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.search{background:var(--sunk);border:0;border-radius:12px;height:40px;padding:0 12px}
.search svg{color:var(--muted)}
.search input::placeholder{color:var(--muted);opacity:1}
@media (max-width:760px){.head{top:8px;padding:10px 10px 10px 14px;margin-bottom:22px}.head h1{font-size:24px}.search{flex:1 1 100%;order:3}}

/* buttons: iOS filled / tinted / plain */
.btn{height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--sunk);font-weight:600;transition:transform .12s var(--ease),opacity .12s,background-color .15s}
.btn:hover{border:0;filter:none;background:color-mix(in srgb,var(--sunk) 100%,var(--ink) 6%)}
.btn:active{transform:scale(.97);opacity:.85}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent);filter:brightness(1.08)}
.btn.ghost{background:none;color:var(--accent-text)}
.btn.ghost:hover{background:var(--sunk);color:var(--accent-text)}
.btn.danger,.btn.ghost.danger{color:var(--danger)}
.btn.danger-solid{background:var(--danger-fill);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* tiles: app-icon look */
.grid{gap:30px 16px}
.face{border-radius:22.5%;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px rgba(0,0,0,.10);background:var(--surface)}
.icon-hit{border-radius:22.5%}
.icon-hit,.tile.pick,.add-tile{transition:transform .14s var(--ease)}
.icon-hit:active,.tile.pick:active,.add-tile:active{transform:scale(.92)}
.icon-hit:hover .face,.tile:hover .face{transform:none}
.label{font-size:13px;font-weight:500;letter-spacing:-.005em}
.label.editable:hover{background:var(--sunk);text-decoration:none}
.add-tile .face{background:var(--sunk);border:0;box-shadow:none;color:var(--accent-text)}
.add-tile:hover .face{border:0;color:var(--accent-text)}
.edit-dot{background:var(--glass-strong);border:.5px solid var(--glass-edge);color:var(--accent-text);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow)}
.face.note{background:#fff7d6;color:#3a3220}
.badge{background:var(--ink);color:var(--bg);border-color:var(--bg)}
.group h2{font-size:13px;letter-spacing:.04em}
.group-toggle{min-height:32px}
.tile.pick .tick{border-color:var(--muted)}
.tile.pick[aria-pressed="true"] .tick{background:var(--accent);border-color:var(--accent)}
.tile.pick[aria-pressed="true"] .face{outline-color:var(--accent-text)}
.empty{background:var(--glass);border:.5px solid var(--glass-edge);border-radius:22px;box-shadow:var(--shadow)}

/* sheets & dialogs */
.scrim{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s ease}
.modal{background:var(--glass-strong);border:.5px solid var(--glass-edge);border-radius:24px;box-shadow:var(--shadow-lg);animation:pop .28s var(--ease)}
.modal h3{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.field label,.field-label{font-size:13px;font-weight:500;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--sunk);border:0;border-radius:12px;padding:12px 14px;min-height:44px;font-size:16px}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent-text);outline-offset:0}
.view-row{background:var(--sunk);border:0;border-radius:12px}
.note-body{background:var(--sunk);border:0;border-radius:14px}
.confirm{background:var(--sunk);border-radius:14px}
.settings-row{border-top:.5px solid var(--line)}
.icon-pick button{background:var(--sunk);border:0;border-radius:12px;color:var(--ink)}
.icon-pick button:hover{background:color-mix(in srgb,var(--sunk) 100%,var(--ink) 6%);color:var(--ink)}
.icon-pick button[aria-checked="true"]{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 0 0 2px var(--accent-text)}
.swatches button{width:28px;height:28px}
@media (max-width:600px){
  /* iOS bottom sheet */
  .scrim{place-items:end center;padding:0}
  .modal{width:100%;max-height:92vh;border-radius:22px 22px 0 0;padding:26px 20px calc(20px + env(safe-area-inset-bottom,0px));animation:sheet .32s var(--ease);border-bottom:0}
  .modal::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--line);margin:-14px auto 14px}
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
@keyframes sheet{from{transform:translateY(100%)}}

/* floating pill + toast */
.pick-bar{background:var(--glass-strong);color:var(--ink);border:.5px solid var(--glass-edge);box-shadow:var(--shadow-lg)}
.pick-btn{width:44px;height:44px;color:var(--accent-text)}
.pick-btn.danger{color:var(--danger)}
.pick-btn.danger:hover:not(:disabled){color:var(--danger)}
.pick-sep{background:var(--line);opacity:1}
.toast{background:rgba(28,28,30,.82);color:#fff;border:.5px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg)}

/* lock screen */
.lock{background:transparent}
.lock-card{background:var(--glass);border:.5px solid var(--glass-edge);border-radius:28px;box-shadow:var(--shadow-lg)}
.lock-card h1{font-size:28px;font-weight:700;letter-spacing:-.025em}
.lock-card p.lead{font-size:15px}
.linkish{color:var(--accent-text);text-decoration:none;font-size:14px;min-height:44px}
.linkish:hover{color:var(--accent-text);text-decoration:underline}
.meter{background:var(--sunk);height:4px}
.meter i.ok{background:#ff9f0a} .meter i.good{background:#34c759}

/* mouse: compact brand-row buttons so they fit beside the name (WCAG 2.5.8 min is 24px) */
@media (pointer:fine){.brand .rail-toggle{width:34px;height:34px;border-radius:10px}}
.brand{gap:8px}.brand-actions{gap:0}
/* touch devices: 44pt targets everywhere (iOS HIG) */
@media (pointer:coarse){
  .rail-toggle,.icon-btn,.brand .rail-toggle{width:44px;height:44px}
  .folder,.new-folder{min-height:44px}
  .search{height:44px}.search input{height:100%}
  .group-toggle{min-height:44px}
  /* tile name: 44pt tall hit area, same look (padding grows the target, negative margin keeps layout) */
  .label.editable{padding:12px 8px;margin:-10px 0 -12px}
  /* small edit dot: invisible 44pt hit area around the 30px circle */
  .edit-dot{width:30px;height:30px}
  .edit-dot::after{content:"";position:absolute;inset:-7px}
}

/* accessibility fallbacks */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  aside,.head,.modal,.pick-bar,.lock-card,.empty,.edit-dot{background:var(--surface)}
}
@media (prefers-reduced-transparency:reduce){
  body::before{display:none}
  aside,.head,.modal,.pick-bar,.lock-card,.empty,.edit-dot,.folder{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){:root{--line:rgba(60,60,67,.45);--muted:#3a3a3c}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .icon-hit:active,.tile.pick:active,.add-tile:active,.btn:active{transform:none}
}

/* ---------- iOS navigation: nav row + large title + search (replaces the header card) ---------- */
.nav-row{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:flex-end;gap:4px;min-height:52px;
  margin:0 -12px;padding:4px 8px;border-radius:0 0 18px 18px;border:.5px solid transparent;border-top:0;
  transition:background-color .2s,border-color .2s,box-shadow .2s}
.nav-row.scrolled{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-edge);box-shadow:0 .5px 0 var(--line)}
.nav-title{position:absolute;left:50%;transform:translateX(-50%);max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:17px;font-weight:600;letter-spacing:-.02em;opacity:0;transition:opacity .2s;pointer-events:none}
.nav-row.scrolled .nav-title{opacity:1}
.nav-btn{min-width:44px;height:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--accent-text);font-size:17px;font-weight:400;display:inline-grid;place-items:center;transition:opacity .12s}
.nav-btn:hover{background:var(--sunk)}
.nav-btn:active{opacity:.5}
.nav-btn.pen-toggle[aria-pressed="true"]{font-weight:600}
.nav-btn.nav-icon{padding:0;width:44px}
.large-title{font-family:var(--f-display);font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.03em;margin:2px 0 12px;overflow-wrap:anywhere}
.search{display:flex;width:100%;height:40px;margin-bottom:28px;background:var(--sunk);border:0;border-radius:12px;padding:0 12px;gap:8px}
.search input{font-size:17px}
@media (max-width:760px){.nav-row{margin:0 -8px}.large-title{font-size:32px}.search{margin-bottom:22px}}
@media (pointer:coarse){.search{height:44px}}
@media (prefers-reduced-transparency:reduce){.nav-row.scrolled{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* title row: Select / + share the line with the large title (no empty bar above it);
   sidebar top lines up with the title */
.nav-row{margin-bottom:-52px}
.large-title{min-height:52px;display:flex;align-items:center;margin:0 0 12px;padding-right:120px}
@media (min-width:761px){aside{top:32px}}
@media (max-width:760px){.large-title{padding-right:104px}}