@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Caveat-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Caveat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Caveat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* The look below is ported from docs/phone-mockup.html (the spec). Rules that exist only to make the mockup's buttons work are marked "app". */
:root{
  --desk:#EEF1F5; --card:#FFFFFF; --ink:#1B1F24; --ink2:#3D4652; --muted:#5B6573; --line:#E2E6EC;
  --blue:#1F4FC8; --blue-soft:#F4F7FE; --blue-edge:#9DB3E6; --chip:#F2F4F7;
  --green:#1D5E3C; --green-bg:#E8F4EE; --amber:#6B4A00; --amber-bg:#FFF6E5; --amber-edge:#F0D49A;
  --red:#B3261E; --red-bg:#FDECEA; --bezel:#1B1F24;
  --font:Inter,system-ui,sans-serif; --hand:Caveat,'Comic Sans MS',cursive;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--card);color:var(--ink);font-family:var(--font);overscroll-behavior-y:contain}
/* app: #app plays the part of the mockup's .screen (without its fake status bar) */
#app{position:relative;width:100%;height:100%;background:var(--card);overflow:hidden;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);-webkit-user-select:none;user-select:none}
#main{flex:1;min-height:0;display:flex;flex-direction:column}
[data-act],[data-nact]{cursor:pointer}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}

.appbar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 14px 10px}
.appbar .name{font-size:17px;font-weight:700;letter-spacing:-.01em;min-width:0}
.appbar .back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-left:-8px;flex:none}
.appbar .back svg{width:22px;height:22px}
.appbar .name.small{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stor{margin-left:auto;width:54px;height:6px;border-radius:3px;background:#DDE3EE;overflow:hidden;display:block}.stor i{display:block;height:100%;background:var(--blue)}.storl{font-size:11px;color:#5b6577;margin-left:6px;white-space:nowrap;position:relative}
.storl::after{content:"";position:absolute;inset:-14px -8px}
.avatar{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:0 14px}
.content::-webkit-scrollbar{display:none}
.tabbar{flex:none;display:flex;border-top:1px solid var(--line);background:var(--card);padding:6px 4px calc(14px + env(safe-area-inset-bottom,0px))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--muted);min-height:44px;justify-content:center}
.tab.on{color:var(--blue)}
.tab svg{width:22px;height:22px}
.homebar{position:absolute;bottom:calc(5px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:110px;height:4px;border-radius:4px;background:var(--ink);opacity:.85;z-index:60;pointer-events:none}

/* shared bits */
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{border-radius:999px;padding:5px 10px;font-size:11.5px}
.pill.g{background:var(--green-bg);color:var(--green);font-weight:600}
.pill.n{background:var(--chip);color:var(--ink2)}
.chips{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--ink2);background:#fff;white-space:nowrap}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.btn{min-height:44px;border-radius:10px;border:1px solid var(--blue);background:#fff;color:var(--blue);font:600 14px var(--font);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;text-align:center}
.btn.p{background:var(--blue);color:#fff}
.btn.full{width:100%}
.btn:active{opacity:.8}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.item{border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;background:#fff;min-width:0}
.item.shelved{background:#F6F7F9;border:1.5px dashed #B9C2D0}
.item.shelved .thumb{opacity:.55}
.item .nm{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{align-self:flex-start;font-size:10px;border-radius:999px;padding:2px 7px;border:1px solid #C9D3E3;color:var(--ink2)}
.badge.pc{background:var(--blue-soft);border-color:var(--blue-edge);color:var(--blue);font-weight:600}
.badge.dr{background:var(--green-bg);border-color:#BFE0CE;color:var(--green);font-weight:600}
.badge.ph{background:#EAF0FF;border-color:var(--blue-edge);color:var(--blue);font-weight:600}
.badge.both{background:#EDF0F5;border-color:#C5CEDD;color:#43536B;font-weight:600}
.thumb{height:78px;border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.thumb svg{width:34px;height:34px}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#222;pointer-events:none}
.thumb .vpl{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.thumb .vpl svg{width:14px;height:14px;margin-left:2px}
.photo{background:linear-gradient(135deg,#DCE6FB,#C4D5F7);color:#2D58C4}
.video{background:linear-gradient(135deg,#FBE6D6,#F6CFB3);color:#A4521C}
.doc{background:linear-gradient(135deg,#E3EEE8,#CFE2D8);color:#3D6B54}
.folder{background:linear-gradient(135deg,#FFF1C9,#FBE3A0);color:#8A6200}
.audio{background:linear-gradient(135deg,#EBE1F7,#DACBF0);color:#6A3FA0}
.fab{position:absolute;right:16px;bottom:78px;width:54px;height:54px;border-radius:16px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(31,79,200,.35);z-index:5}
.fab svg{width:26px;height:26px}
.scrim{position:absolute;inset:0;background:rgba(20,30,50,.38);z-index:20}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;background:#fff;border-radius:22px 22px 0 0;padding:10px 14px 24px;display:flex;flex-direction:column;gap:6px;max-height:90%;overflow-y:auto}
.grab{width:38px;height:4px;border-radius:4px;background:#C9D0DA;align-self:center;margin-bottom:6px;flex:none}
.row{display:flex;align-items:center;gap:12px;min-height:46px;border-radius:10px;padding:0 6px;font-size:14px;font-weight:600;flex:none}
.row:active{background:var(--chip)}
.row svg{width:20px;height:20px;flex:none;color:var(--ink2)}
.row small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:1px}
.row.main{background:var(--blue);color:#fff;padding:0 12px}.row.main svg{color:#fff}
.row.danger{color:var(--red)}.row.danger svg{color:var(--red)}
.note-box{border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45}
.note-box.amber{background:var(--amber-bg);border:1px solid var(--amber-edge);color:var(--amber)}
.note-box.blue{background:var(--blue-soft);border:1px solid var(--blue-edge);color:var(--ink2)}
h2.t{margin:0;font-size:19px}
.sub{font-size:12px;color:var(--muted)}
.bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--blue)}
.up{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.up .top{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600}
.up .top span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player{background:#10141A;border-radius:12px;aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;color:#fff}
.player .play{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.player .play svg{width:26px;height:26px}
.player .scrub{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:center;gap:8px;font-size:10.5px}
.player .scrub .bar{flex:1;background:rgba(255,255,255,.25)}
.set{border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column}
.set .s{display:flex;align-items:center;gap:10px;padding:11px 12px;font-size:13px}
.set .s+.s{border-top:1px solid var(--line)}
.set .s div{flex:1;min-width:0}
.set .s small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.when{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px}.when h4{margin:0 0 8px;font-size:14px}.when .r{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:12.5px;line-height:1.4;cursor:pointer}.when .r b{font-weight:700}.rd{width:18px;height:18px;border-radius:50%;border:2px solid #9AA3B0;flex:none;margin-top:1px;position:relative}.rd.on{border-color:var(--blue)}.rd.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue)}.when .sub{margin-top:4px;line-height:1.4}
.tog{width:40px;height:24px;border-radius:24px;background:var(--blue);position:relative;flex:none}
.tog::after{content:"";position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff}
.tog.off{background:#C9D0DA}
.tog.off::after{right:auto;left:2px}
.dot{width:8px;height:8px;border-radius:50%;background:#2E9E5F;flex:none}
.label{font-size:12px;color:var(--muted);font-weight:600}
.ptr{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 56px);height:30px;line-height:30px;text-align:center;font-size:12px;color:var(--muted);opacity:0;pointer-events:none;z-index:4;transition:opacity .15s}
.ptr.show{opacity:1}

/* app: states that the mockup does not draw (loading, errors, empty) */
.empty,.msg{border:1px dashed var(--blue-edge);background:var(--blue-soft);border-radius:14px;padding:22px 16px;text-align:center;color:var(--ink2);font-size:15px;line-height:1.5}
.msg.err{border:1px solid #F1B8B4;background:var(--red-bg);color:var(--red);font-weight:600;text-align:left}
.msg.err small{display:block;font-weight:400;color:var(--ink2);margin-top:6px;word-break:break-word}
.stack{display:flex;flex-direction:column;gap:10px}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.center h1{margin:0;font-size:26px;color:var(--blue)}
.center p{margin:0;color:var(--muted);font-size:15px;line-height:1.45;max-width:30ch}
.center .logo{width:84px;height:84px;object-fit:contain}
.center .btn{width:100%;max-width:320px;min-height:56px;font-size:17px}
.center .msg{max-width:340px;width:100%}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--blue);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.savednote{text-align:center}
.search{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font:15px var(--font);color:var(--ink);background:var(--chip);flex:none;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text}
.search:focus{outline:2px solid var(--blue-edge);background:#fff}
.chip svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px}
.crumbs{display:flex;gap:2px;align-items:center;overflow-x:auto;white-space:nowrap;flex:none;scrollbar-width:none;font-size:13px;color:var(--muted)}
.crumbs::-webkit-scrollbar{display:none}
.crumbs span{padding:8px 6px;min-height:36px;font-weight:600;color:var(--blue);border-radius:8px;display:flex;align-items:center}
.crumbs span:last-child{color:var(--ink)}
.crumbs i{font-style:normal;color:#9AA3B0}
.btnrow{display:flex;gap:8px}
.btnrow .btn{flex:1}
.divider{height:1px;background:var(--line);margin:4px 0;flex:none}
.pv-note{font-size:12.5px}
#toast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:70;background:#1B1F24;color:#fff;border-radius:12px;padding:13px 16px;font-size:14px;line-height:1.4;text-align:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s;max-width:420px;margin:0 auto}
#toast.show{opacity:1;transform:none}

/* viewer */
.viewer{position:absolute;inset:0;z-index:30;background:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.vstage{padding-bottom:16px}
.vstage img.full{max-width:100%;max-height:100%;object-fit:contain;margin:auto;border-radius:8px}
.vstage video{width:100%;max-height:70vh;background:#10141A;border-radius:12px}
.vstage audio{width:100%;margin:auto 0}
.vstage iframe{flex:1;width:100%;border:1px solid var(--line);border-radius:10px;background:#fff}
.vstage pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--blue-soft);-webkit-user-select:text;user-select:text}
.vwrap{position:relative}
.vwrap video{display:block}
.vstate{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;background:rgba(16,20,26,.28);border-radius:12px;color:#fff;font:600 14px var(--font)}
.vstate.on{display:flex}
.vstate span{background:rgba(0,0,0,.62);padding:6px 14px;border-radius:999px}
.vstate .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
#vmsg{display:flex;flex-direction:column;gap:8px}
.vdet{font-size:11.5px!important;color:#5B6573!important;font-weight:400}

/* Add to Padd: the SAVE TO line (docs/phone-attach-mockup.html) */
.saveto{display:flex;flex-direction:column;gap:6px}
.saveto .set .s{gap:10px}
.saveto .s b{overflow-wrap:anywhere}
.saveto .acic{flex:none;display:flex;color:var(--blue)}
.saveto .chg{flex:none;margin-left:auto;color:var(--blue);font-weight:700;font-size:13px;padding:8px 0 8px 8px}
.arow[role=radio]{cursor:pointer}

/* storage sheet (opened from the top bar) */
.sheet .ttl{font-weight:700;font-size:15px;overflow-wrap:anywhere;padding:0 6px}
.stobig{font-size:22px;font-weight:700;letter-spacing:-.01em;padding:0 6px}
.sbar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:#E9EDF2}
.sbar i{display:block;height:100%;background:var(--blue)}
.sbar i.g{background:#1F4FC8}
.sbar i.o{background:#9AA6B6}
.sbar.big{height:10px}
.sbar.sm{height:5px;margin-top:5px}
.sheet>.sub,.sheet>.legend,.sheet>.sbar{margin-left:6px;margin-right:6px}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:#3D4652}
.legend span{display:flex;align-items:center}
.sq{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.sq.g{background:#1F4FC8}.sq.o{background:#9AA6B6}.sq.f{background:#E9EDF2;border:1px solid #C9D3E3}
.alist{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:4px 0 2px}
.arow{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.arow:last-child{border-bottom:0}
.av{width:26px;height:26px;border-radius:50%;background:#D9E3F8;color:#1F4FC8;font:700 12px var(--font);display:flex;align-items:center;justify-content:center}
.arow .mid{min-width:0}
.em{display:flex;align-items:center;gap:6px;min-width:0}
.em .e{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chp{flex:none;font-size:11px;border-radius:999px;padding:1px 7px;font-weight:600}
.c-fill{background:#E3EAFB;color:#1F4FC8}.c-full{background:#F2F4F7;color:#3D4652}.c-sign{background:var(--amber-bg);color:var(--amber)}
.fr{font-size:12px;color:var(--muted);white-space:nowrap}
.fr b{color:var(--ink)}

/* sheet open on the Files screen: the mockup shows only the first cards, dimmed */
#app.sheeted #main .content{opacity:.5;overflow:hidden}
#app.sheeted #main .pills,#app.sheeted #main .chips,#app.sheeted #main .search,#app.sheeted #main .savednote{display:none}
#app.sheeted #main .grid .item:nth-child(n+5){display:none}
#app.sheeted .fab{display:none}

/* ---------- notes: the notepad. Ported from docs/phone-notepad-mockup.html (the "After" view): same rules and values, scoped under .nb.
   Four mockup class names collide with Files-screen classes, so here they are .nscrim .nsheet .ngrab .nchip. ---------- */
.np-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}
.np-empty{margin:auto;padding:24px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;font-family:Inter,sans-serif;font-size:14px;color:var(--ink2)}
.nb{--paper:#FFF3A8;--rule:#E7D77A;--ink:#22304A;--ui:'Figtree',system-ui,sans-serif;--hand:'Caveat','Segoe Print',cursive;--mono:'Courier New',monospace;
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;color:#18202F;font-family:var(--ui);overflow:clip}
.nb svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nb button{font-family:var(--ui)}
.nb [contenteditable]{-webkit-user-select:text;user-select:text}

/* paper */
.nb .paper,.nb .drawer{scrollbar-width:thin;scrollbar-color:transparent transparent}
.nb .paper.sc,.nb .drawer.sc{scrollbar-color:rgba(60,50,0,.35) transparent}
.nb .paper{flex:1;min-height:0;overflow:auto;position:relative;background-color:var(--paper);
  background-image:linear-gradient(to bottom,transparent 35px,var(--rule) 35px,var(--rule) 36px);background-size:100% 36px;background-attachment:local;padding:0 16px 10px 40px;transition:background-color .2s}
.nb .paper:before{content:"";position:absolute;left:30px;top:0;bottom:0;width:2px;background:#D9534F;opacity:.55;pointer-events:none;height:2000px}
.nb .hole{position:absolute;left:10px;width:14px;height:14px;border-radius:50%;background:#B78A4B;opacity:.7}
.nb .ttl{display:flex;justify-content:space-between;align-items:baseline;height:72px;padding-top:12px}
.nb .ttl .t{font:500 28px var(--hand);color:#6B7280;outline:none;min-width:0;flex:1}
.nb .ttl .t:empty::before{content:attr(data-ph)}
.nb .ttl .d{font:500 15px var(--hand);color:#6B7280}
.nb .paper.typed .t,.nb .paper.typed .ln,.nb .paper.typed .d{font-family:var(--mono)}
.nb .paper.typed .ln{font-size:15px}.nb .paper.typed .t{font-size:22px}
.nb .ln{font:500 22px/36px var(--hand);color:var(--ink);min-height:36px;outline:none;display:block;overflow-wrap:anywhere}
.nb .ln .g{color:#8c93a1}
.nb .tx{outline:none;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;caret-color:var(--blue)}
.nb .cl{display:flex;gap:10px;align-items:center;min-height:36px;font:500 22px var(--hand);color:var(--ink)}
.nb .paper.typed .cl{font:15px var(--mono)}
.nb .cl .tx{flex:1;min-width:40px}
.nb .cb{width:20px;height:20px;border:2px solid #333;border-radius:5px;flex:none;background:rgba(255,255,255,.4);cursor:pointer;position:relative}
.nb .cl.done .cb:after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #333;border-width:0 2px 2px 0;transform:rotate(40deg)}
.nb .cl.done span{text-decoration:line-through;opacity:.55}
.nb .cnt{font:500 12px var(--ui);color:#8a8159;height:36px;line-height:36px}
.nb .ln.u{display:none}
.nb.nocards .card{display:none}
.nb .card{display:flex;gap:10px;background:#fffdf4;border-radius:10px;box-shadow:0 1px 4px rgba(60,50,0,.25);padding:8px;margin:6px 0 6px;font-family:var(--ui);cursor:pointer}
.nb .card .th{width:64px;height:48px;border-radius:6px;background:#2B2F3A;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.nb .card b{font-size:12.5px;line-height:1.25;display:block}.nb .card small{font-size:11px;color:#6b7280}
.nb .aud{display:inline-flex;align-items:center;gap:8px;background:#fffdf4;border-radius:18px;padding:5px 12px 5px 6px;box-shadow:0 1px 4px rgba(60,50,0,.25);font:600 12px var(--ui);margin:5px 0;cursor:pointer}
.nb .aud i{width:24px;height:24px;border-radius:50%;background:#1F4FC8;color:#fff;display:flex;align-items:center;justify-content:center}
.nb .au{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.nb .aud i svg{width:14px;height:14px}
.nb .stat{flex:none;padding:5px 16px 5px 40px;background:var(--paper);font:500 11px var(--ui);color:#7b7344;display:flex;gap:6px;align-items:center;transition:background-color .2s}
.nb .stat i{width:6px;height:6px;border-radius:50%;background:#2E9E5F}
/* inside the text: web addresses, alarms, markers, pictures */
.nb .np-lk{color:#2E3FC4;text-decoration:underline;overflow-wrap:anywhere}
.nb .hl{background:rgba(255,200,40,.55);border-radius:3px;padding:0 1px}
.nb .wb{display:inline-flex;vertical-align:middle;margin-left:3px;width:20px;height:20px;border-radius:10px;background:#fffdf4;box-shadow:0 1px 3px rgba(60,50,0,.3);align-items:center;justify-content:center;color:#1F4FC8;cursor:pointer}.nb .wb svg{width:12px;height:12px}
.nb .mk{display:inline-block;font:600 11px/17px var(--ui);background:#EEF1F5;color:#5B6573;border-radius:999px;padding:0 8px;vertical-align:middle}
.nb .pic{display:flex;margin:4px 0}.nb .pic.right{justify-content:flex-end}
.nb .pic .ph{background:#F2F4F7;border-radius:8px;min-height:62px;width:60%;display:flex;align-items:center;justify-content:center;color:#9AA3B0;font:12px var(--ui);line-height:1.3;flex-direction:column}
.nb .pic .ph svg{width:28px;height:28px}
.nb .pic .ph.on{background:none;min-height:0;display:block}
.nb .pic .ph img{width:100%;height:auto;border-radius:8px;display:block}

/* top bar */
.nb .top{height:52px;flex:none;display:flex;align-items:center;gap:4px;padding:0 8px;background:#fff;border-bottom:1px solid #E3E7F0}
.nb .ib{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:#2b3447;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.nb .ib.fl{border:1px solid #D5DBE7;background:#fff}
.nb .ib:active{background:#E8EDF8}.nb .ib[disabled]{opacity:.35}
.nb .ib .bd{position:absolute;top:3px;right:2px;min-width:16px;height:16px;border-radius:8px;background:#D9534F;color:#fff;font:700 10px/16px var(--ui);text-align:center;padding:0 4px}
.nb .pg{height:40px;border-radius:12px;border:1px solid #D5DBE7;background:#fff;padding:0 12px 0 10px;display:flex;align-items:center;gap:7px;font:600 14px var(--ui);color:#18202F;cursor:pointer}
.nb .pg small{font-weight:500;color:#6b7280}
.nb .nw{width:40px;height:40px;border-radius:12px;border:0;background:#1F4FC8;color:#fff;font:600 14px var(--ui);padding:0;display:flex;gap:4px;align-items:center;justify-content:center;cursor:pointer}
.nb .sp{flex:1}

/* dock */
.nb .dock{flex:none;background:#fff;border-top:1px solid #E3E7F0;padding:6px 3px calc(6px + 4px);display:flex;justify-content:space-between;position:relative;min-height:62px}
.nb .dk{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:#2b3447;font:600 9.5px var(--ui);padding:5px 0;border-radius:12px;cursor:pointer;min-width:0;letter-spacing:-.1px}
.nb .dk:active{background:#E8EDF8}
.nb .dk svg{width:22px;height:22px}
.nb .dk.rec svg{color:#D9534F}
.nb .dk.cam,.nb .dk.cam svg{color:#1F4FC8}
.nb .strip{position:absolute;inset:0;background:#fff;display:none;align-items:center;gap:10px;padding:0 12px}
.nb .dock.mode .strip{display:flex}
.nb .pulse{width:12px;height:12px;border-radius:50%;background:#D9534F;animation:nbp 1s infinite}
@keyframes nbp{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.nb .pulse{animation:none}}
.nb .strip b{font:700 15px var(--ui);font-variant-numeric:tabular-nums}.nb .strip small{color:#6b7280;font-size:12px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb .sbtn{height:42px;border-radius:12px;border:1px solid #D5DBE7;background:#fff;padding:0 14px;font:600 13px var(--ui);cursor:pointer;display:flex;align-items:center;gap:6px}
.nb .sbtn.pri{background:#D9534F;border-color:#D9534F;color:#fff}.nb .sbtn.blue{background:#1F4FC8;border-color:#1F4FC8;color:#fff}

/* overlays */
.nb .nscrim{position:absolute;inset:0;background:rgba(15,20,35,.35);opacity:0;pointer-events:none;transition:opacity .18s;z-index:5}
.nb .nscrim.on{opacity:1;pointer-events:auto}
.nb .nsheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;padding:8px 16px 18px;z-index:6;transform:translateY(105%);transition:transform .22s;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.nb .nsheet.on{transform:none}
.nb .ngrab{width:36px;height:4px;border-radius:2px;background:#CBD2E0;margin:0 auto 10px}
.nb .nsheet h3{margin:0 0 10px;font-size:15px}
.nb .sw2{display:flex;gap:12px;margin-bottom:14px}
.nb .col{width:40px;height:40px;border-radius:50%;border:2px solid #D5DBE7;cursor:pointer}
.nb .col[aria-pressed=true]{border-color:#1F4FC8;box-shadow:0 0 0 2px #fff inset}
.nb .row2{display:flex;gap:10px;margin-bottom:6px}
.nb .fnt{flex:1;height:46px;border-radius:12px;border:1px solid #D5DBE7;background:#fff;cursor:pointer;font-size:19px}
.nb .fnt[aria-pressed=true]{background:#E8EEFD;border-color:#1F4FC8}
.nb .nchip{height:40px;border-radius:20px;border:1px solid #D5DBE7;background:#fff;padding:0 14px;font:600 13px var(--ui);cursor:pointer}
.nb .nchip[aria-pressed=true]{background:#1F4FC8;color:#fff;border-color:#1F4FC8}
.nb .drawer{position:absolute;top:0;bottom:0;left:0;width:84%;background:#fff;z-index:6;transform:translateX(-105%);transition:transform .22s;padding:14px 12px;overflow:auto;box-shadow:6px 0 24px rgba(0,0,0,.2)}
.nb .drawer.on{transform:none}
.nb .drawer h3{margin:4px 4px 10px;font-size:15px}
.nb .pc{border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px;cursor:pointer;border:2px solid transparent}
.nb .pc b{display:block;font-size:14px}.nb .pc small{color:#5b6577}
.nb .pc[aria-current=true]{border-color:#1F4FC8}
.nb .menu{position:absolute;right:10px;top:54px;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.25);padding:6px;z-index:6;display:none;min-width:200px}
.nb .menu.on{display:block}
.nb .menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:11px 10px;border-radius:10px;font:500 14px var(--ui);color:#18202F;cursor:pointer;text-align:left}
.nb .menu button:active{background:#E8EDF8}.nb .menu hr{border:0;border-top:1px solid #E3E7F0;margin:4px 0}
.nb .toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#18202F;color:#fff;font:500 13px var(--ui);padding:9px 14px;border-radius:20px;opacity:0;transition:.2s;z-index:9;pointer-events:none;white-space:nowrap}
.nb .toast.on{opacity:1;transform:translateX(-50%)}
.nb .toast.act{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;z-index:12;white-space:normal;width:max-content;max-width:calc(100% - 24px)}
.nb .toast.act button{background:none;border:0;color:#9DBBFF;font:600 13px var(--ui);padding:4px 2px}

/* alarms (docs/phone-notepad-extras-mockup.html): the bell at the end of a checklist row, the form, the Alarms list, the selection bell, the ringing screen */
.nb .cl{position:relative}
.nb .rb{margin-left:auto;width:30px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#7d7550;opacity:.75;cursor:pointer;flex:none}.nb .rb svg{width:16px;height:16px}
.nb .rbd{margin-left:auto;display:flex;align-items:center;gap:4px;height:26px;border-radius:13px;padding:0 9px;background:#fffdf4;box-shadow:0 1px 3px rgba(60,50,0,.3);font:600 11.5px var(--ui);color:#1F4FC8;cursor:pointer;flex:none;white-space:nowrap}.nb .rbd svg{width:13px;height:13px}
.nb .cl.done .rb,.nb .cl.done .rbd{opacity:.5}
.nb .selbell{position:absolute;z-index:7;height:40px;padding:0 14px 0 10px;border-radius:20px;background:#1F4FC8;color:#fff;border:0;box-shadow:0 4px 14px rgba(0,0,0,.3);font:600 13px var(--ui);display:none;align-items:center;gap:6px;cursor:pointer}.nb .selbell.on{display:flex}
.nb .nfld{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;font-size:12px;font-weight:600;color:#4b5567}
.nb .nfld[hidden],.nb .sbtn[hidden]{display:none}
.nb .nfld input,.nb .nfld select{height:44px;border:1px solid #D5DBE7;border-radius:10px;padding:0 10px;font:500 15px var(--ui);color:#18202F;background:#fff;width:100%}
.nb .nfr{display:flex;gap:8px}.nb .nfr .nfld{flex:1;min-width:0}
.nb .asheet{max-height:92%;overflow:auto;transform:translateY(calc(100% + 40px))}.nb .asheet.on{transform:none}
.nb .alerr{color:#A12C2C;font-size:12.5px;font-weight:600;margin:-4px 0 8px}.nb .alerr:empty{display:none}
.nb .sbtn.del{color:#A12C2C;border-color:#E3B9B9}
.nb .nalist{position:absolute;inset:0;background:#fff;z-index:8;display:none;flex-direction:column}.nb .nalist.on{display:flex}
.nb .ah{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #E3E7F0}.nb .ah b{font-size:17px;flex:1}
.nb .ar{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid #EEF1F7;cursor:pointer}.nb .ar .aic{width:34px;height:34px;border-radius:50%;background:#E8EEFD;color:#1F4FC8;display:flex;align-items:center;justify-content:center;flex:none}
.nb .ar .atx{flex:1;min-width:0}.nb .ar b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nb .ar small{color:#5b6577;font-size:12px}.nb .ar .tm{font:600 12.5px var(--ui);text-align:right;white-space:nowrap}
.nb .ar.ringing .aic{background:#D9534F;color:#fff}.nb .ar.ringing .tm{color:#D9534F}
.nb .ar .dis{height:32px;padding:0 10px;font-size:12px}
.nb .aempty{margin:auto;color:#5b6577;font-size:14px;text-align:center;padding:20px}
.alring{position:fixed;inset:0;z-index:60;background:#18202F;color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;font-family:'Figtree',system-ui,sans-serif}.alring.on{display:flex}
.alring .bell{width:84px;height:84px;border-radius:50%;background:#D9534F;display:flex;align-items:center;justify-content:center;animation:nbp 1s infinite}.alring .bell svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* an alarm on a picture, video, recording or file card: the bell badge on the block's top-right corner, the block lit up when the alarm opens it */
.nb .bbd{position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;border-radius:14px;background:#fffdf4;box-shadow:0 1px 4px rgba(40,30,0,.45);display:flex;align-items:center;justify-content:center;color:#1F4FC8;cursor:pointer}.nb .bbd svg{width:15px;height:15px}
.nb .pic .ph,.nb .aud{position:relative}
.nb .ph .bbd,.nb .aud .bbd,.nb .fcard .bbd{top:-9px;right:-9px}
.nb .vblk.bell .vup,.nb .fvid.bell .flnk{right:40px}
@keyframes nbblk{0%,100%{box-shadow:0 0 0 0 rgba(230,126,0,0)}12%,70%{box-shadow:0 0 0 5px rgba(230,126,0,.75)}}
.nb .bflash{animation:nbblk 2s ease-in-out;border-radius:10px}.nb .pic.bflash{animation:none}.nb .pic.bflash .ph{animation:nbblk 2s ease-in-out}.nb .au.bflash{animation:none}.nb .au.bflash .aud{animation:nbblk 2s ease-in-out}
.nb .ar .ablk{display:block;font:700 11px var(--ui);color:#5b6577;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb .nchk{display:flex;align-items:center;gap:10px;margin:2px 0 2px;font-size:14px;font-weight:600;color:#18202F}.nb .nchk input{width:20px;height:20px;margin:0;accent-color:#1F4FC8}
.nb .nhint{margin:0 0 10px 30px;font-size:12px;color:#5b6577}
.alring h3{font-size:24px;margin:6px 0 0}.alring p{margin:0;color:#B8C0D2;font-size:14px}.alring .big2{width:100%;height:52px;border-radius:14px;border:0;font:700 16px 'Figtree',system-ui,sans-serif;cursor:pointer}
.alring .sn{display:flex;gap:8px;width:100%}.alring .sn button{flex:1;height:44px;border-radius:12px;border:1px solid #4a5570;background:transparent;color:#fff;font:600 13px 'Figtree',system-ui,sans-serif;cursor:pointer}
@media (prefers-reduced-motion:reduce){.alring .bell{animation:none}}

/* the Draw sheet (docs/phone-notepad-extras-mockup.html): a full-screen sheet over the notepad. touch-action:none = a finger draws, it never scrolls or zooms the page behind */
.nb .drawov{position:absolute;inset:0;background:#fff;z-index:10;display:none;flex-direction:column;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}.nb .drawov.on{display:flex}
.nb .dtop{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #E3E7F0}.nb .dtop b{flex:1;font-size:16px}
.nb .dtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px}
.nb .seg2{display:flex;border:1px solid #D5DBE7;border-radius:10px;overflow:hidden}.nb .seg2 button{border:0;background:#fff;height:38px;padding:0 11px;font:600 12.5px var(--ui);cursor:pointer;color:#2b3447}.nb .seg2 button[aria-pressed=true]{background:#E8EEFD;color:#1F4FC8}
.nb .dot2{width:38px;height:38px;border-radius:10px;border:1px solid #D5DBE7;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.nb .dot2 i{display:block;background:#2b3447;border-radius:50%}
.nb .seg2 .dot2{width:38px;padding:0;border:1px solid #D5DBE7;background:#fff}.nb .seg2 .dot2[aria-pressed=true]{background:#E8EEFD;border-color:#1F4FC8}
.nb .ink{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #D5DBE7;cursor:pointer;padding:0;flex:none}.nb .ink[aria-pressed=true]{box-shadow:0 0 0 2px #1F4FC8}
.nb .cvw{flex:1;margin:4px 12px 12px;border-radius:12px;border:1px solid #D5DBE7;overflow:hidden;touch-action:none;background:var(--paper);position:relative;min-height:0}.nb .cvw canvas{display:block;width:100%;height:100%;touch-action:none}
.nb .cvw #dlive{position:absolute;left:0;top:0;pointer-events:none}
.nb .drawov .nsheet,.nb .drawov .nscrim{touch-action:none}

/* the Camera (docs/phone-camera-mockup.html): a full-screen camera over the notepad, its preview, the quality sheet, the video block in the page. Same rules and values as the mockup, under .nb.
   (The mockup draws a 28 px fake status bar inside its screen; the real app has none, so the distances measured from the top of the mockup's screen are 28 px smaller here.) */
.nb .camov svg.i,.nb .prev svg.i,.nb .cpm svg.i,.nb .cpbox svg.i,.nb .vplay svg.i{width:22px;height:22px}
.nb .camov{position:absolute;inset:0;background:#000;z-index:20;display:none;flex-direction:column;color:#fff;-webkit-user-select:none;user-select:none}
.nb .camov.on{display:flex}
.nb .vf{position:relative;flex:1;min-height:0;overflow:hidden;background:#6b7076}
.nb .vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nb .vf .cgrid{position:absolute;inset:-28px 0 0 0;background:linear-gradient(transparent 33%,rgba(255,255,255,.22) 33% calc(33% + 1px),transparent calc(33% + 1px) 66%,rgba(255,255,255,.22) 66% calc(66% + 1px),transparent calc(66% + 1px)),linear-gradient(90deg,transparent 33%,rgba(255,255,255,.22) 33% calc(33% + 1px),transparent calc(33% + 1px) 66%,rgba(255,255,255,.22) 66% calc(66% + 1px),transparent calc(66% + 1px));pointer-events:none}
.nb .camtop{position:absolute;left:0;right:0;top:0;padding:6px 12px 10px;display:flex;align-items:center;gap:8px;background:linear-gradient(rgba(0,0,0,.371),transparent);z-index:3}
.nb .cbtn{width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.42);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.nb .cbtn[hidden]{display:none}
.nb .qchip{height:36px;border-radius:18px;border:0;background:rgba(0,0,0,.42);color:#fff;padding:0 13px;font:700 13px var(--ui);cursor:pointer;display:none;gap:6px;align-items:center}
.nb .camov.vid .qchip{display:flex}
.nb .rectime{position:absolute;left:50%;top:50px;transform:translateX(-50%);background:rgba(217,83,79,.95);padding:4px 12px;border-radius:14px;font:700 14px var(--ui);font-variant-numeric:tabular-nums;display:none;z-index:3;gap:7px;align-items:center}
.nb .camov.recording .rectime{display:flex}
.nb .rectime i{width:8px;height:8px;border-radius:50%;background:#fff;animation:nbp 1s infinite}
.nb .lim{position:absolute;left:50%;top:88px;transform:translateX(-50%);font:600 11.5px var(--ui);background:rgba(0,0,0,.45);padding:3px 10px;border-radius:10px;display:none;z-index:3;white-space:nowrap}
.nb .camov.recording .lim{display:block}
@media (prefers-reduced-motion:reduce){.nb .rectime i{animation:none}}
.nb .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
.nb .flash.go{animation:nbfl .35s}
@keyframes nbfl{0%{opacity:.9}100%{opacity:0}}
.nb .camctl{flex:none;background:#000;padding:10px 16px 16px;display:flex;flex-direction:column;gap:12px;align-items:center}
.nb .modes{display:flex;gap:22px;font:700 13px var(--ui);letter-spacing:.4px}
.nb .modes button{border:0;background:transparent;color:#aab;font:700 13px var(--ui);padding:4px 2px;cursor:pointer;text-transform:uppercase}
.nb .modes button[aria-pressed=true]{color:#FFD84D;border-bottom:2px solid #FFD84D}
.nb .shrow{width:100%;display:flex;align-items:center;justify-content:space-between}
.nb .cthumb{width:46px;height:46px;border-radius:10px;border:2px solid #fff;background:#444 center/cover;overflow:hidden;font:700 12px/42px var(--ui);text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.nb .shut{width:70px;height:70px;border-radius:50%;border:4px solid #fff;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nb .shut i{display:block;width:54px;height:54px;border-radius:50%;background:#fff;transition:all .15s}
.nb .camov.vid .shut i{background:#E5484D}
.nb .camov.recording .shut i{width:28px;height:28px;border-radius:7px;background:#E5484D}
/* the preview after a photo or a clip */
.nb .prev{position:absolute;inset:0;background:#000;z-index:22;display:none;flex-direction:column;color:#fff}
.nb .prev.on{display:flex}
.nb .prev .vf{background:#000}
.nb .pimg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%}
.nb .pimg img,.nb .pimg video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;background:#000}
.nb .prev.isvid .pimg img{display:none}
.nb .prev:not(.isvid) .pimg video{display:none}
.nb .prev .pl{position:absolute;left:50%;top:calc(50% - 14px);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.9);display:none;align-items:center;justify-content:center;color:#1F4FC8;z-index:3;pointer-events:none}
.nb .prev.isvid .pl{display:flex}
.nb .prev.isvid.playing .pl{display:none}
.nb .pinfo{position:absolute;left:12px;right:12px;top:6px;z-index:3;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.nb .pinfo span{background:rgba(0,0,0,.55);padding:4px 10px;border-radius:10px;font:600 12px var(--ui);color:#fff;font-variant-numeric:tabular-nums}
.nb .stamp{position:absolute;left:10px;bottom:10px;z-index:3;font:600 11px var(--ui);color:#fff;background:rgba(0,0,0,.5);padding:3px 7px;border-radius:6px;display:none}
.nb .pact{flex:none;background:#000;padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px}
.nb .pact .crow{display:flex;gap:10px}
.nb .pb{flex:1;height:46px;border-radius:12px;border:1px solid #556;background:transparent;color:#fff;font:600 14px var(--ui);cursor:pointer}
.nb .pb.pri{background:#1F4FC8;border-color:#1F4FC8}
.nb .ctog{display:flex;align-items:center;gap:8px;font:500 12.5px var(--ui);color:#cbd;cursor:pointer}      /* (a plain button, as the mockup draws it) */
.nb .ctog i{width:34px;height:20px;border-radius:10px;background:#556;position:relative;flex:none;transition:background .15s}
.nb .ctog i:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.nb .ctog[aria-pressed=true] i{background:#2E9E5F}.nb .ctog[aria-pressed=true] i:after{left:16px}
/* the quality sheet */
.nb .cscrim{position:absolute;inset:0;background:rgba(10,15,30,.5);z-index:30;display:none}.nb .cscrim.on{display:block}
.nb .csheet{position:absolute;left:0;right:0;bottom:0;z-index:31;background:#fff;color:#18202F;border-radius:20px 20px 0 0;padding:8px 16px 18px;transform:translateY(105%);visibility:hidden;transition:transform .22s,visibility 0s .22s}
.nb .csheet.on{transform:none;visibility:visible;transition:transform .22s}
@media (prefers-reduced-motion:reduce){.nb .csheet{transition:none}}
.nb .cgrab{width:38px;height:4px;border-radius:2px;background:#C9D0DD;margin:0 auto 10px}
.nb .csheet h3{margin:0 0 4px;font-size:17px}.nb .csheet p{margin:0 0 12px;font-size:13px;color:#5b6577;line-height:1.45}
.nb .qopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid #D5DBE7;border-radius:14px;background:#fff;padding:11px 12px;margin-bottom:8px;cursor:pointer;color:#18202F}
.nb .qopt[aria-checked=true]{border-color:#1F4FC8;background:#F1F5FF}
.nb .qopt .rd{width:20px;height:20px;border-radius:50%;border:2px solid #A9B3C6;flex:none;position:relative}
.nb .qopt[aria-checked=true] .rd{border-color:#1F4FC8}.nb .qopt[aria-checked=true] .rd:after{content:"";position:absolute;inset:3px;border-radius:50%;background:#1F4FC8}
.nb .qopt b{display:block;font-size:15px}.nb .qopt small{font-size:12px;color:#5b6577}
.nb .qopt .mb2{margin-left:auto;font:700 12px var(--ui);color:#1F4FC8;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.nb .csheet .qdone{width:100%;height:46px;border-radius:12px;border:0;background:#1F4FC8;color:#fff;font:600 15px var(--ui);cursor:pointer;margin-top:4px}
.nb .note2{font-size:12px;color:#5b6577;margin:2px 0 10px;line-height:1.4}
/* the menu of a video in the page, the toast with Undo, the "Allow the camera?" box, the full-screen player */
.nb .cpm{position:absolute;z-index:32;background:#fff;color:#18202F;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.3);padding:6px;display:none;min-width:170px}
.nb .cpm.on{display:block}
.nb .cpm button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;padding:11px 12px;font:600 14px var(--ui);color:#18202F;border-radius:10px;cursor:pointer;text-align:left}
.nb .cpm button:active{background:#EEF2FA}.nb .cpm .dng{color:#C0392B}
.nb .ctoast{position:absolute;left:14px;right:14px;bottom:80px;z-index:40;background:#1d2433;color:#fff;border-radius:12px;padding:11px 14px;font:500 13.5px var(--ui);display:none;align-items:center;gap:10px}
.nb .ctoast.on{display:flex}.nb .ctoast span{flex:1}.nb .ctoast button{border:0;background:transparent;color:#8fb0ff;font:700 13px var(--ui);cursor:pointer}
.nb .cperm{position:absolute;inset:0;z-index:26;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:26px}
.nb .cperm.on{display:flex}
.nb .cpbox{background:#fff;color:#18202F;border-radius:18px;padding:18px;width:100%}
.nb .cpbox h3{margin:0 0 6px;font-size:16px}.nb .cpbox p{margin:0 0 14px;font-size:13px;color:#5b6577;line-height:1.45}
.nb .cpbox .crow{display:flex;gap:8px}.nb .cpbox button{flex:1;height:42px;border-radius:12px;border:1px solid #D5DBE7;background:#fff;font:600 14px var(--ui);cursor:pointer;color:#000}.nb .cpbox button.p{background:#1F4FC8;border-color:#1F4FC8;color:#fff}
.nb .vplay{position:absolute;inset:0;z-index:50;background:#000;display:none;align-items:center;justify-content:center}.nb .vplay.on{display:flex}
.nb .vplay video{width:100%;max-height:100%;background:#000}
.nb .vplay .cbtn{position:absolute;left:12px;top:12px;z-index:2}
/* a video in the page (the mockup's media block) */
.nb .vblk{position:relative;margin:6px 0 8px;width:190px;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(40,30,0,.35);cursor:pointer;background:#222;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nb .vblk video{display:block;width:100%;aspect-ratio:300/220;object-fit:cover;background:#222;pointer-events:none}
.nb .vblk.miss video{visibility:hidden}
.nb .vblk .vbadge{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.62);color:#fff;font:600 11px var(--ui);padding:3px 7px;border-radius:8px;display:flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums}
.nb .vblk .vpbtn{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:#1F4FC8}
.nb .vblk .vup{position:absolute;right:6px;top:6px;background:#fff;color:#1F4FC8;font:700 10.5px var(--ui);padding:3px 7px;border-radius:8px}
.nb .vblk .vup[hidden]{display:none}
.nb .vblk .vup.ok{color:#2E7D4F}
.nb .vblk .vbar{position:absolute;left:0;bottom:0;height:3px;background:#1F4FC8;width:0;transition:width .25s}

/* install first screen */
.center.inst{justify-content:flex-start;overflow-y:auto;padding:16px}
.instbox{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:360px;padding:8px 0}
.inst h1{font-size:26px;line-height:1.2}
.inst .logo{object-fit:contain;border-radius:0}
.inst .why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;font-size:14px;color:var(--ink2)}
.inst .why li{padding-left:22px;position:relative;line-height:1.35}
.inst .why li:before{content:"";position:absolute;left:4px;top:5px;width:6px;height:10px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.inst .btn{max-width:none;min-height:48px;font-size:17px}
.inst .btn[disabled]{opacity:.6;cursor:default}
.linkbtn{background:none;border:0;color:var(--blue);font:600 15px var(--font);min-height:44px;padding:0 12px;text-decoration:underline}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%;text-align:left;font-size:14.5px;line-height:1.4;color:var(--ink2)}
.steps li{display:flex;align-items:center;gap:10px;background:var(--blue-soft);border:1px solid var(--blue-edge);border-radius:12px;padding:10px 12px}
.steps .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.steps .si{flex:none;color:var(--blue)}
.inst .hint{font-size:13px;max-width:none}
.desk{width:100%;border:1px dashed var(--blue-edge);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px;font-size:14px;word-break:break-all}
.desk span{color:var(--blue);font-weight:600}
.note-box .steps{margin-top:8px}
.note-box+.btn{margin-top:10px}
@media (orientation:landscape) and (max-height:500px){.inst .logo{width:48px;height:48px}.inst h1{font-size:22px}}
.content>*{flex-shrink:0}
.content{background:var(--card)}
#app.editing .tabbar,#app.editing .homebar{display:none}
.scrim{z-index:1}
.sheet{z-index:2}
.viewer{z-index:2}
.homebar{z-index:3}
.fab{z-index:1}

/* first-run screens (docs/first-run-mockup.html, the phone on the left): the Welcome screen and the empty Files screen. Same rules as the mockup, under .fx */
.fx{--ui:'Figtree',system-ui,sans-serif;flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;color:#18202F;font-family:var(--ui)}
.fx .appbar{height:48px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px}.fx .appbar b{font-size:17px;font-weight:700}.fx .appbar img{width:26px;height:26px}
.fx .appbar small{font-size:11px;color:#5b6577}
.fx .stor{margin-left:auto;width:54px;height:6px;border-radius:3px;background:#DDE3EE;overflow:hidden}.fx .stor i{display:block;height:100%;background:#1F4FC8}
.fx .body{flex:1;min-height:0;overflow:auto;padding:8px 18px 18px;display:flex;flex-direction:column;gap:14px}.fx .body::-webkit-scrollbar{display:none}
.fx .body>*{flex-shrink:0}
.fx .body h4{font-size:22px;margin:6px 0 0;font-weight:700}.fx .body p{margin:0;font-size:14px;line-height:1.5;color:#3D4652}
.fx .acct{display:flex;gap:10px;align-items:center;border:1px solid #D5DBE7;border-radius:12px;padding:10px 12px;font-size:13px}
.fx .av{width:30px;height:30px;border-radius:50%;background:#1F4FC8;color:#fff;font:600 13px var(--ui);display:flex;align-items:center;justify-content:center;flex:none}
.fx .big{min-height:52px;border-radius:12px;border:1px solid #D5DBE7;background:#fff;font:600 15px var(--ui);color:#18202F;cursor:pointer;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}.fx .big.p{background:#1F4FC8;border-color:#1F4FC8;color:#fff}
.fx .opt{border:1px solid #D5DBE7;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}.fx .opt small{font-size:12.5px;line-height:1.45;color:#5b6577}
.fx .lnk{font-size:13px;color:#1F4FC8;text-align:center;font-weight:600;cursor:pointer;padding:8px}
.fx .ban{display:flex;gap:10px;align-items:flex-start;background:#EEF3FF;border:1px solid #C9D6F5;border-radius:12px;padding:12px;font-size:13px;line-height:1.45}.fx .ban b{display:block;font-size:14px;margin-bottom:2px}.fx .ban .x{margin-left:auto;border:0;background:transparent;font-size:18px;color:#5b6577;cursor:pointer;line-height:1;padding:1px 6px;font-family:Arial,sans-serif}
.fx .bt{min-height:40px;padding:0 14px;border-radius:8px;border:1px solid #C9D3E3;background:#fff;color:#1B1F24;font:600 13px var(--ui);cursor:pointer}.fx .bt.p{background:#1F4FC8;color:#fff;border-color:#1F4FC8}
.fx .empty{text-align:center;color:#5b6577;font-size:13.5px;line-height:1.5;padding:22px 10px;border:2px dashed #D5DBE7;border-radius:14px;background:none}.fx .empty b{display:block;color:#18202F;font-size:16px;margin-bottom:4px;font-weight:700}

/* Attach to note (docs/phone-attach-mockup.html, screens 3 to 5): the Files grid in picking mode, and a link to a library file inside the page. The Files grid itself is untouched: the picker only adds the tick circle. */
.pickov{position:absolute;inset:0;z-index:30;background:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.pickov .phint{flex:none;margin:0 14px 8px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.pickov .phint b{color:var(--ink)}
.pickov .content{padding-bottom:14px}
.pickov .pbar{flex:none;border-top:1px solid #E3E7F0;padding:10px 14px 14px;display:flex;align-items:center;gap:10px;background:#fff}
.pickov .pbar span{flex:1;font-size:13px;color:var(--muted)}
.pickov .pbar .btn{height:44px;min-height:44px;border-radius:12px;padding:0 18px;border-color:var(--blue)}
.pickov .pbar .btn[disabled]{opacity:.4}
.item.pk{position:relative;cursor:pointer}
.item.pk[aria-disabled=true]{cursor:default}
.item.pk .tk{position:absolute;right:6px;top:6px;z-index:1;width:24px;height:24px;border-radius:50%;border:2px solid #A9B3C6;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center}
.item.pk .tk svg{width:16px;height:16px;opacity:0}
.item.pk.sel{box-shadow:0 0 0 2px var(--blue)}
.item.pk.sel .tk{background:var(--blue);border-color:var(--blue)}
.item.pk.sel .tk svg{opacity:1}
.item.hi{box-shadow:0 0 0 3px var(--blue)}

.nb .fblk{position:relative;margin:6px 0 8px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.nb .fpic,.nb .fvid{width:min(190px,100%);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(40,30,0,.35);background:#222}
.nb .fpic{min-height:62px;background:#F2F4F7;color:#9AA3B0;display:flex;align-items:center;justify-content:center}
.nb .fpic svg{width:28px;height:28px}
.nb .fpic img{display:block;width:100%;height:auto}
.nb .fpic.miss img{display:none}
.nb .flnk{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font:700 10.5px var(--ui);padding:3px 7px;border-radius:8px}
.nb .fvid video{display:block;width:100%;aspect-ratio:300/220;object-fit:cover;background:#222;pointer-events:none}
.nb .fvid .vbadge{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.62);color:#fff;font:600 11px var(--ui);padding:3px 7px;border-radius:8px;display:flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums}
.nb .fvid .vpbtn{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:#1F4FC8}
.nb .fvid .flnk{bottom:auto;top:6px}
.nb .fcard{display:flex;align-items:center;gap:12px;padding:10px 12px;width:min(100%,260px);border-radius:12px;background:#fffdf4;box-shadow:0 2px 8px rgba(40,30,0,.3)}
.nb .fcard .fic{width:40px;height:44px;border-radius:8px;background:#EAF0FF;color:#1F4FC8;display:flex;align-items:center;justify-content:center;flex:none;font:700 10px var(--ui);overflow:hidden;position:relative}
.nb .fcard .fic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nb .fcard b{display:block;font:600 13.5px var(--ui);color:#18202F;word-break:break-all}
.nb .fcard small{display:block;font:500 12px var(--ui);color:#6b6540}
.nb .fcard.miss{background:#F6F0F0}.nb .fcard.miss .fic{background:#F3DEDC;color:#B3261E}
.nb .fcard.pc small{color:#8a8470}
.nb .fopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid #D5DBE7;border-radius:14px;background:#fff;padding:11px 12px;margin-bottom:8px;cursor:pointer;color:#18202F}
.nb .fopt:last-child{margin-bottom:0}
.nb .fopt b{display:block;font-size:15px}.nb .fopt small{font-size:12px;color:#5b6577}
.nb .fopt.dng{color:#C0392B}
.nb #shFile p{margin:0 0 12px;font-size:13px;color:#5b6577;line-height:1.45}
.nb #shFile h3{margin:0 0 4px;font-size:17px;overflow-wrap:anywhere}
.nb .menu button[hidden]{display:none}
.nb .cpm button[hidden],.nb .fopt[hidden]{display:none}
.nb .card,.nb .pic{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.nb #nbody>.lift{position:relative;z-index:5;opacity:.82;transition:none;pointer-events:none}
.nb .ndrop{position:absolute;height:3px;margin-top:-1.5px;border-radius:2px;background:#1F4FC8;box-shadow:0 0 0 2px rgba(31,79,200,.18);z-index:6;pointer-events:none}
.nb .ndrop[hidden]{display:none}
.nb .card.rowc.done{opacity:.55}
.nb .tx .np-lk{cursor:pointer}
.nb .lkpop{max-width:280px}
.nb .lkpop .lkaddr{padding:8px 10px 6px;font:500 12.5px var(--ui);color:#5b6577;overflow-wrap:anywhere;border-bottom:1px solid #E3E7F0;margin-bottom:4px}
.nb .fpic.on svg{display:none}
.pickov .appbar,.pickov .phint,.pickov .pbar,.pickov .pbar .btn{font-family:'Figtree',system-ui,sans-serif}
.pickov .appbar{padding:10px 14px 6px;gap:8px}
.pickov .appbar .name{font-size:19px;font-weight:700;letter-spacing:0;flex:1}
.pickov .appbar .back{color:#2b3447}
.pickov .phint,.pickov .phint b{color:#5b6577}
.pickov .pbar span{color:#5b6577}
.pickov .pbar .btn{border:0;background:#1F4FC8;color:#fff;font-size:14px;font-weight:600}
.nb .menu #mAttach{padding:11px 12px;font-weight:600}.nb .menu #mAttach svg{width:18px;height:18px}
.item.pk .nm{margin-right:26px}

/* ---------- the Calendar tab (docs/calendar-mockup.html, "Phone: Calendar tab"); the colours are the mockup's ---------- */
.tab{min-width:0;white-space:nowrap}
.calv{--accent:#3B4CC0;--accentSoft:#E7EAFB;--cline:#E2E6EC;--cline2:#D5DBE3;--cink2:#3D4652;--cink3:#5B6573;--alarm:#9A5B00;--alarmSoft:#FFF3DC;--alarmLine:#F0D49A;
  --google:#1E7A4C;--googleLine:#BFE0CD;--paper:#FBF1B0;--paperLine:#E6D98C;--hand:Caveat,"Segoe Print","Comic Sans MS",cursive;flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.calv .calbar{padding:14px 16px 10px}
.calv .calbar .name{font-size:20px}
.calv .calbar .name.dayt{font-size:17px;margin-left:4px}
.calv .calbar .sp{flex:1}
.calv .cbtn,#calsheet .cbtn{min-height:30px;padding:0 10px;border:1px solid var(--cline2,#D5DBE3);background:#fff;border-radius:8px;font:600 12px var(--font);color:var(--ink);display:inline-flex;align-items:center}
.calv .cib{width:32px;height:30px;border:0;background:transparent;color:var(--cink2);display:flex;align-items:center;justify-content:center;padding:0}
.calv .calbody{padding:0 14px 90px;gap:10px}
.pseg{display:flex;background:#F2F4F7;border-radius:10px;padding:3px;flex:none}
.pseg div{flex:1;text-align:center;font-size:13px;font-weight:600;padding:7px 0;border-radius:8px;color:var(--cink2)}
.pseg div.on{background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.pday{display:flex;flex-direction:column;gap:6px;flex:none}
.pday .d{font-size:13px;font-weight:700;color:var(--cink2)}
.pday .d.today{color:var(--accent)}
.pitem{display:flex;gap:10px;align-items:center;border:1px solid var(--cline);border-radius:12px;padding:9px 11px;font-size:13.5px;background:#fff;flex:none}
.pitem .t{font-size:12px;color:var(--cink3);width:60px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.pitem .w{flex:1;min-width:0;overflow-wrap:anywhere}
.pitem.al{background:var(--alarmSoft);border-color:var(--alarmLine)}
.pitem.go{border-color:var(--googleLine)}
.pitem.ev{background:#F7F8FE;border-color:#D6DBF6}
.pitem.ev.rose{background:#FDF3F5;border-color:#F2C9D3}.pitem.ev.green{background:#F3FAF6;border-color:#C9E6D5}.pitem.ev.amber{background:#FFF8EE;border-color:#F3D9B5}
.pitem.nt{background:var(--paper);border-color:var(--paperLine);font-family:var(--hand);font-size:18px}
.pitem.sh{border:1px dashed #9CCBB0;color:#1D5E3C}
.ro{font-size:10px;font-weight:700;color:#1E7A4C;border:1px solid #BFE0CD;border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:1px;white-space:nowrap;font-family:var(--font)}
.cempty{font-size:12.5px;color:var(--cink3);padding:2px 2px 6px}
.cmore{height:1px;flex:none}
.calv .cfab{background:var(--accent);bottom:16px;width:56px;height:56px;box-shadow:0 6px 16px rgba(59,76,192,.35)}
.mhead{display:flex;justify-content:space-between;align-items:center;flex:none}.mhead b{font-size:16px}
.mhead .nav{display:flex;gap:4px}.mhead .nav button{border:0;background:transparent;color:var(--cink3);font-size:20px;min-width:36px;min-height:32px;padding:0}
.pgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;flex:none}
.pgrid .w{font-size:11px;color:var(--cink3);font-weight:600;padding:4px 0}
.pgrid .c{height:42px;font-size:13px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:4px;box-sizing:border-box}
.pgrid .c.out{color:#B3BAC5}
.pgrid .c.today b{background:var(--accent);color:#fff;border-radius:999px;padding:0 6px}
.pgrid .c.sel{background:var(--accentSoft)}
.dots{display:flex;gap:2px}.dots i{width:5px;height:5px;border-radius:50%}
.calv .paper{background:var(--paper);border-radius:8px;padding:8px 12px 10px 26px;font-family:var(--hand);font-size:18px;line-height:28px;color:#2B2A20;background-image:repeating-linear-gradient(transparent 0 27px,var(--paperLine) 27px 28px);position:relative;box-shadow:0 1px 3px rgba(0,0,0,.08);flex:none;overflow-wrap:anywhere}
.calv .paper::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:1px;background:#E79B8C}
.calv .paper .ph{opacity:.55}
.calv .grp{display:flex;flex-direction:column;gap:6px;flex:none}
.calv .gh{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cink3)}
.calv .gcal{font:600 12.5px var(--font);color:#1E7A4C;background:none;border:0;padding:2px 0;text-align:left;align-self:flex-start}
.calv .sres{display:flex;flex-direction:column;gap:6px}
.calv .sr{display:grid;grid-template-columns:110px 1fr;gap:8px;border:1px solid var(--cline);border-radius:12px;padding:9px 11px;font-size:13.5px}
.calv .sr b{font-size:12px;color:var(--cink3)}.calv .sr small{display:block;color:var(--cink3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#calsheet{position:absolute;inset:0;z-index:40}
#calsheet .dim{position:absolute;inset:0;background:rgba(20,25,35,.35)}
#calsheet .csheet{gap:7px;padding:8px 14px 14px;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
#calsheet .grab{width:40px;height:4px;background:#D0D5DD;border-radius:4px;margin:0 auto 4px;flex:none}
#calsheet .sht{font-size:17px}
#calsheet .sub{font-size:12.5px;color:#5B6573}
#calsheet .f{display:flex;flex-direction:column;gap:4px;min-width:0}
#calsheet .f label{font-size:11.5px;color:#5B6573;font-weight:600}
#calsheet .in{border:1px solid #D5DBE3;border-radius:10px;padding:7px 10px;font:13.5px var(--font);color:var(--ink);background:#fff;min-height:36px;box-sizing:border-box;width:100%;min-width:0;-webkit-user-select:text;user-select:text}
#calsheet .in:disabled{background:#F2F4F7;color:#9AA3B0}
#calsheet .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#calsheet .chips{display:flex;gap:6px;flex-wrap:wrap}
#calsheet .chips span{font-size:11.5px;border:1px solid #D5DBE3;border-radius:999px;padding:3px 8px;cursor:pointer}
#calsheet .chips span.on{background:#3B4CC0;border-color:#3B4CC0;color:#fff}
#calsheet .chips.cols span{width:24px;height:24px;padding:0;box-sizing:border-box}
#calsheet .chips.cols span.on{border:2px solid #1B1F24;background-clip:padding-box}
#calsheet .calld{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#3D4652}
#calsheet .tzline{font-size:11.5px;color:#5B6573;background:#F7F8FA;border-radius:8px;padding:6px 8px}
#calsheet .cerr{font-size:12px;color:#A12C2C;min-height:0}
#calsheet .sbtns{display:flex;gap:8px}
#calsheet .sbtns .btn{flex:1;min-height:40px;font-size:13px;border-color:#D5DBE3;color:var(--ink)}
#calsheet .sbtns .btn.p{background:#3B4CC0;border-color:#3B4CC0;color:#fff}
#calsheet .btn.full{min-height:42px;font-size:13.5px}
#calsheet .btn.danger{border-color:#E5B5B5;color:#A12C2C}
#calsheet .ro{font-size:10px}
.gcalset{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px}.gcalset h4{margin:0 0 8px;font-size:14px}
.gcalset .set .s.gcl{gap:8px}.gcalset .gcl .search{min-height:40px;font-size:13px;min-width:0;flex:1}
.gcalset .gcst{font-size:12.5px;line-height:1.4}.gcalset .gcst.ok{color:#1D5E3C}.gcalset .gcst.bad{color:#A12C2C}
.gcalset .s.dis{color:#9AA3B0}.later{font-size:10px;font-weight:700;background:#F2F4F7;color:#5B6573;border-radius:999px;padding:2px 7px;margin-left:4px}