*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font-ui)}
h1,h2,h3{font-family:var(--font-display);margin:0 0 .4em;letter-spacing:-.01em} h1{font-size:28px} h2{font-size:20px} h3{font-size:16px}
a{color:var(--link)} .hide{display:none!important} .mut{color:var(--text-muted);font-size:14px} .err{color:#B42318;font-size:14px;min-height:1.2em}
button,.btn{font:600 14px var(--font-ui);border:0;border-radius:var(--radius-sm);padding:10px 16px;cursor:pointer;background:var(--primary);color:var(--on-primary);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
button:hover{background:var(--primary-hover)} button:disabled{opacity:.45;cursor:not-allowed} button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)} button.ghost:hover{background:var(--fn-mist)}
button.danger{background:transparent;color:#B42318;border:1px solid #F3C7C2} button.danger:hover{background:#FDECEA} button.link{background:none;color:var(--link);padding:4px}
input,select,textarea{font:15px var(--font-ui);padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);width:100%} input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
label{display:block;font-weight:500;font-size:14px;margin:12px 0 4px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}
.auth{max-width:400px;margin:8vh auto;padding:0 16px} .auth .card{padding:28px} .auth img{height:40px;margin-bottom:24px}
.or{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:13px;margin:16px 0} .or:before,.or:after{content:"";flex:1;border-top:1px solid var(--border)}
.gbtn{width:100%;justify-content:center;background:#fff;color:var(--text);border:1px solid var(--border)} .gbtn:hover{background:var(--fn-paper)}
.sp{flex:1}

.bar{height:6px;background:var(--fn-mist);border-radius:4px;margin:10px 0 4px;overflow:hidden} .bar i{display:block;height:100%;background:var(--primary)}
.pill{font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--fn-mist);color:var(--text)} .pill.online{background:#DDF3EF;color:var(--fn-teal-deep)} .pill.offline{background:#EEF0F1;color:#5B6870} .pill.full,.pill.readonly{background:#FDECEA;color:#B42318} .pill.almost_full{background:#FFF4DB;color:#8A5A00}
.empty{text-align:center;padding:48px 20px} .empty .big{font-size:40px}
.zone{border:2px dashed var(--border);border-radius:var(--radius-md);padding:22px;text-align:center;color:var(--text-muted);margin:16px 0;background:var(--surface)}
.rows .r{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border)} .rows .r:last-child{border:0} .rows .r .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rows .r .n.dir{cursor:pointer;font-weight:500}
.crumbs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:15px} .crumbs button{padding:4px 6px}
.uploads{position:fixed;right:20px;bottom:20px;width:340px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 30px #12223022;padding:14px;max-height:50vh;overflow:auto}
.up{margin:8px 0;font-size:14px} .up .bar i{background:var(--fn-volt)} .up.done .bar i{background:var(--primary)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--fn-ink);color:#fff;padding:10px 18px;border-radius:99px;font-size:14px;z-index:9}
dialog{border:0;border-radius:var(--radius-md);padding:24px;max-width:420px;box-shadow:0 20px 60px #12223040} dialog::backdrop{background:#12223066} .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:760px){.two{grid-template-columns:1fr}}
.code{font:600 13px ui-monospace,monospace;word-break:break-all;background:var(--fn-paper);padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border)}
.lock{background:#FFF8E1;border:1px solid #F5DFA0;border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;margin-bottom:12px}
.preview{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;height:440px} .preview iframe{width:100%;height:100%;border:0}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .plans label{margin:0;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;cursor:pointer;font-weight:400} .plans label.on{border-color:var(--primary);background:#E8F6F4} .plans input{width:auto;margin-right:6px}
.ico{display:inline-block;vertical-align:-0.2em;flex:none;color:var(--fn-teal-deep,#0f766e);opacity:.85;margin-right:6px}
h2 .ico{vertical-align:-0.15em}.empty .big .ico{margin:0;opacity:.6}
.hint{font-size:12px;margin:4px 0 10px}

/* 0.12.0 Drive-style shell */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;height:64px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.top .logo{height:28px;width:216px;object-fit:contain;object-position:left;padding-left:8px}
.iconbtn{background:none;color:var(--text);padding:8px;border-radius:50%;display:none} .iconbtn:hover{background:var(--fn-mist)}
.search{flex:1;max-width:720px;display:flex;align-items:center;gap:10px;background:var(--fn-mist);border-radius:99px;padding:0 18px;height:46px;color:var(--text-muted);margin:0;font-weight:400}
.search:focus-within{background:#fff;box-shadow:0 1px 6px #12223026} .search input{border:0;background:none;padding:0;height:100%;outline:none!important;font-size:15px}
.acct{margin-left:auto;position:relative} .avatar{width:36px;height:36px;border-radius:50%;padding:0;justify-content:center;background:var(--fn-teal-deep,#0b6b60);color:#fff;font-size:15px}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px #12223024;padding:6px 0;z-index:20}
.mhead{padding:10px 16px 12px;border-bottom:1px solid var(--border);margin-bottom:4px;display:flex;flex-direction:column} .mhead .mut{font-size:12px;word-break:break-all}
.mi{display:flex;width:100%;background:none;color:var(--text);border-radius:0;padding:10px 16px;font-weight:500} .mi:hover{background:var(--fn-mist)} .mi.bad{color:#B42318} .mi.bad:hover{background:#FDECEA}
.shell{display:flex;min-height:calc(100vh - 64px)}
.side{width:248px;flex:none;padding:12px 12px 16px 8px;display:flex;flex-direction:column;position:sticky;top:64px;height:calc(100vh - 64px);background:var(--bg)}
.newwrap{position:relative;margin:4px 0 16px 8px} .newwrap .menu{left:0;right:auto}
.newbtn{background:var(--surface);color:var(--text);padding:14px 22px 14px 16px;border-radius:16px;box-shadow:0 1px 3px #12223030,0 4px 8px #1222300f;font-size:15px;gap:10px} .newbtn:hover{background:#E8F6F4;box-shadow:0 2px 6px #12223030}
.side nav{display:flex;flex-direction:column;gap:2px} .side nav button{background:none;color:var(--text);justify-content:flex-start;padding:9px 16px;border-radius:99px;font-weight:500} .side nav button .ico{color:var(--text-muted);margin-right:10px}
.side nav button:hover{background:var(--fn-mist)} .side nav button.on{background:#DDF3EF;color:var(--fn-teal-deep);font-weight:600} .side nav button.on .ico{color:var(--fn-teal-deep)}
.usage{margin-top:auto;padding:0 16px} .usage .bar{height:4px;margin:6px 0}
main{flex:1;min-width:0;max-width:1180px;padding:20px 28px 80px;background:var(--surface);border-radius:16px 0 0 0;border:1px solid var(--border);border-width:1px 0 0 1px}
.hrow{display:flex;align-items:center;gap:12px} .hrow h1{font-size:24px;margin:0}
.seg{display:flex;border:1px solid var(--border);border-radius:99px;overflow:hidden} .seg button{background:none;color:var(--text-muted);padding:7px 14px;border-radius:0} .seg button.on{background:#DDF3EF;color:var(--fn-teal-deep)}
.devsec{margin-top:22px} .devhead{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--text-muted)} .devhead h2{margin:0;font:600 15px var(--font-ui);color:var(--text)} .devhead .ico{margin:0}
.dot{width:8px;height:8px;border-radius:50%;background:#A3ADB3} .dot.on{background:#1BB07A;box-shadow:0 0 0 3px #1BB07A26}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.drive{position:relative;background:var(--fn-paper,#F7F9F8);border:1px solid var(--border);border-radius:12px;padding:12px 12px 14px 16px;cursor:pointer;transition:background .12s,box-shadow .12s;display:flex;flex-direction:column;gap:2px}
.drive:hover{background:#EEF3F2;box-shadow:0 1px 4px #1222301f} .drive:focus-visible{outline:2px solid var(--focus)} .drive.drop{border:2px dashed var(--primary);background:#E8F6F4}
.dtop{display:flex;align-items:center;gap:10px;min-height:36px} .dtop .ico{margin:0;color:var(--fn-teal-deep)} .dtop .nm{flex:1;min-width:0;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drive .pill{align-self:flex-start;margin-top:8px} .sm{font-size:13px} .nodrv{padding:8px 2px}
.kwrap{position:relative;flex:none} .kebab{background:none;color:var(--text-muted);padding:7px;border-radius:50%} .kebab:hover{background:#12223014;color:var(--text)}
.grid.list{grid-template-columns:1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:visible}
.grid.list .drive{flex-direction:row;align-items:center;gap:16px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;padding:6px 8px 6px 16px} .grid.list .drive:last-child{border:0}
.grid.list .drive:hover{background:var(--fn-mist);box-shadow:none} .grid.list .dtop{flex:1;min-width:0;order:0} .grid.list .dmeta{width:220px;order:1} .grid.list .dmeta .bar{margin:2px 0} .grid.list .pill{margin:0;order:2} .grid.list .kwrap{order:3}
.grid.list .dtop .kwrap{display:none}
.ftable{padding:0 8px} .ftable .r{display:grid;grid-template-columns:minmax(0,1fr) 130px 100px 200px;gap:12px;padding:6px 8px;min-height:48px}
.ftable .r:not(.th):hover{background:var(--fn-mist)} .ftable .th{font-size:13px;font-weight:600;color:var(--text-muted);min-height:40px} .ftable .c-a{display:flex;gap:6px;justify-content:flex-end;opacity:.0;transition:opacity .1s} .ftable .r:hover .c-a,.ftable .c-a:focus-within{opacity:1}
button.sm{padding:6px 12px;font-size:13px}
.scrim{position:fixed;inset:0;background:#12223040;z-index:9}
@media(max-width:860px){.iconbtn{display:inline-flex}.top{gap:8px;padding:0 8px}.top .logo{width:auto;height:24px;padding:0}
 .side{position:fixed;left:0;top:0;height:100vh;z-index:10;background:var(--surface);box-shadow:0 0 30px #12223030;transform:translateX(-105%);transition:transform .2s;padding-top:20px}.side.open{transform:none}
 main{border-radius:0;border-width:1px 0 0;padding:16px 14px 80px}.ftable .r{grid-template-columns:minmax(0,1fr) 80px}.ftable .c-m{display:none}.ftable .c-a{grid-column:1/-1;opacity:1;justify-content:flex-start}.ftable .th .c-a{display:none}
 .grid.list .dmeta{width:110px}}
@media(max-width:520px){.top .logo{display:none}.search{height:42px;padding:0 14px}.grid.list .dmeta{display:none}}
.devhead h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .devhead .dot{flex:none} @media(max-width:520px){.devhead>.mut{display:none}}

/* 0.13.0 drives screen (Penny's ideas 1-5). Palette only: Ink #122230, Teal #0E9F8E, Teal deep #0B6F66, Volt #C6F432, Mist #DCE5E3, Paper #F5F7F6; teal tint #DDF3EF. */
body{font-variant-numeric:tabular-nums}
.kbd{font:500 11px var(--font-ui);color:var(--text-muted);border:1px solid var(--border);background:#fff;border-radius:6px;padding:2px 6px;flex:none}
.search:focus-within .kbd{display:none}
.newbtn{background:var(--fn-ink);color:#fff;border-radius:99px;padding:12px 22px 12px 16px;box-shadow:0 2px 8px #12223030} .newbtn:hover{background:#1c3344} .newbtn .vplus{color:var(--fn-volt)}
.side nav button.on{background:#DDF3EF;color:var(--fn-teal-deep)}
.shead{font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:22px 16px 6px}
.pc{display:flex;align-items:center;gap:10px;width:100%;background:none;color:var(--text);justify-content:flex-start;padding:7px 16px;border-radius:99px;font-weight:500;font-size:14px} .pc:hover{background:var(--fn-mist)}
.pc .dot{flex:none} .pc .dot.on{background:var(--fn-teal);box-shadow:0 0 0 3px #0E9F8E2e} .pcn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcadd{margin:4px 16px;font-size:13px}
.dwrap{display:flex;gap:24px;align-items:flex-start} .dmain{flex:1;min-width:0}
.rail{width:340px;flex:none;background:var(--fn-paper);border-radius:16px;padding:18px 18px 22px;position:sticky;top:84px}
.rhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .rhd h3{margin:0;font:600 15px var(--font-ui)} .rhd .link{font-size:13px}
.ri{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)} .ri:last-child{border:0}
.rt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px} .rt b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft{flex:none;width:36px;height:36px;border-radius:9px;background:var(--fn-ink);color:var(--fn-volt);font:700 10px var(--font-ui);display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.ft .ico{margin:0;color:var(--fn-volt);opacity:1} .ft.lnk{background:var(--fn-teal)} .ft.lnk .ico{color:#fff} .ft.fold{background:#DDF3EF} .ft.fold .ico{color:var(--fn-teal-deep)}
.bar.live{height:5px;margin:6px 0 0} .bar.live i{background:var(--fn-volt)}
.rempty{font-size:13px;margin:6px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.chip{background:#fff;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:8px 14px;font:500 13px var(--font-ui);gap:8px} .chip:hover{background:#DDF3EF;border-color:#DDF3EF} .chip .ico{color:var(--fn-teal);margin:0;opacity:1}
.drive.hero{background:#fff;border-radius:16px;padding:16px 18px 16px;overflow:hidden;box-shadow:0 1px 2px #1222300d}
.drive.hero:before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 22px 22px 0;border-color:transparent var(--fn-volt) transparent transparent}
.drive.hero .dtop .kwrap{margin-right:12px}
.free{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px} .free b{font:700 34px/1.1 var(--font-display);letter-spacing:-.02em}
.drive.hero .bar{height:8px;background:var(--fn-mist);margin:10px 0 2px} .drive.hero .bar i{background:var(--fn-teal)} .drive.hero.warn .bar i{background:#E3A008}
.dfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px} .drive.hero .dfoot .pill{margin:0}
.dz{border:2px dashed #0E9F8E66;background:#F3FBF9;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:22px;min-height:170px;cursor:pointer;color:var(--fn-teal-deep)}
.dz b{font:600 17px var(--font-display);color:var(--text)} .dz .ico{margin:0 0 4px;color:var(--fn-teal)} .dz.drop,.dz:hover{background:#DDF3EF;border-color:var(--fn-teal)} .dz:focus-visible{outline:2px solid var(--focus)}
.grid.list .dz{display:none} .grid.list .drive.hero:before{display:none} .grid.list .free b{font-size:18px} .grid.list .dfoot{margin:0}
.rh{font:600 14px var(--font-ui);margin:26px 0 10px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.rf{display:flex;align-items:center;gap:10px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 14px;justify-content:flex-start;font-weight:500;text-align:left} .rf:hover{background:var(--fn-paper)}
.rf .ico{margin:0;color:var(--fn-teal-deep)} .rf .rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rf .sm{flex:none}
#trList .ri,#shList .ri{padding:12px 6px} .danger-t{color:#B42318}
#askIn{width:100%}
@media(max-width:1199px){.rail{display:none}}
@media(max-width:520px){.kbd{display:none}.chip{padding:7px 10px}.free b{font-size:28px}}
@media(min-width:1200px){main{max-width:1560px}}
.rf .rn{flex:0 1 auto} .rf .sm{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}

/* 0.14.0 two-step verification */
.codein{font-size:22px;letter-spacing:.2em;text-align:center;font-variant-numeric:tabular-nums}
dialog.tfa{max-width:460px;width:calc(100% - 32px)} .tfa .qr{display:flex;gap:18px;align-items:center;margin:14px 0} .tfa .qr img{width:168px;height:168px;border:1px solid #e3e7ec;border-radius:12px;padding:6px;background:#fff}
.tfa .mkey{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all;background:#f4f6f8;border-radius:8px;padding:8px 10px;display:block;margin-top:6px;user-select:all}
.tfa .codes{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-family:ui-monospace,Menlo,monospace;font-size:15px;background:#f4f6f8;border-radius:10px;padding:14px 18px;margin:12px 0}
.tfa .on{display:inline-flex;align-items:center;gap:6px;color:#127a3c;font-weight:600}
.tfa ol{padding-left:20px;margin:8px 0;line-height:1.5}

/* 0.15.0 transfer time + send us stuff */
.spd .shd{display:flex;align-items:baseline;justify-content:space-between} .spd .shd h3{margin:0}
.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 10px} .meter{background:var(--fn-paper);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column}
.meter b{font:700 32px/1.15 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#spBar{height:5px;margin:4px 0 8px} #spBar i{transition:width .3s}
#spGo{margin-top:6px;gap:8px} #spGo .ico{margin:0}
.est{display:flex;flex-direction:column;gap:8px;margin:14px 0} .er{display:flex;align-items:center;gap:10px;background:var(--fn-paper);border-radius:12px;padding:12px 14px}
.er .ico{margin:0;color:var(--fn-teal-deep)} .er span:nth-child(2){flex:1} .er b{font:700 20px var(--font-display);font-variant-numeric:tabular-nums}
.sm{font-size:13px}
dialog.drop{max-width:520px} dialog.drop label{display:block;margin-top:10px} dialog.drop .acts{margin-top:16px}
#drList .ri{padding:12px 6px}

/* 0.15.1 Penny icon set */
:root{--fy-accent:#0E9F8E;--fy-fill:#0E9F8E;--fy-hi:#C6F432;--fy-bg:#fff}
@media(prefers-color-scheme:dark){:root{--fy-accent:#3FD1BF;--fy-fill:#3FD1BF}}
[data-theme=dark]{--fy-accent:#3FD1BF;--fy-fill:#3FD1BF}
.fy-i{color:#122230;opacity:1} .side nav button .fy-i{color:#122230} .side nav button.on .fy-i{color:#122230}
.devhead{--fy-bg:var(--bg,#F6F8F7)} .card{--fy-bg:#fff}
.ft.fi{background:none} .ft.fi .ico{color:#122230}
.ft.lnk .fy-i{color:#fff;--fy-fill:#fff;--fy-accent:#C6F432}

.stg{border:1px dashed var(--border);border-radius:10px;padding:8px 10px;margin:8px 0} .stt{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:8px} .rm{font-size:14px;padding:0 4px}