:root{
  --bg:#f5f5f7;
  --bg-elevated:rgba(255,255,255,.72);
  --card:rgba(255,255,255,.86);
  --card-solid:#ffffff;
  --text:#1d1d1f;
  --text-dim:#6e6e73;
  --text-faint:#a1a1a6;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.12);
  --blue:#0071e3;
  --blue-2:#0077ED;
  --green:#34c759;
  --red:#ff3b30;
  --orange:#ff9500;
  --purple:#af52de;
  --pink:#ff2d55;
  --teal:#5ac8fa;
  --indigo:#5856d6;
  --yellow:#ffcc00;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 8px 30px rgba(0,0,0,.10);
  --shadow-lg:0 20px 60px rgba(0,0,0,.18);
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --radius-xl:28px;
  --ease:cubic-bezier(.22,.9,.32,1.04);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --bg-elevated:rgba(28,28,30,.72);
    --card:rgba(28,28,30,.82);
    --card-solid:#1c1c1e;
    --text:#f5f5f7;
    --text-dim:#98989d;
    --text-faint:#636366;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.14);
    --blue:#0A84FF;
    --blue-2:#409CFF;
    --green:#30D158;
    --red:#FF453A;
    --orange:#FF9F0A;
    --purple:#BF5AF2;
    --pink:#FF375F;
    --teal:#64D2FF;
    --indigo:#5E5CE6;
    --yellow:#FFD60A;
    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    --shadow-md:0 8px 30px rgba(0,0,0,.45);
    --shadow-lg:0 24px 70px rgba(0,0,0,.55);
  }
}

.accent-blue{--accent:var(--blue);}
.accent-purple{--accent:var(--purple);}
.accent-pink{--accent:var(--pink);}
.accent-orange{--accent:var(--orange);}
.accent-green{--accent:var(--green);}
.accent-teal{--accent:var(--teal);}
.accent-indigo{--accent:var(--indigo);}
.accent-yellow{--accent:var(--yellow);}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;color:inherit;}
img,svg{display:block;}
a{color:inherit;text-decoration:none;}

::selection{background:var(--blue);color:#fff;}

.icon{width:20px;height:20px;flex:none;}
.icon-sm{width:16px;height:16px;}
.icon-lg{width:28px;height:28px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 20px;border-radius:100px;font-size:14.5px;font-weight:590;
  transition:transform .18s var(--ease),background .2s var(--ease-out),opacity .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-2);}
.btn-primary:disabled{opacity:.4;pointer-events:none;}
.btn-secondary{background:rgba(120,120,128,.12);color:var(--text);}
.btn-secondary:hover{background:rgba(120,120,128,.18);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{opacity:.88;}
.btn-text{color:var(--blue);padding:11px 14px;}
.btn-text:hover{opacity:.7;}
.btn-icon{
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(120,120,128,.12);transition:background .2s var(--ease-out),transform .18s var(--ease);
}
.btn-icon:hover{background:rgba(120,120,128,.2);}
.btn-icon:active{transform:scale(.92);}
.btn-icon.danger:hover{background:rgba(255,59,48,.14);color:var(--red);}

/* ============ INPUTS ============ */
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:7px;letter-spacing:.01em;}
.field input[type="text"],
.field input[type="password"],
.field input[type="number"]{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line-strong);
  background:rgba(120,120,128,.07);color:var(--text);font-size:15.5px;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s;
}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.15);background:var(--card-solid);}
.field-hint{font-size:12.5px;color:var(--text-faint);margin-top:6px;}
.field-error input{border-color:var(--red);}
.field-error .field-hint{color:var(--red);}

/* ============ TOAST ============ */
.toast-stack{position:fixed;left:50%;bottom:28px;translate:-50% 0;z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:100px;
  background:rgba(29,29,31,.92);backdrop-filter:blur(20px) saturate(180%);color:#fff;font-size:13.5px;font-weight:560;
  box-shadow:var(--shadow-lg);animation:toast-in .5s var(--ease) both;
}
.toast.leaving{animation:toast-out .3s var(--ease-out) forwards;}
.toast .icon{color:var(--green);}
.toast.error .icon{color:var(--red);}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.94);}}

/* ============ MODAL / SHEET ============ */
.modal-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.32);backdrop-filter:blur(6px);z-index:400;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out);
}
.modal-scrim.is-open{opacity:1;pointer-events:auto;}
.modal{
  position:fixed;top:50%;left:50%;z-index:401;width:min(420px,90vw);
  background:var(--card-solid);border-radius:var(--radius-l);box-shadow:var(--shadow-lg);
  padding:28px;opacity:0;pointer-events:none;
  transform:translate(-50%,-46%) scale(.94);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.modal.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.modal-icon{
  width:52px;height:52px;border-radius:16px;background:rgba(0,113,227,.12);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.modal h2{font-size:19px;font-weight:650;margin-bottom:6px;letter-spacing:-.01em;}
.modal p.modal-sub{font-size:13.5px;color:var(--text-dim);margin-bottom:22px;line-height:1.5;}
.modal-actions{display:flex;gap:10px;margin-top:22px;}
.modal-actions .btn{flex:1;}

.alert{width:min(340px,88vw);padding:24px 24px 18px;text-align:center;}
.alert h2{font-size:16.5px;}
.alert p.modal-sub{margin-bottom:18px;}
.alert .modal-actions{flex-direction:column-reverse;gap:0;}
.alert .modal-actions .btn{width:100%;border-radius:0;padding:13px;font-size:15.5px;}
.alert .modal-actions{margin:16px -24px -18px;border-top:1px solid var(--line);}
.alert .modal-actions .btn:first-child{border-top:1px solid var(--line);}
.alert .modal-actions .btn-danger{background:none;color:var(--red);font-weight:600;}
.alert .modal-actions .btn-secondary{background:none;color:var(--blue);font-weight:400;border-radius:0 0 var(--radius-l) var(--radius-l);}

/* ============ QUOTA BAR ============ */
.quota-bar{
  height:6px;border-radius:100px;background:rgba(120,120,128,.16);overflow:hidden;position:relative;
}
.quota-bar-fill{
  height:100%;border-radius:100px;background:var(--accent,var(--blue));
  transition:width .6s var(--ease),background .4s;
}
.quota-bar-fill.warn{background:var(--orange);}
.quota-bar-fill.full{background:var(--red);}

.quota-bar-lg{height:10px;}

/* segmented total storage bar */
.seg-bar{
  height:14px;border-radius:100px;background:rgba(120,120,128,.14);overflow:hidden;display:flex;
  box-shadow:inset 0 0 0 1px var(--line);
}
.seg-bar-seg{height:100%;transition:width .7s var(--ease);background:var(--accent,var(--blue));}
.seg-bar-seg:first-child{border-radius:100px 0 0 100px;}

/* ============ MISC ============ */
.spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}