/* ---------- PROJECT (APP) ---------- */
  .topbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
  .proj-title{
    flex:1;min-width:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:14px;text-align:left;
  }
  .proj-title:active{background:var(--surface);}
  .proj-title span.name{font-weight:600;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sync-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ink-3);}
  .sync-dot.ok{background:var(--ok);}
  .sync-dot.pending{background:var(--warn);}
  .sync-dot.offline{background:var(--danger);}
  .sync-dot.auth{background:transparent;border:2.5px solid var(--danger);}

  .slate{background:var(--surface);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px;}
  .slate-stripes{height:16px;background:repeating-linear-gradient(115deg,var(--ink) 0 18px,var(--surface) 18px 36px);}
  .slate-body{padding:12px 18px 16px;}
  .slate-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;min-width:0;}
  .slate-meta .roll{font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .slate-meta .roll b{color:var(--ink);font-weight:600;}
  .slate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:12px;}
  .slate-label{font-size:13px;color:var(--ink-3);font-weight:500;display:block;}
  .slate-num{
    font-family:var(--num);font-weight:700;font-size:60px;line-height:.92;letter-spacing:-.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .slate-num.mid{font-size:44px;}
  .slate-num.small{font-size:32px;}
  .take-ring{
    width:78px;height:78px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;
    font-family:var(--num);font-weight:700;font-size:40px;line-height:1;overflow:hidden;
  }
  .take-ring.small{font-size:28px;}
  .slate-others{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -18px 0;padding:0 18px;}
  .slate-others::-webkit-scrollbar{display:none;}
  .other-cam{
    flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;
    background:var(--surface-2);font-size:14px;color:var(--ink-2);white-space:nowrap;
  }
  .other-cam b{color:var(--ink);font-weight:600;}

  .camtabs-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .camtabs{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;}
  .camtabs::-webkit-scrollbar{display:none;}
  .camtab{
    flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;
    background:var(--surface);color:var(--ink-2);font-weight:600;font-size:15px;white-space:nowrap;box-shadow:var(--shadow);
  }
  .camtab.active{background:var(--ink);color:var(--on-ink);}
  .camtab .edit{opacity:.7;}
  .camtab.add{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2);color:var(--ink-2);}
  .undo-btn{
    flex:none;height:44px;padding:0 14px;border-radius:14px;display:inline-flex;align-items:center;gap:6px;
    background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow);
  }
  .undo-btn:disabled{opacity:.4;}

  .toolbar{display:flex;gap:8px;margin-bottom:12px;}
  .search{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:44px;border-radius:14px;background:var(--surface);border:1.5px solid transparent;padding:0 14px;font-size:16px;box-shadow:var(--shadow);}
  .search:focus{border-color:var(--ink);}
  .search::placeholder{color:var(--ink-3);}

  .list{display:flex;flex-direction:column;gap:8px;}
  .roll-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-left:4px;
  }
  .list > .roll-head:first-child{margin-top:0;}
  .roll-head h3{font-size:14px;font-weight:600;color:var(--ink-2);display:flex;gap:8px;align-items:center;min-width:0;}
  .roll-head h3 b{color:var(--ink);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .roll-head h3 small{font-size:13px;color:var(--ink-3);font-weight:500;white-space:nowrap;}
  .roll-head button{min-height:44px;padding:0 10px;border-radius:10px;color:var(--ink-3);font-size:14px;display:inline-flex;gap:6px;align-items:center;}
  .roll-head button:active{background:var(--surface);}
  .cut-gap{height:1px;margin:2px 14px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);}
  .take-card{
    display:flex;align-items:stretch;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);
    border:1.5px solid transparent;overflow:hidden;
  }
  .take-card.good{border-color:var(--ink);}
  .take-circle{width:60px;flex:none;display:grid;place-items:center;}
  .take-circle span{
    width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--line-2);
    font-family:var(--num);font-weight:700;font-size:19px;color:var(--ink-2);
  }
  .take-card.good .take-circle span{border:2.5px solid var(--ink);color:var(--ink);}
  .take-circle:active span{transform:scale(.92);}
  .take-circle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 0;}
  .loop-badge{min-width:26px;height:18px;padding:0 6px;border-radius:9px;background:var(--ink);color:var(--on-ink);font-style:normal;font-size:11px;font-weight:700;line-height:18px;text-align:center;white-space:nowrap;}
  .take-body{flex:1;min-width:0;text-align:left;padding:11px 14px 11px 0;display:flex;gap:10px;}
  .take-body:active{background:var(--surface-2);}
  .take-main{flex:1;min-width:0;}
  .take-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:16px;}
  .take-title .clip{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface-2);padding:2px 7px;border-radius:6px;}
  .take-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;color:var(--ink-2);margin-top:3px;}
  .take-note{display:block;font-size:13px;color:var(--ink-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .take-wb{font-size:13px;color:var(--ink-3);flex:none;align-self:flex-start;padding-top:2px;}

  /* The project and export screens are a fixed-height shell: only the list scrolls, and the
     bottom bar is simply the last row. Nothing is pinned to the screen edge, so iOS has no
     keyboard offset to get wrong and the buttons always sit where they are drawn. */
  html.in-shell, html.in-shell body{height:100%;overflow:hidden;overscroll-behavior:none;}
  .screen.shell{height:100vh;height:100dvh;min-height:0;padding:0;overflow:hidden;}
  .shell-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--safe-t) + 12px) 16px 18px;}
  .dock{flex:none;position:relative;z-index:5;background:var(--bg);border-top:1px solid var(--line);padding:10px 16px calc(var(--safe-b) + 10px);}
  html.typing .dock{display:none;}
  .dock .fab{margin-top:-30px;}
  .dock .preview-actions{max-width:568px;margin:0 auto;}
  .bottom-inner{max-width:568px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;}
  .bar-btn{
    height:52px;padding:0 16px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);
    display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;white-space:nowrap;
  }
  .bar-btn.left{justify-self:start;}
  .bar-btn.right{justify-self:end;}
  @media (max-width:359px){
    .bar-label{display:none;}
    .bar-btn{width:52px;padding:0;justify-content:center;}
    .undo-btn{width:44px;padding:0;justify-content:center;font-size:0;gap:0;}
  }
  .fab{
    width:72px;height:72px;border-radius:24px;background:var(--tape);color:var(--tape-ink);display:grid;place-items:center;
    box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
  }
  .fab svg.i{width:32px;height:32px;stroke-width:2.6;}
  .fab:active{transform:scale(.95);}

  .roll-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;margin:0 -2px;position:sticky;top:0;z-index:3;background:var(--bg, #F1F3F5);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .roll-chips::-webkit-scrollbar{display:none;}
  .roll-chip{flex:none;min-height:36px;padding:0 14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);font-weight:600;font-size:14px;white-space:nowrap;}
  .roll-chip.folded{opacity:.55;}
  .roll-chip.fold-all{background:transparent;box-shadow:none;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;}
  .roll-toggle{width:34px;min-height:44px !important;padding:0 !important;margin-right:2px;display:grid !important;place-items:center;}
  .roll-toggle svg{width:20px;height:20px;transition:transform .15s;}
  .roll-toggle[aria-expanded="false"] svg{transform:rotate(-90deg);}
  .roll-head{scroll-margin-top:56px;}