:root{
  --bg:#070c18;
  --bg-2:#0a1120;
  --surface:rgba(12,21,38,.82);
  --surface-solid:#0d1728;
  --surface-2:#111d31;
  --border:#1b3151;
  --border-bright:#29476e;
  --text:#f7f9ff;
  --text-secondary:#a8b6cd;
  --text-muted:#64738d;
  --accent1:#3b82f6;
  --accent2:#6366f1;
  --accent3:#a855f7;
  --success:#22c55e;
  --gradient:linear-gradient(135deg,#3b82f6 0%,#6366f1 52%,#a855f7 100%);
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh;background:radial-gradient(circle at 72% 18%,rgba(48,91,180,.13),transparent 30%),radial-gradient(circle at 28% 45%,rgba(91,61,190,.08),transparent 32%),var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;letter-spacing:-.01em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 75%)}

a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}
svg{display:block}

.logo-big{width:62px;height:72px}.logo-scene{width:92px;height:108px}

.topbar{position:sticky;top:0;z-index:20;background:rgba(7,12,24,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(50,79,118,.32)}
.topbar-inner{max-width:1320px;margin:0 auto;min-height:76px;padding:14px 28px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:190px}.wordmark{font-size:23px;font-weight:700;letter-spacing:-.04em}.wordmark strong{font-weight:800}.wordmark span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.mainnav{display:flex;gap:26px;flex:1}.mainnav a{color:#7f8ea8;font-size:13px;font-weight:600;transition:.18s}.mainnav a:hover,.mainnav a.active{color:#fff}
.search{width:min(310px,28vw);position:relative}.search svg{position:absolute;left:14px;top:50%;width:17px;height:17px;transform:translateY(-50%);fill:none;stroke:#6f809d;stroke-width:1.7;stroke-linecap:round}.search input{width:100%;height:40px;padding:0 14px 0 40px;color:#fff;background:rgba(14,27,48,.75);border:1px solid #1d3558;border-radius:12px;outline:none}.search input:focus{border-color:#3976c7;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.search input::placeholder{color:#61718b}
.icon-button{width:40px;height:40px;border-radius:12px;border:1px solid transparent;background:transparent;color:#b4c1d7;display:grid;place-items:center}.icon-button:hover{background:#0e1a2d;border-color:#203858}.icon-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.mobile-nav-toggle{
  display:none;width:40px;height:40px;border-radius:12px;
  border:1px solid transparent;background:transparent;color:#b4c1d7;
  font-size:19px;line-height:1;cursor:pointer;
}
.mobile-nav-toggle:hover{background:#0e1a2d;border-color:#203858}
.mobile-nav-drawer{
  display:flex;flex-direction:column;
  position:absolute;top:100%;left:0;right:0;
  background:#0a1526;border-bottom:1px solid #1b3556;
  box-shadow:0 20px 40px rgba(0,0,0,.4);
  padding:8px;gap:2px;z-index:39;
}
.mobile-nav-drawer[hidden]{display:none}
.mobile-nav-drawer a{
  padding:13px 14px;border-radius:10px;color:#dbe6f7;
  font-size:14px;font-weight:600;text-decoration:none;
}
.mobile-nav-drawer a:hover,.mobile-nav-drawer a.active{background:#152743;color:#fff}
.connect-button{height:40px;padding:0 19px;border-radius:12px;background:var(--gradient);color:#fff;border:0;font-size:13px;font-weight:700;box-shadow:0 10px 28px rgba(78,76,225,.2);display:inline-flex;align-items:center;gap:8px}

main{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:26px 28px 90px}.view{min-width:0}
.trust-strip{display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;padding:10px 0 28px;border-bottom:1px solid rgba(44,67,98,.34)}.trust-item{display:flex;flex:1 1 0;align-items:center;gap:11px;min-width:0}.trust-icon{width:38px;height:38px;border:1px solid #23436b;border-radius:12px;background:rgba(11,27,49,.65);display:grid;place-items:center;color:#55a0ff}.trust-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.trust-item b{display:block;font-size:12px;font-weight:700}.trust-item small{display:block;color:#71819b;font-size:11px;margin-top:3px}

.hero{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center;padding:68px 0 72px}.hero-copy{padding-left:34px}.eyebrow{display:inline-block;color:#63a8ff;font-size:10px;font-weight:800;letter-spacing:.18em;margin-bottom:14px}.hero-copy h1{font-size:clamp(46px,5vw,72px);line-height:.98;letter-spacing:-.065em;font-weight:800;margin-bottom:23px}.grad-text{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{max-width:535px;color:#a8b6cd;font-size:16px;line-height:1.7;margin-bottom:28px}.hero-actions{display:flex;gap:12px;align-items:center}.btn{min-height:44px;padding:0 21px;border-radius:13px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-size:13px;font-weight:700;transition:transform .16s,opacity .16s,border-color .16s,background .16s}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--gradient);box-shadow:0 13px 35px rgba(73,85,236,.22)}.btn-primary:hover{opacity:.94}.btn-outline{background:rgba(8,18,34,.62);border-color:#31527b;color:#dbe6f7}.btn-outline:hover{border-color:#557bab;background:#0e1c31}.btn-ghost{background:#0d192b;border-color:#28415f}.btn-pay{width:100%;height:48px;background:var(--gradient);font-size:14px}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.full{width:100%;margin-top:10px}.pay-icon{font-size:19px;line-height:1}
.hero-meta{display:flex;flex-wrap:wrap;gap:17px;margin-top:22px;color:#71819b;font-size:11px}.hero-meta i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3b82f6;margin-right:6px;box-shadow:0 0 9px rgba(59,130,246,.7)}

.hero-visual{position:relative;min-height:430px;overflow:hidden;border:1px solid #29486d;border-radius:28px;background:linear-gradient(145deg,rgba(14,28,50,.92),rgba(7,15,29,.92));box-shadow:inset 0 1px rgba(255,255,255,.04),0 28px 90px rgba(0,0,0,.25);cursor:pointer}.hero-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 48% 43%,rgba(67,117,255,.19),transparent 33%),linear-gradient(135deg,transparent 35%,rgba(83,54,187,.08) 60%,transparent 80%)}.hero-visual:after{content:"";position:absolute;left:10%;right:10%;bottom:17%;height:1px;background:linear-gradient(90deg,transparent,#2c4e7b,transparent);transform:perspective(160px) rotateX(65deg)}
.orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.orb-a{width:190px;height:190px;right:-80px;top:-80px;background:radial-gradient(circle,rgba(77,133,255,.2),transparent 68%)}.orb-b{width:170px;height:170px;left:-90px;bottom:-80px;background:radial-gradient(circle,rgba(168,85,247,.16),transparent 68%)}
.folder-scene{position:absolute;left:50%;top:47%;width:320px;height:220px;transform:translate(-50%,-50%);filter:drop-shadow(0 22px 28px rgba(0,0,0,.35))}.folder{position:absolute;left:50%;bottom:25px;width:220px;height:148px;border:1px solid #416db1;border-radius:14px 14px 9px 9px;transform:translateX(-50%) skewY(-4deg);background:linear-gradient(145deg,rgba(42,83,151,.38),rgba(26,34,87,.22));box-shadow:inset 0 1px rgba(255,255,255,.08)}.folder:before{content:"";position:absolute;left:0;top:-21px;width:86px;height:29px;border:1px solid #416db1;border-bottom:0;border-radius:13px 13px 0 0;background:rgba(42,83,151,.32)}.folder-back{transform:translateX(-50%) translate(-42px,22px) skewY(-4deg);opacity:.45}.folder-mid{transform:translateX(-50%) translate(-20px,10px) skewY(-4deg);opacity:.68}.folder-front{transform:translateX(-50%) translate(10px,0) skewY(-4deg);background:linear-gradient(145deg,rgba(46,91,176,.55),rgba(45,35,117,.38));border-color:#5a89d3}.scene-logo{position:absolute;inset:25px;display:grid;place-items:center;transform:skewY(4deg)}.scene-arrow{position:absolute;right:6px;bottom:5px;font-size:62px;line-height:1;font-weight:800;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 28px rgba(75,112,255,.3)}
.visual-copy{position:absolute;left:0;right:0;bottom:72px;text-align:center}.visual-copy strong{display:block;font-size:14px}.visual-copy span{display:block;color:#7385a1;font-size:12px;margin-top:5px}.visual-stats{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);display:flex;gap:25px;color:#7487a5;font-size:10px;white-space:nowrap}.visual-stats b{color:#c9d8ec;margin-right:4px}

.category-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 38px}.category{height:36px;padding:0 15px;border-radius:20px;background:rgba(10,22,39,.72);border:1px solid #1b3354;color:#8294af;font-size:11px;font-weight:600}.category:hover{border-color:#365b88;color:#cbd8e9}.category.active{background:linear-gradient(135deg,#3188f5,#7b4df0);border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(62,101,232,.2)}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.section-kicker{display:block;color:#5e9df0;font-size:9px;font-weight:800;letter-spacing:.18em;margin-bottom:5px}.section-head h2{font-size:22px;letter-spacing:-.035em}.link{color:#6fa9fa;font-size:12px;font-weight:600}.link span{font-size:15px;margin-left:3px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.file-card{position:relative;background:linear-gradient(160deg,rgba(13,26,45,.92),rgba(8,18,32,.95));border:1px solid #1b3556;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.file-card:hover{transform:translateY(-3px);border-color:#37669a;box-shadow:0 18px 40px rgba(0,0,0,.22)}.file-thumb{height:166px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#0f2545,#0a1225)}.file-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,10,20,.65))}.thumb-art{width:76%;height:76%;position:relative;z-index:1}.thumb-art svg{width:100%;height:100%}.file-body{padding:14px 14px 15px}.file-cat{font-size:9px;color:#657894;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}.file-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.file-size{font-size:10px;color:#788aa4;margin-bottom:13px}.file-price-row{display:flex;align-items:center;justify-content:space-between}.file-price{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}.file-arrow{width:28px;height:28px;border:1px solid #263f61;border-radius:9px;display:grid;place-items:center;color:#9eb1cb;background:#0d1b2e}.nim-badge{width:20px;height:20px;border-radius:50%;background:var(--gradient);display:inline-grid;place-items:center;position:relative;box-shadow:0 5px 14px rgba(67,96,232,.25)}.nim-badge:after{content:"";width:7px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:.95}.nim-badge.small{width:17px;height:17px}.nim-badge.small:after{width:6px;height:7px;border-width:1.5px}
.empty-state{grid-column:1/-1;padding:40px 20px;border:1px dashed #274567;border-radius:16px;text-align:center;background:rgba(10,22,39,.55)}.empty-state strong{display:block;margin-bottom:6px}.empty-state p{color:#71819b;font-size:12px}
.dash-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:200px;padding:28px 20px;margin-bottom:22px;border:1.5px dashed #2d537d;border-radius:16px;background:rgba(9,20,35,.55);cursor:pointer;transition:border-color .16s,background .16s;outline:none}
.dash-dropzone:hover,.dash-dropzone:focus-visible{border-color:#4e8bd0;background:#0b2039}
.dash-dropzone.is-dragover{border-color:#63a8ff;background:rgba(59,130,246,.12)}
.dash-dropzone-icon{color:#65a9ff}
.dash-dropzone strong{font-size:16px;color:#dbe6f7}
.dash-dropzone span{font-size:13.5px;color:#7e91ad}
.dash-dropzone a{color:#63a8ff;font-weight:600;text-decoration:none}
.dash-dropzone a:hover{text-decoration:underline}

.dash-playzone{display:flex;align-items:center;justify-content:center;gap:9px;min-height:64px;padding:14px 20px;margin-bottom:22px;border:1.5px dashed #3d3157;border-radius:16px;background:rgba(20,13,35,.5);color:#a594c9;font-size:13.5px;cursor:default;transition:border-color .16s,background .16s,color .16s}
.dash-playzone.is-dragover{border-color:#b98bff;background:rgba(168,85,247,.14);color:#dcc8ff}
.dash-playzone-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}
.dash-playzone-icon{color:#b98bff;flex-shrink:0}
.recent-shared-mini{margin-bottom:22px}
.recent-shared-mini-kicker{display:block;color:#63a8ff;font-size:10px;font-weight:800;letter-spacing:.14em;margin-bottom:8px}
.recent-shared-mini-list{display:flex;flex-direction:column;gap:6px}
.recent-shared-mini-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #1b3556;border-radius:11px;background:rgba(10,22,39,.55);text-decoration:none;color:inherit;transition:border-color .16s,background .16s}
.recent-shared-mini-row:hover{border-color:#4e8bd0;background:#0b2039}
.recent-shared-mini-row .fi{font-size:16px;flex:0 0 auto}
.recent-shared-mini-name{font-size:12.5px;font-weight:600;color:#dbe6f7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}
.recent-shared-mini-when{font-size:11px;color:#71819b;flex:0 0 auto}

.back{display:inline-block;color:#7d91ad;font-size:12px;margin:10px 0 24px}.back:hover{color:#fff}.back.mobile-only{display:none}@media(max-width:720px){.back.mobile-only{display:inline-block}}.product-layout{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:18px;align-items:stretch}.product-preview{min-height:510px;border:1px solid #284a73;border-radius:22px;background:radial-gradient(circle at 50% 40%,rgba(74,117,240,.2),transparent 38%),linear-gradient(145deg,#0e203a,#07101f);position:relative;overflow:hidden}.product-preview:before{content:"";position:absolute;width:70%;height:1px;left:15%;bottom:22%;background:#31537d;box-shadow:0 0 35px #3f6ec0;transform:rotate(-7deg)}.product-preview:after{content:"PREVIEW";position:absolute;top:22px;left:24px;font-size:9px;letter-spacing:.18em;color:#6381a9}.product-card{background:rgba(10,21,37,.92);border:1px solid #223e61;border-radius:22px;padding:30px}.product-category{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#6da6f6;margin-bottom:9px}.product-card h2{font-size:27px;line-height:1.08;letter-spacing:-.045em;margin-bottom:7px}.product-meta{color:#7d90aa;font-size:11px;margin-bottom:11px}.stars{color:#a855f7;font-size:13px;margin-bottom:19px}.price-row{display:flex;align-items:center;gap:8px;margin-bottom:18px}.price{font-size:27px;font-weight:800}.secure-line{text-align:center;color:#63758f;font-size:10px;margin-top:9px}.secure-line span{margin:0 3px}.product-tabs{display:flex;gap:18px;border-bottom:1px solid #1d3554;margin-top:26px}.product-tabs button{background:transparent;border:0;color:#667995;font-size:10px;padding:0 0 10px}.product-tabs button.active{color:#e9f0fa;border-bottom:2px solid #4d9cff}.about{text-align:left;padding-top:18px}.about h3{font-size:12px;margin-bottom:8px}.about p{color:#8495ad;font-size:11px;line-height:1.7}

.confirm-card{max-width:410px;margin:60px auto 0;background:rgba(10,21,37,.93);border:1px solid #26486e;border-radius:22px;padding:38px;text-align:center}.check-circle{width:72px;height:72px;border-radius:50%;margin:0 auto 20px;background:radial-gradient(circle,rgba(59,130,246,.28),rgba(59,130,246,.04) 65%);border:1px solid #3875bd;display:grid;place-items:center}.check-circle svg{width:35px;height:35px;fill:none;stroke:#55a6ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.confirm-card .eyebrow{margin-bottom:9px}.confirm-card h2{font-size:23px;margin-bottom:13px}.confirm-amount{display:flex;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-bottom:23px}.confirm-list{list-style:none;text-align:left;border-top:1px solid #1d3554;border-bottom:1px solid #1d3554;padding:13px 0;margin-bottom:22px}.confirm-list li{display:flex;gap:10px;color:#91a3bc;font-size:12px;padding:6px 0}.tick{color:#2edb75;font-weight:800}

.sell-shell{max-width:1050px;margin:48px auto;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.sell-intro h2{font-size:46px;line-height:1.02;letter-spacing:-.055em;margin-bottom:16px}.sell-intro>p{max-width:470px;color:#8ea1bc;line-height:1.7}.sell-benefits{display:grid;gap:10px;margin-top:25px;color:#a9bad1;font-size:12px}.sell-card{background:rgba(10,21,37,.94);border:1px solid #244463;border-radius:22px;padding:27px}.sell-card h3{font-size:18px;margin-bottom:4px}.sell-card>p.muted{margin-bottom:20px}.dropzone-small{border:1px dashed #2d537d;border-radius:15px;padding:25px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;cursor:pointer;background:rgba(9,20,35,.65)}.dropzone-small:hover{border-color:#4e8bd0;background:#0b2039}.upload-icon{width:38px;height:38px;border-radius:11px;background:rgba(59,130,246,.12);border:1px solid #315b8c;color:#65a9ff;display:grid;place-items:center;font-size:22px}.dropzone-small p{font-size:12px;color:#a9b8cc}.dropzone-small small{color:#5e708a;font-size:9px}label{display:block;color:#7e91ad;font-size:11px;font-weight:600;margin-bottom:13px}label input{width:100%;height:42px;margin-top:6px;background:#0b182a;border:1px solid #203a5d;border-radius:11px;padding:0 13px;color:#eef4ff;outline:none;font-size:12px}label input:focus{border-color:#3e78bb;box-shadow:0 0 0 3px rgba(59,130,246,.08)}

.muted{color:#8294ad;font-size:11px}.muted.small{font-size:10px;text-align:center;margin-top:13px}.error-text{color:#fb7185!important}

@media(max-width:1050px){.topbar-inner{gap:18px}.brand{min-width:auto}.mainnav{gap:17px}.trust-strip{flex-wrap:wrap;row-gap:18px}.trust-item{flex:1 1 40%}.hero{grid-template-columns:1fr;gap:35px}.hero-copy{padding-left:0}.hero-visual{min-height:400px}.grid{grid-template-columns:repeat(2,1fr)}.product-layout{grid-template-columns:1fr}.product-preview{min-height:360px}.sell-shell{grid-template-columns:1fr;max-width:650px}.sell-intro{text-align:center}.sell-intro>p{margin:0 auto}.sell-benefits{justify-items:center}}
@media(max-width:720px){.topbar-inner{padding:11px 16px;min-height:66px;gap:8px}.mainnav,.search,.icon-button{display:none}.mobile-nav-toggle{display:grid;place-items:center;flex:0 0 auto}.connect-button{margin-left:auto;max-width:130px}.connect-button #connect-btn-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70px}.wordmark{font-size:18px}main{padding:18px 16px 70px}.trust-strip{flex-wrap:wrap;padding-bottom:22px}.trust-item{flex:1 1 40%}.trust-item small{display:none}.hero{padding:45px 0 50px}.hero-copy h1{font-size:48px}.hero-copy>p{font-size:14px}.hero-actions{flex-wrap:wrap}.hero-visual{min-height:365px}.folder-scene{transform:translate(-50%,-50%) scale(.84)}.visual-stats{gap:12px}.category-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:25px}.category{flex:0 0 auto}.section-head h2{font-size:20px}.grid{grid-template-columns:1fr 1fr;gap:10px}.file-thumb{height:135px}.file-body{padding:12px}.product-card{padding:23px}.sell-shell{margin:25px auto}.sell-intro h2{font-size:39px}}
@media(max-width:480px){.trust-strip{flex-wrap:wrap}.trust-item{flex:1 1 100%}.hero-copy h1{font-size:42px}.hero-visual{min-height:340px}.folder-scene{transform:translate(-50%,-50%) scale(.7)}.visual-copy{bottom:66px}.visual-stats{font-size:9px;gap:9px}.grid{grid-template-columns:1fr}.file-thumb{height:165px}.product-preview{min-height:290px}}

/* =========================================================
   PixelDrop Visual System — neon / glass / animated logo
   ========================================================= */
:root{
  --pd-bg:#030817;
  --pd-bg2:#071126;
  --pd-panel:rgba(8,19,43,.72);
  --pd-panel2:rgba(10,25,54,.86);
  --pd-border:rgba(77,151,255,.28);
  --pd-blue:#27a8ff;
  --pd-indigo:#4f6dff;
  --pd-purple:#9b4dff;
  --pd-pink:#c94cff;
  --pd-text:#f7f9ff;
  --pd-muted:#9aaaca;
  --pd-gradient:linear-gradient(100deg,#18bfff 0%,#5274ff 48%,#c24cff 100%);
}

html{background:var(--pd-bg);}
body{
  background:
    radial-gradient(900px 480px at 72% 34%,rgba(50,82,255,.13),transparent 65%),
    radial-gradient(650px 420px at 17% 2%,rgba(26,144,255,.10),transparent 65%),
    linear-gradient(180deg,#040a19 0%,#020714 100%);
  color:var(--pd-text);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.18;
  background-image:
    linear-gradient(rgba(80,130,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,130,255,.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}

@media(max-width:760px){
  
  
  
  
  
  body::before{background-size:36px 36px}
}

/* =========================================================
   PixelDrop Visual Fix v2
   ========================================================= */

@media(max-width:1050px){
  .brand{min-width:220px}
  
  
  .wordmark{font-size:25px}
  .hero{grid-template-columns:1fr;gap:35px}
}
@media(max-width:720px){
  .topbar-inner{
    min-height:68px;
    padding:8px 16px;
    gap:10px;
  }
  .brand{
    min-width:0;
    gap:7px;
  }
  
  
  .wordmark{font-size:21px}
  .mainnav,.search,.icon-button{display:none}.mobile-nav-toggle{display:grid;place-items:center}
  .connect-button{margin-left:auto}
  main{padding:0 16px 70px}
  .trust-strip{
    grid-template-columns:1fr 1fr;
    padding:20px 0 22px;
  }
  .trust-item small{display:none}
  .hero{padding:48px 0 50px}
  .hero-copy{padding-left:0}
  .hero-copy h1{font-size:48px}
  .hero-visual{min-height:365px}
}

/* =========================================================
   PixelDrop Brand — precise reference treatment
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(3,9,21,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(55,86,128,.28);
}
.topbar-inner{
  max-width:1400px;
  min-height:104px;
  margin:0 auto;
  padding:8px 34px;
  display:flex;
  align-items:center;
  gap:30px;
}

/* The brand is intentionally large, matching the supplied reference. */
.brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:17px;
  min-width:365px;
  height:92px;
  color:#fff;
  text-decoration:none;
  overflow:visible;
}

/* =========================================================
   PixelDrop logo — reference-accurate lockup
   The N and Drop are separate layers so ONLY the Drop moves.
   ========================================================= */

.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
  text-decoration:none;
}

/* Static in the normal state. No N animation. */

/*
  This opaque panel is what actually hides "Nimiq". It is anchored
  directly to the wordmark-main box (inset, not fixed pixels) so it
  always matches the real text size at every breakpoint, instead of
  guessing offsets that drift out of alignment.
*/
.wordmark-main{
  position:relative;
}
.wordmark-main::after{
  content:"";
  position:absolute;
  inset:-6px -8px;
  border-radius:8px;
  opacity:0;
  background:
    linear-gradient(105deg,
      rgba(5,11,24,.98) 0%,
      rgba(8,15,31,.99) 72%,
      rgba(16,25,49,.99) 100%);
  box-shadow:
    0 0 18px rgba(53,103,205,.12),
    inset 0 1px 0 rgba(255,255,255,.025);
  pointer-events:none;
  transition:opacity .18s ease;
}

/* The wordmark is deliberately large like the supplied reference image. */
.brand-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
}

.wordmark{
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  font-size:46px;
  line-height:.92;
  font-weight:800;
  letter-spacing:-.067em;
}

.wordmark-main{
  color:#f7f9ff;
}

.wordmark-drop{
  background:linear-gradient(100deg,#2daeff 0%,#4c72ff 48%,#b74dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/*
  SWEEP:
  The Drop moves horizontally from its original position,
  across the Nimiq word, until it reaches the Drop word.
  The cover travels with it, so Nimiq is completely hidden.
*/

.brand.is-sweeping .wordmark-main::after{
  opacity:1;
}

@media(max-width:1250px){
  
  
  
  
  
  .wordmark{
    font-size:38px;
  }
  
}

@media(max-width:950px){
  
  
  
  
  
  .wordmark{
    font-size:29px;
  }
  
}

@media(max-width:720px){
  
  
  
  
  
  .wordmark{
    font-size:22px;
    letter-spacing:-.06em;
  }
  
}

.mainnav{
  display:flex;
  align-items:center;
  gap:27px;
  flex:1 1 auto;
}
.mainnav a{
  color:#8190aa;
  font-size:13px;
  font-weight:600;
  transition:color .18s ease;
}
.mainnav a:hover,.mainnav a.active{color:#fff}

.search{
  width:min(310px,27vw);
  flex:0 1 310px;
}
.search input{height:40px}
.icon-button{flex:0 0 40px;font-size:19px;line-height:1}
.connect-button{flex:0 0 auto}

/* Correct content spacing under the larger header. */
main{
  max-width:1400px;
  margin:0 auto;
  padding:0 34px 90px;
}
.trust-strip{
  padding:27px 0 28px;
  border-bottom:1px solid rgba(44,67,98,.34);
}
.trust-item{min-height:40px}

@media(max-width:1150px){
  .topbar-inner{gap:20px;padding-left:22px;padding-right:22px}
  .brand{min-width:310px}
  .brand-logo{width:86px;flex-basis:86px}
  
  
  
  .wordmark{font-size:34px}
  
}
@media(max-width:900px){
  .brand{min-width:245px;gap:10px}
  .brand-logo{width:70px;flex-basis:70px}
  
  
  
  .wordmark{font-size:28px}
  
}
@media(max-width:720px){
  .topbar-inner{min-height:78px;padding:5px 16px;gap:10px}
  .brand{height:68px;min-width:0;gap:7px}
  .brand-logo{width:51px;height:64px;flex-basis:51px}
  
  
  
  .wordmark{font-size:23px}
  
  .mainnav,.search,.icon-button{display:none}.mobile-nav-toggle{display:grid;place-items:center}
  .connect-button{margin-left:auto}
  main{padding-left:16px;padding-right:16px}
}

/* =========================================================
   PixelDrop — concept rebuild V5
   Visual system is component-based; no screenshot/PNG UI.
   ========================================================= */

:root{
  --pd-bg:#030817;
  --pd-panel:#071328;
  --pd-line:rgba(71,126,220,.24);
  --pd-blue:#249bff;
  --pd-indigo:#5868ff;
  --pd-purple:#a64cff;
}

/* ---------- top status line ---------- */
.statusbar{
  position:relative;
  z-index:60;
  min-height:38px;
  border-bottom:1px solid rgba(59,105,185,.28);
  background:linear-gradient(90deg,#06122d,#030914 62%,#061a1c);
  color:#9fb0ca;
  font-size:12px;
}
.statusbar-inner{
  max-width:1400px;
  min-height:38px;
  margin:auto;
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.statusbar .status-right{display:flex;gap:10px;align-items:center}
.statusbar i{font-style:normal;color:#3b506f}
.statusbar b{color:#36e38b;font-weight:600}

/* ---------- reference logo ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(3,8,20,.91);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(60,100,160,.24);
}
.topbar-inner{
  max-width:1400px;
  min-height:148px;
  margin:auto;
  padding:10px 34px;
  display:flex;
  align-items:center;
  gap:32px;
}
.brand{
  position:relative;
  display:block;
  flex:0 0 auto;
  min-width:520px;
  height:128px;
  text-decoration:none;
  overflow:visible;
}

.brand-sweep-mask{
  position:absolute;
  left:-10px;
  top:8px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.brand-copy{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
}
.wordmark{
  position:relative;
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  font-size:58px;
  line-height:.94;
  font-weight:800;
  letter-spacing:-.068em;
}
.wordmark-main{
  position:relative;
  z-index:1;
  color:#f7f9ff;
}
.wordmark-drop{
  position:relative;
  z-index:1;
  background:linear-gradient(100deg,#27aaff 0%,#4e75ff 48%,#b34dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-sweep-mask{
  transition:opacity .15s ease;
}
.brand.is-sweeping .brand-sweep-mask{
  position:absolute;
  left:-18px;
  top:8px;
  width:calc(var(--sweep-width,270px) + 30px);
  height:64px;
  opacity:1;
  background:linear-gradient(105deg,rgba(3,8,20,.99),rgba(4,10,22,.99));
  border-radius:8px;
  box-shadow:0 0 24px rgba(3,8,20,.85);
}

/* ---------- nav controls ---------- */
.mainnav{display:flex;align-items:center;gap:32px;flex:1 1 auto}
.mainnav a{font-size:14px;font-weight:600;color:#8191ad;position:relative}
.mainnav a:hover,.mainnav a.active{color:#fff}
.mainnav a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:-17px;height:2px;
  background:linear-gradient(90deg,#2ba8ff,#a44dff);box-shadow:0 0 12px #398bff
}
.search{
  position:relative;
  width:min(360px,29vw);
  flex:0 1 360px;
}
.search input{
  height:48px;
  padding-left:48px;
  padding-right:62px;
  border-radius:15px;
  background:rgba(7,19,39,.72);
  border:1px solid #24456e;
}
.search kbd{
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  color:#7285a3;
  font-size:11px;
  border:1px solid #223b60;
  border-radius:6px;
  padding:2px 5px;
  background:#09162a;
}
.icon-button{width:46px;height:46px;font-size:22px}
.connect-button{
  height:48px;
  padding:0 22px;
  border-radius:15px;
  box-shadow:0 14px 36px rgba(68,72,234,.28);
}

/* ---------- page background ---------- */
body{
  background:
    radial-gradient(800px 500px at 71% 31%,rgba(25,76,190,.15),transparent 70%),
    radial-gradient(700px 420px at 25% 12%,rgba(20,111,255,.10),transparent 70%),
    radial-gradient(700px 500px at 78% 72%,rgba(102,47,195,.08),transparent 72%),
    #030817;
}
body:before{
  opacity:.10;
  background-size:64px 64px;
}

/* ---------- content ---------- */
main{max-width:1400px;padding:0 34px 100px}
.trust-strip{
  padding:23px 0 24px;
  border-bottom:1px solid rgba(62,97,147,.27);
}
.trust-item{min-height:54px;padding:0 28px;border-right:1px solid rgba(62,97,147,.18)}
.trust-item:first-child{padding-left:4px}
.trust-item:last-child{border-right:0}
.trust-icon{
  width:58px;height:58px;border-radius:15px;
  border:1px solid #2f6ea8;
  background:rgba(15,42,74,.85);
  box-shadow:inset 0 0 18px rgba(28,125,255,.14),0 0 20px rgba(0,85,200,.09);
}
.trust-icon img{width:28px;height:28px;filter:drop-shadow(0 0 4px rgba(120,220,255,.45))}
.trust-item b{font-size:14px}.trust-item small{font-size:12px;margin-top:5px}

/* ---------- hero: full concept composition ---------- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:44% 56%;
  gap:0;
  min-height:455px;
  padding:44px 0 20px;
  align-items:center;
}
.hero-copy{
  position:relative;
  z-index:4;
  padding-left:35px;
  padding-top:0;
}
.eyebrow{
  color:#3ca9ff;
  font-size:11px;
  letter-spacing:.20em;
  margin-bottom:15px;
}
.hero-copy h1{
  font-size:clamp(54px,5vw,76px);
  line-height:.95;
  letter-spacing:-.07em;
  margin-bottom:25px;
}
.hero-copy>p{
  max-width:575px;
  font-size:18px;
  line-height:1.55;
  margin-bottom:27px;
}
.hero-actions{gap:16px}
.btn{min-height:52px;border-radius:15px;padding:0 27px;font-size:15px}
.btn-primary{box-shadow:0 15px 38px rgba(45,98,255,.28)}
.btn-outline{background:rgba(2,10,24,.50);border-color:#3a5e91}
.hero-meta{font-size:13px;gap:28px;margin-top:24px;color:#8ea1bf}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta span::first-letter{color:#3ea7ff}

.hero-art{
  position:relative;
  min-height:500px;
  margin-top:-10px;
  overflow:visible;
  cursor:pointer;
}
.hero-art>img{
  position:absolute;
  width:112%;
  max-width:none;
  height:auto;
  left:-6%;
  top:-8%;
  filter:drop-shadow(0 20px 60px rgba(30,91,255,.15));
  animation:heroFloat 7s ease-in-out infinite;
}
.hero-art:before{
  content:"";
  position:absolute;
  width:440px;height:300px;
  left:39%;top:29%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(44,107,255,.20),transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}
.hero-art-label{
  position:absolute;
  right:0;
  width:155px;
  display:flex;
  gap:13px;
  align-items:center;
  padding:12px 14px;
  border-top:1px solid rgba(53,83,131,.24);
  border-bottom:1px solid rgba(53,83,131,.20);
  background:linear-gradient(90deg,rgba(5,14,29,.12),rgba(5,14,29,.62));
  color:#dce7f7;
}
.hero-art-label b{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  color:#31a8ff;background:rgba(17,60,131,.38);
  box-shadow:0 0 24px rgba(24,115,255,.18);
  font-size:20px;
}
.hero-art-label span{font-size:13px;line-height:1.45}
.hero-art-label-a{top:72px}
.hero-art-label-b{top:154px}
.hero-art-label-c{top:236px}
.hero-scribble{
  position:absolute;
  right:5px;
  bottom:48px;
  color:#8a9dff;
  font-family:cursive;
  font-size:22px;
  line-height:1.05;
  transform:rotate(-8deg);
  text-align:center;
  text-shadow:0 0 15px rgba(88,91,255,.5);
}
.hero-scribble em{color:#b77dff;font-style:normal}

@keyframes heroFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-7px) scale(1.006)}
}

/* ---------- categories / cards ---------- */
.category-row{
  position:relative;
  z-index:5;
  gap:10px;
  padding:7px 0 31px;
}
.category{
  min-height:42px;
  padding:0 20px;
  border-radius:22px;
  border-color:#24446b;
  background:rgba(4,15,31,.58);
  color:#9db0cd;
}
.category.active{
  background:linear-gradient(100deg,#287eff,#9c48ff);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 25px rgba(67,80,238,.25);
}
.section-head{padding-bottom:17px}
.section-kicker{color:#3ca9ff;font-size:11px;letter-spacing:.2em}
.section-head h2{font-size:28px;margin-top:5px}
.link{color:#3da9ff;font-weight:600}

.grid{gap:18px}
.file-card{
  background:linear-gradient(150deg,rgba(7,22,42,.92),rgba(4,14,29,.95));
  border:1px solid #1b3d66;
  border-radius:16px;
  overflow:hidden;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.file-card:hover{
  transform:translateY(-4px);
  border-color:#3472b7;
  box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 25px rgba(43,112,230,.10);
}
.file-thumb{height:190px}
.file-name{font-size:15px}
.file-price{font-size:14px}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .topbar-inner{padding-left:22px;padding-right:22px;gap:18px}
  .brand{min-width:430px}
  
  .wordmark{font-size:48px}
  
  .hero{grid-template-columns:1fr 1fr}
  .hero-copy{padding-left:18px}
  .hero-art-label{display:none}
}
@media(max-width:900px){
  .statusbar-inner{padding:0 18px}
  .status-right{display:none!important}
  .topbar-inner{min-height:100px;padding:6px 18px}
  .brand{min-width:0;height:88px}
  
  
  
  
  .wordmark{font-size:36px}
  
  .mainnav{display:none}
  .search{margin-left:auto;width:270px}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:38px}
  .hero-copy{padding-left:0}
  .hero-art{min-height:420px;margin-top:5px}
  .hero-art>img{width:105%;left:-3%;top:-4%}
}
@media(max-width:650px){
  .statusbar{display:none}
  .topbar-inner{min-height:76px;padding:5px 14px}
  .brand{height:66px}
  
  
  
  
  .wordmark{font-size:25px}
  
  .search,.icon-button{display:none}
  .connect-button{margin-left:auto;height:40px;padding:0 14px;font-size:12px}
  main{padding:0 15px 70px}
  .trust-strip{flex-wrap:wrap;gap:18px;padding:18px 0}
  .trust-item{flex:1 1 40%;padding:0!important;border-right:0}
  .trust-item small{display:none}
  .trust-icon{width:44px;height:44px}
  .trust-icon img{width:22px;height:22px}
  .hero-copy h1{font-size:47px}
  .hero-copy>p{font-size:15px}
  .hero-actions{flex-wrap:wrap}
  .hero-art{min-height:330px}
  .hero-art>img{width:125%;left:-12%;top:0}
  .hero-scribble{display:none}
  .category-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:22px}
  .category{white-space:nowrap}
  .grid{grid-template-columns:1fr 1fr}
  .file-thumb{height:145px}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .hero-copy h1{font-size:42px}
}

/* Respect accessibility preferences. */
@media(prefers-reduced-motion:reduce){
  .hero-art>img{animation:none}
  
}

/* The cover is attached to the Nimiq word itself. It is revealed
   left-to-right in sync with the travelling Drop, so the word never
   visually jumps or moves. */
.wordmark-main{overflow:visible}
.wordmark-cover{
  position:absolute;
  z-index:10;
  left:-4px;
  top:-5px;
  width:calc(100% + 8px);
  height:calc(100% + 10px);
  border-radius:7px;
  background:#030817;
  box-shadow:0 0 18px rgba(3,8,20,.95);
  opacity:0;
  clip-path:inset(0 100% 0 0);
  pointer-events:none;
}
.brand.is-sweeping .wordmark-cover{
  opacity:1;
  animation:coverSweep 1.0s cubic-bezier(.16,.82,.25,1) forwards;
}
@keyframes coverSweep{
  0%{clip-path:inset(0 100% 0 0)}
  72%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 0 0)}
}
@media(prefers-reduced-motion:reduce){
  .wordmark-cover{animation:none!important}
}

/* =========================================================
   PixelDrop V6 — exact reference logo correction
   The reference symbol is a vertical N + DOWN Drop.
   The Drop is the only animated logo element.
   ========================================================= */

.brand{
  min-width:620px;
  height:150px;
}

.brand-copy{
  z-index:4;
  padding-top:0;
}

.wordmark{
  font-size:60px;
  line-height:.94;
  letter-spacing:-.067em;
}

.wordmark-main{
  position:relative;
  z-index:1;
  display:inline-block;
  overflow:visible;
}

.wordmark-cover{
  position:absolute;
  z-index:4;
  left:-5px;
  top:-7%;
  width:0;
  height:114%;
  pointer-events:none;
  opacity:.98;
  border-radius:5px;
  background:
    linear-gradient(90deg,
      rgba(3,8,20,.96) 0%,
      rgba(3,8,20,.985) 72%,
      rgba(3,8,20,.72) 100%);
  box-shadow:
    14px 0 25px rgba(3,8,20,.55),
    inset -1px 0 rgba(91,129,255,.16);
  transition:
    width 1.02s cubic-bezier(.22,.78,.24,1),
    opacity .18s ease;
}

.brand.is-sweeping .wordmark-cover{
  width:calc(var(--sweep-width,220px) + 10px);
}

/* Keep the N + vertical Drop visually locked together before/after
   the sweep. */

/* Remove the old dark rectangular sweep mask from the V5 symbol. */
.brand-sweep-mask{
  display:none !important;
}

/* Reference proportions at medium widths. */
@media(max-width:1180px){
  .brand{
    min-width:520px;
    height:128px;
  }
  
  
  
  
  .wordmark{font-size:50px}
  
}

@media(max-width:900px){
  .brand{height:88px;min-width:0}
  
  
  
  
  .wordmark{font-size:36px}
}

@media(max-width:650px){
  .brand{height:66px}
  
  
  
  
  .wordmark{font-size:25px}
}

/* =========================================================
   PixelDrop V7 — MASTER REFERENCE LOGO
   This is the supplied reference artwork, used 1:1.
   Do not rebuild this logo with a font or a different SVG.
   ========================================================= */
.brand.brand-reference{
  display:block;
  width:541px;
  height:140px;
  min-width:541px;
  margin:0;
  padding:0;
  overflow:hidden;
  line-height:0;
  flex:0 0 541px;
}

.brand-reference-image{
  display:block;
  width:541px;
  height:140px;
  max-width:none;
  object-fit:fill;
  margin:0;
  padding:0;
}

/* The reference image is the visual master. The old assembled
   N/Drop animation must not alter its appearance. */
.brand-reference .brand-n,
.brand-reference .brand-drop,
.brand-reference .brand-copy,
.brand-reference .wordmark,
.brand-reference .brand-tagline{
  display:none !important;
}

@media(max-width:1180px){
  .brand.brand-reference{
    width:470px;
    height:auto;
    min-width:470px;
    flex-basis:470px;
  }
  .brand-reference-image{
    width:470px;
    height:auto;
  }
}
@media(max-width:900px){
  .brand.brand-reference{
    width:390px;
    min-width:390px;
    flex-basis:390px;
  }
  .brand-reference-image{
    width:390px;
    height:auto;
  }
}
@media(max-width:650px){
  .brand.brand-reference{
    width:300px;
    min-width:300px;
    flex-basis:300px;
  }
  .brand-reference-image{
    width:300px;
    height:auto;
  }
}

/* =========================================================
   PixelDrop V8 — SEPARATE REFERENCE LAYERS
   The supplied concept is reconstructed from independent
   visual layers so the Drop word can travel over Nimiq.
   Coordinates below use a 541 x 164 reference canvas.
   ========================================================= */

/* One synchronized movement: the Drop word and its opaque cover
   travel together from the normal position to the left edge of
   Nimiq. Nimiq itself never moves. */

/* A short horizontal light streak sells the motion without
   changing the reference logo when it is at rest. */

/* Accessibility: no automatic movement when requested. */

/* Exact proportional reductions of the 541 x 164 master canvas. */

/* =========================================================
   PixelDrop V9 — personal storage product
   Dashboard, files, contacts, plans. Replaces the old public
   marketplace grid/product/sell views.
   ========================================================= */

.storage-hero{
  display:flex;
  flex-direction:column;
  gap:28px;
  max-width:720px;
  margin:0 auto;
  padding:48px 0 56px;
}
.storage-hero-copy{padding-left:0}
.storage-hero-copy h1{
  font-size:clamp(40px,4.4vw,60px);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:800;
  margin-bottom:20px;
}
.storage-hero-copy>p{
  max-width:480px;
  color:#a8b6cd;
  font-size:15px;
  line-height:1.7;
  margin-bottom:26px;
}

.storage-meter-card{
  background:linear-gradient(150deg,rgba(13,26,45,.92),rgba(7,15,28,.95));
  border:1px solid #234066;
  border-radius:20px;
  padding:26px 28px;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 22px 60px rgba(0,0,0,.25);
}
.storage-meter-head{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#8ea0bd;
  margin-bottom:10px;
}
.storage-meter-head span:last-child{color:#e9f0fa;font-weight:700}
.storage-meter-track{
  height:10px;
  border-radius:6px;
  background:#0c1a2e;
  border:1px solid #1c3555;
  overflow:hidden;
  margin-bottom:14px;
}
.storage-meter-fill{
  height:100%;
  background:linear-gradient(135deg,#22c55e,#4ade80);
  border-radius:6px;
  transition:width .4s ease,background .3s ease;
}
.storage-meter-fill.is-medium{background:linear-gradient(135deg,#eab308,#f59e0b)}
.storage-meter-fill.is-full{background:linear-gradient(135deg,#f97316,#ef4444)}
.storage-meter-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#7d90aa;
}

.trial-banner{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px 18px;
  margin-bottom:22px;
  padding:16px 20px;
  border-radius:16px;
  background:linear-gradient(150deg,rgba(24,191,255,.10),rgba(194,76,255,.08)),linear-gradient(150deg,rgba(13,26,45,.92),rgba(7,15,28,.95));
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 30px rgba(82,116,255,.14);
}
.trial-banner-text{display:flex;flex-direction:column;gap:4px;flex:1 1 260px}
.trial-banner-text strong{font-size:14px;color:#f3f7ff;font-weight:800}
.trial-banner-sub{font-size:12px;color:#9fb0cc;font-weight:500;line-height:1.5}
.trial-banner:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1.5px;
  background:var(--pd-gradient);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.trial-banner .link{font-weight:800;white-space:nowrap}
.trial-banner[hidden]{display:none}

.files-list{display:flex;flex-direction:column;gap:10px}
.file-row{
  display:flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(150deg,rgba(11,23,41,.9),rgba(6,13,25,.94));
  border:1px solid #1b3556;
  border-radius:14px;
  padding:14px 18px;
  transition:border-color .18s ease;
}
.file-row:hover{border-color:#37669a}
.file-select-checkbox{width:17px;height:17px;accent-color:#6366F1;flex:0 0 auto;cursor:pointer}
.bulk-toolbar{
  display:flex;align-items:center;gap:16px;
  padding:12px 18px;margin-bottom:14px;
  background:rgba(99,102,241,.08);border:1px solid #3730a3;border-radius:12px;
}
.bulk-select-all{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.bulk-select-all input{width:16px;height:16px;accent-color:#6366F1}
.bulk-toolbar .btn{margin-left:auto;height:34px;padding:0 16px;font-size:12px}
.bulk-toolbar .btn.danger{color:#fb7185;border-color:#7f1d3a}
.bulk-toolbar .btn.danger:hover{background:rgba(251,113,133,.1)}
.bulk-toolbar[hidden]{display:none}
.admin-user-row{flex-direction:column;align-items:stretch;gap:12px}
.admin-user-row-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.admin-plan-grant{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid #1b3556;
}
.admin-plan-grant select{
  height:32px;background:#0d1b2e;border:1px solid #263f61;border-radius:9px;
  color:#eef4ff;padding:0 10px;font-size:12px;
}
.admin-plans-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.admin-plan-row{flex-direction:column;align-items:stretch;gap:12px}
.admin-plan-row-name{font-weight:700;font-size:14px}
.admin-plan-row-controls{flex-wrap:wrap}
.admin-plan-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#8ea0bd}
.admin-plan-field input{
  width:100px;height:34px;background:#0d1b2e;border:1px solid #263f61;border-radius:9px;
  color:#eef4ff;padding:0 10px;font-size:12px;
}
.file-row-icon{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:10px;
  background:rgba(59,130,246,.12);
  border:1px solid #2c4d78;
  display:grid;place-items:center;
  color:#69a6ff;
  font-size:15px;
  overflow:hidden;
}
.file-row-icon img{width:100%;height:100%;object-fit:cover}
.file-row-main{flex:1;min-width:0}
.file-row-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row-meta{font-size:11px;color:#7d90aa;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.file-row-actions{display:flex;gap:8px;flex:0 0 auto}
.file-row-btn{
  width:34px;height:34px;
  border-radius:9px;
  border:1px solid #263f61;
  background:#0d1b2e;
  color:#9eb1cb;
  display:grid;place-items:center;
  font-size:14px;
  transition:border-color .15s,color .15s;
}
.file-row-btn:hover{border-color:#4d9cff;color:#fff}
.file-row-btn.danger:hover{border-color:#fb7185;color:#fb7185}
.folder-row-icon{font-size:18px;background:rgba(168,85,247,.12);border-color:#5a3d78;color:#c98bff}
.is-previewable{cursor:pointer}
.folder-view-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.btn-small{min-height:32px;padding:0 14px;font-size:12px}
.shared-badge{
  display:inline-flex;align-items:center;gap:4px;
  color:#7fd8a8;
}
.timevault-badge{
  display:inline-flex;align-items:center;gap:4px;
  color:#c4b5fd;background:rgba(139,92,246,.12);
  border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700;
}
.drop-request-badge{
  display:inline-flex;align-items:center;gap:4px;
  color:#7cc9ff;background:rgba(90,150,255,.12);
  border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700;
}
.files-section-head{
  display:flex;align-items:center;gap:10px;
  margin:28px 0 12px;font-size:13px;font-weight:700;color:#8ea0bd;
  text-transform:uppercase;letter-spacing:.04em;
}
.files-section-head:first-child{margin-top:0}
.badge-icon{width:16px;height:16px;flex:0 0 auto;filter:drop-shadow(0 0 3px rgba(120,170,255,.4))}
.files-section-head .badge-icon{width:18px;height:18px}
.activity-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.activity-column-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.activity-column-icon{width:26px;height:26px;filter:drop-shadow(0 0 4px rgba(120,170,255,.4))}
.activity-column-head h3{font-size:16px;font-weight:800}
@media(max-width:860px){.activity-columns{grid-template-columns:1fr;gap:34px}}
.timevault-tab-intro{margin-bottom:22px}
.timevault-upsell{
  max-width:560px;
  background:linear-gradient(160deg,rgba(13,26,45,.92),rgba(8,18,32,.95));
  border:1px solid #1b3556;border-radius:20px;
  padding:28px;display:flex;flex-direction:column;gap:14px;
}
.timevault-upsell p{line-height:1.65;font-size:14px;color:#a8b6cd}
.timevault-upsell .btn{align-self:flex-start;margin-top:6px}
.day-group{margin-bottom:26px}
.day-group:last-child{margin-bottom:0}
.day-group-header{
  font-size:13px;font-weight:800;color:#8ea0bd;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #1b3556;
}
.day-group .files-list{display:flex;flex-direction:column;gap:10px}
.renewal-menu{position:relative;display:inline-flex;max-width:100%}
.renewal-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:20px;border:none;font:inherit;font-size:11px;font-weight:700;background:rgba(148,163,184,.10);color:#a8b6cd;cursor:pointer;white-space:nowrap}
.renewal-badge .led{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:currentColor;box-shadow:0 0 6px currentColor}
.renewal-green{color:#4ade80;background:rgba(34,197,94,.12)}
.renewal-amber{color:#fbbf24;background:rgba(245,158,11,.14)}
.renewal-red{color:#f87171;background:rgba(239,68,68,.14)}
.renewal-red .led{animation:led-pulse 2s ease-in-out infinite}
@keyframes led-pulse{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.renewal-red .led{animation:none}}
.renewal-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:200px;max-width:min(280px,calc(100vw - 32px));padding:10px 12px;border-radius:10px;border:1px solid rgba(62,97,147,.4);background:rgba(9,17,32,.97);box-shadow:0 18px 40px rgba(0,0,0,.45);font-size:12px;line-height:1.4;color:#cbd5e1;text-align:left}
.renewal-pop strong{display:block;margin-bottom:4px;color:#e6edf7}
.renewal-badge-detail{display:none}
.renewal-badge:hover .renewal-badge-detail,.renewal-badge[aria-expanded="true"] .renewal-badge-detail{display:inline}
.expiry-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
}
.expiry-badge-warn{
  background:rgba(245,158,11,0.15);
  color:#f59e0b;
}
.expiry-badge-danger{
  background:rgba(239,68,68,0.15);
  color:#ef4444;
}

.contact-form{
  display:flex;
  gap:10px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.contact-form input{
  flex:1;min-width:180px;
  height:44px;
  background:#0b182a;
  border:1px solid #203a5d;
  border-radius:11px;
  padding:0 15px;
  color:#eef4ff;
  outline:none;
  font-size:13px;
}
.contact-form input:focus{border-color:#3e78bb;box-shadow:0 0 0 3px rgba(59,130,246,.08)}

.drop-request-create{margin-bottom:22px}
.drop-request-create-label{
  display:block;width:100%;height:44px;
  background:#0b182a;border:1px solid #203a5d;border-radius:11px;
  padding:0 15px;color:#eef4ff;outline:none;font-size:13px;
  margin-bottom:12px;
}
.drop-request-create-label:focus{border-color:#3e78bb;box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.drop-request-create-message{height:auto;padding:10px 15px;font-family:inherit;resize:vertical}
.drop-request-create-row{position:relative;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.drop-request-create-row .admin-plan-field{font-size:12px;gap:6px}
.drop-request-create-row select{
  height:42px;min-width:170px;background:#0d1b2e;border:1px solid #263f61;border-radius:11px;
  color:#eef4ff;padding:0 12px;font-size:13px;
}
.drop-request-create-btn{min-height:42px;height:42px;padding:0 20px;font-size:13px;white-space:nowrap}
/* Desktop: keep the action visually centered in the full form row, independent of the
   two compact select controls on the left. The invisible label preserves the row height. */
.drop-request-create-btn-field{position:absolute;left:50%;bottom:0;transform:translateX(-50%);}
/* The button has no real label above it — an invisible one of the same size keeps its column the
   same height as "Link works for" / "Send to a contact", so flex-end lines up the three inputs
   themselves instead of the button riding up into the label row. */
.drop-request-create-btn-field>span{visibility:hidden}
@media(max-width:900px){
  .drop-request-create-btn-field{position:static;transform:none;}
}

.contacts-list{display:flex;flex-direction:column;gap:10px}
.contact-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(150deg,rgba(11,23,41,.9),rgba(6,13,25,.94));
  border:1px solid #1b3556;
  border-radius:14px;
  padding:13px 18px;
}
.contact-avatar{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:50%;
  background:var(--gradient);
  display:grid;place-items:center;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}
.contact-avatar .ui-ico.ico-solo{width:24px;height:24px;stroke-width:1.7}
.contact-avatar.tone-0{background:linear-gradient(135deg,#22d3ee,#3b82f6)}
.contact-avatar.tone-1{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.contact-avatar.tone-2{background:linear-gradient(135deg,#6366f1,#a855f7)}
.contact-avatar.tone-3{background:linear-gradient(135deg,#a855f7,#ec4899)}
.contact-row-main{flex:1;min-width:0}
.contact-row-name{font-size:14px;font-weight:700}
.contact-row-address{font-size:11px;color:#7d90aa;margin-top:2px;font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-row button{flex:0 0 auto}

.plans-intro{margin-bottom:22px}
.billing-cycle-toggle{
  display:inline-flex;gap:4px;padding:4px;
  background:#0d1b2e;border:1px solid #1b3556;border-radius:14px;
  margin-bottom:24px;
}
.billing-cycle-toggle button{
  all:unset;box-sizing:border-box;cursor:pointer;
  padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;
  color:#8ea0bd;display:inline-flex;align-items:center;gap:8px;
  transition:background .15s ease,color .15s ease;
}
.billing-cycle-toggle button:hover{color:#dbe6f7}
.billing-cycle-toggle button.is-active{background:var(--gradient);color:#fff}
.billing-cycle-toggle .save-badge{
  font-size:10px;font-weight:800;padding:2px 7px;border-radius:10px;
  background:rgba(255,255,255,.18);color:#fff;
}
.billing-cycle-toggle button:not(.is-active) .save-badge{
  background:rgba(74,222,128,.15);color:#4ade80;
}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan-card{
  background:linear-gradient(160deg,rgba(13,26,45,.92),rgba(8,18,32,.95));
  border:1px solid #1b3556;
  border-radius:20px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.plan-card{cursor:pointer;transition:border-color .18s,box-shadow .18s}
.plan-card:hover{border-color:#3f63c7}
.plan-card.is-selected{border-color:#5b7bff;box-shadow:0 0 0 1px #5b7bff,0 20px 50px rgba(75,100,230,.18)}
.plan-badge{
  align-self:flex-start;
  font-size:9px;font-weight:800;letter-spacing:.12em;
  color:#8fb8ff;background:rgba(59,130,246,.14);
  border:1px solid #2c4d78;border-radius:20px;
  padding:4px 10px;
}
.plan-name{font-size:20px;font-weight:800}
.plan-gb{font-size:34px;font-weight:800;letter-spacing:-.03em}
.plan-gb span{font-size:14px;color:#7d90aa;font-weight:600;margin-left:4px}
.plan-feat-list{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.plan-feat-list li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#c7d2e6;line-height:1.4}
.plan-feat-list li .check{color:#4ade80;flex:0 0 auto;font-weight:800}
.plan-gb-small{font-size:12.5px;color:#7d90aa;margin:0 0 14px}
.plan-gb-small b{color:#eef4ff;font-weight:700}
.plan-price{display:flex;align-items:center;gap:8px;color:#a8b6cd;font-size:14px}
.plan-price b{color:#fff;font-size:18px}
.plan-price-usd{color:#5f7291;font-size:12px;margin-top:-10px}
.plan-timevault-toggle{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13px;color:#dbe6f7;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid #1b3556;
}
.plan-timevault-toggle input{width:16px;height:16px;accent-color:#6366F1;flex:0 0 auto}
.plan-payment-group{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.plan-payment-label{color:#8ea0bd;font-size:12px;font-weight:600}
.plan-payment-label[hidden]{display:none}
.plan-paypal-divider{
  display:flex;align-items:center;gap:10px;
  color:#5f7291;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
}
.plan-paypal-divider::before,
.plan-paypal-divider::after{
  content:"";flex:1;height:1px;background:#1b3556;
}
.paypal-button-container{min-height:40px}
.plan-paypal-divider[hidden],
.paypal-button-container[hidden]{display:none}

/* ---------- Account menu (avatar dropdown) ---------- */
.account-menu{position:relative}
.account-avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  display:grid;place-items:center;overflow:hidden;
  background:var(--gradient);font-size:15px;
  box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
.account-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.account-caret{font-size:9px;opacity:.8;margin-left:2px}
.account-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:180px;background:#0d1b2e;border:1px solid #263f61;
  border-radius:14px;padding:6px;box-shadow:0 20px 40px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:2px;z-index:40;
}
.account-dropdown[hidden]{display:none}
.account-dropdown button{
  all:unset;box-sizing:border-box;width:100%;
  padding:10px 12px;border-radius:9px;font-size:13px;color:#dbe6f7;
  cursor:pointer;
}
.account-dropdown button:hover{background:#152743}
.account-dropdown-divider{height:1px;background:#1b3556;margin:4px 2px}
#logoff-btn{color:#fb7185}

/* ---------- Profile / Settings ---------- */
.settings-card{
  background:linear-gradient(160deg,rgba(13,26,45,.92),rgba(8,18,32,.95));
  border:1px solid #1b3556;border-radius:20px;
  padding:28px;max-width:520px;
  display:flex;flex-direction:column;gap:22px;
}
.profile-avatar-row{display:flex;align-items:center;gap:18px}
.profile-avatar-preview{
  width:72px;height:72px;border-radius:50%;flex:0 0 72px;
  background:var(--gradient);display:grid;place-items:center;
  overflow:hidden;font-size:28px;
  box-shadow:0 0 0 3px rgba(255,255,255,.55);
}
.profile-avatar-preview img{border-radius:50%}
.profile-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
#profile-form{display:flex;flex-direction:column;gap:10px}
.field-label{font-size:12px;color:#8ea0bd;font-weight:600}
#profile-form input[type="text"]{
  height:44px;border-radius:10px;border:1px solid #263f61;
  background:#0d1b2e;color:#eef4ff;padding:0 14px;font-size:14px;
}
#profile-form .btn{align-self:flex-start;margin-top:6px}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:20px;border-bottom:1px solid #1b3556;
}
.settings-row:last-child{padding-bottom:0;border-bottom:none}
.settings-row-title{font-weight:700;font-size:14px;margin-bottom:4px}
.settings-row-control{display:flex;align-items:center;gap:10px}
.save-indicator{
  font-size:11px;font-weight:700;color:#4ade80;
  opacity:0;transition:opacity .3s ease;white-space:nowrap;
}
.save-indicator.is-visible{opacity:1}
.badge-soon{
  font-size:10px;font-weight:800;letter-spacing:.06em;
  color:#8ea0bd;background:rgba(255,255,255,.06);
  border:1px solid #263f61;border-radius:20px;padding:5px 10px;
  white-space:nowrap;
}
.settings-card + .settings-card{margin-top:22px}
.badge-premium{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:9px;font-weight:800;letter-spacing:.08em;
  color:#1c1030;background:linear-gradient(135deg,#facc15,#f59e0b);
  border-radius:20px;padding:3px 9px;
}
.timevault-head{margin-bottom:18px}
#timevault-locked{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
#timevault-unlocked{display:flex;flex-direction:column;gap:14px}
#timevault-locked[hidden],
#timevault-unlocked[hidden],
#timevault-tab-locked[hidden],
#timevault-tab-unlocked[hidden]{display:none}
.timevault-howto{
  display:flex;flex-direction:column;gap:16px;
  padding:18px;margin-bottom:6px;
  background:rgba(255,255,255,.02);border:1px solid #1b3556;border-radius:14px;
}
.timevault-howto-step{display:flex;gap:14px;align-items:flex-start}
.timevault-howto-num{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:var(--gradient);color:#fff;font-weight:800;font-size:13px;
  display:grid;place-items:center;
}
.timevault-howto-step strong{font-size:14px}
.timevault-howto-step p{margin:3px 0 8px;font-size:13px!important;line-height:1.55;color:#a8b6cd!important}
.timevault-howto-step .btn{height:34px;padding:0 16px;font-size:12px;margin-right:10px}
.timevault-devices-list{display:flex;flex-direction:column;gap:10px}
.timevault-device-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#0d1b2e;border:1px solid #263f61;border-radius:12px;
  padding:12px 16px;
}
.timevault-device-name{font-weight:700;font-size:13px}
.timevault-device-meta{color:#7d90aa;font-size:11px;margin-top:2px}
.timevault-add-device{align-self:flex-start}
.token-display{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.8;word-break:break-all;white-space:pre-line;
  background:#0d1b2e;border:1px solid #263f61;border-radius:10px;
  padding:14px;margin:14px 0;color:#7fd8a8;text-align:center;
}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch-track{
  position:absolute;inset:0;border-radius:20px;background:#263f61;
  transition:background .2s ease;
}
.switch-thumb{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#dbe6f7;transition:transform .2s ease;
}
.switch input:checked + .switch-track{background:var(--gradient)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(18px)}

.modal-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(3,8,18,.72);
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay:not([hidden]){display:flex}
.modal-card{
  width:100%;max-width:400px;
  max-height:90vh;overflow-y:auto;
  background:#0b1728;
  border:1px solid #26486e;
  border-radius:20px;
  padding:26px;
}
.modal-card h3{font-size:18px;margin-bottom:6px}
.limit-modal-card{text-align:center}
.limit-modal-icon{display:block;width:56px;height:56px;margin:0 auto 14px;filter:drop-shadow(0 0 12px rgba(90,150,255,.35))}
.limit-modal-icon img{width:100%;height:100%;object-fit:contain}
.limit-modal-card #limit-modal-message{margin-bottom:18px}
.limit-modal-card .btn{margin-top:8px}
.modal-card .contacts-list{margin:16px 0}
.phones-list{display:grid;gap:6px;margin:8px 0}
.phone-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:#0d1b2e;border:1px solid #263f61;border-radius:10px}
.phone-item small{display:block}
.phone-item .btn{padding:4px 10px;font-size:12px}
.phone-item>.btn+.btn{margin-left:6px}
.activity-column-head .activity-clear{margin-left:auto;padding:4px 10px;font-size:12px}
.pick-search{width:100%;margin:12px 0 8px}
.pick-list{max-height:50vh;overflow-y:auto;display:grid;gap:6px;margin-bottom:12px}
.pick-item{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;padding:10px 12px;background:#0d1b2e;border:1px solid #263f61;border-radius:10px;color:#e6eefc;cursor:pointer}
.pick-item:hover{border-color:#4d9cff}
.pick-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Share window: on a wide screen the link settings sit beside the contacts and the active links, so it scrolls much less */
.share-cols{display:block}
@media(min-width:900px){
  #link-modal .modal-card{max-width:820px}
  .share-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:6px}
  .share-col>.link-list-title:first-child{margin-top:0}
  .share-cols{align-items:stretch}
  /* the contacts take the free height; the active links sit at the bottom, level with "Create link" */
  .share-col:last-child{display:flex;flex-direction:column}
  .share-col:last-child .contacts-list{flex:1 1 0;min-height:140px;overflow-y:auto}
  .share-col:last-child .link-list{max-height:150px;overflow-y:auto}
  #link-close{margin-top:18px}
}
.modal-card .contact-row{cursor:pointer}
.modal-card .contact-row:hover{border-color:#4d9cff}

@media(max-width:1050px){
  .plans-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .storage-hero-copy h1{font-size:38px}
  .file-row{flex-wrap:wrap}
  .plans-grid{grid-template-columns:1fr}
  .contact-form{flex-direction:column;gap:12px}
  /* Below 16px, iOS Safari zooms the whole page in on focus — jarring, and
     it's what makes a technically-fine-sized field feel "too small" and
     awkward to use. This applies everywhere on mobile, not just Contacts,
     since every text input in the app inherited a sub-16px desktop size. */
  input[type="text"],input[type="email"],input[type="password"],
  input[type="number"],input[type="search"],textarea,select{
    font-size:16px!important;
  }
  .contact-form input{height:50px;flex:none}
}

/* =========================================================
   PixelDrop V10 — accounts / auth gate
   ========================================================= */

body.is-loading main,
body.is-loading .mainnav,
body.is-loading .search,
body:not(.is-authed) main,
body:not(.is-authed) .mainnav,
body:not(.is-authed) .search{
  display:none;
}

/* The anonymous drop-request page (/d/{id}) replaces the whole app shell — no header, no nav, no
   login gate, just the one upload card — for a visitor who has no PixelDrop account at all. */
body.is-drop-request .topbar,
body.is-drop-request #auth-gate,
body.is-drop-request main{
  display:none;
}
body.is-drop-request #drop-request-page{
  display:flex;
}
.drop-request-page{
  display:none;
  min-height:100vh;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:16px;
}
.drop-request-card{
  width:100%;max-width:440px;
  background:#0b1728;
  border:1px solid #26486e;
  border-radius:20px;
  padding:32px 28px;
  text-align:center;
}
.drop-request-card h1{font-size:22px;margin:4px 0 6px}
.drop-request-dropzone{
  margin-top:20px;
  padding:28px 16px;
  border:1.5px dashed #2c4d75;
  border-radius:14px;
  transition:border-color .15s, background .15s;
}
.drop-request-dropzone.is-dragover{
  border-color:#5a96ff;
  background:rgba(90,150,255,.08);
}
.drop-request-dropzone p{margin-bottom:12px}
.drop-request-sent{
  margin-top:18px;
  padding:14px;
  border-radius:12px;
  background:rgba(60,200,120,.1);
  border:1px solid rgba(60,200,120,.3);
}
.drop-request-footer{margin-top:4px}
.drop-request-secure-note{margin-top:16px;font-size:11px;color:#6a8db8}
.drop-request-message{
  margin-top:12px;padding:12px 14px;
  border-radius:12px;background:rgba(90,150,255,.08);border:1px solid rgba(90,150,255,.25);
  font-size:13px;color:#cfe0ff;text-align:left;white-space:pre-wrap;
}
.drop-request-sign-badge{margin-top:12px;font-size:12px;font-weight:700}

/* Until the page knows whether you're signed in, show nothing rather than a bare header and
   footer that then jump when the real page appears. The animation is a safety net: if the
   script never runs, everything shows after 3 seconds. */
body.is-loading .topbar,
body.is-loading .site-footer{visibility:hidden;animation:pd-reveal 0s 3s forwards}
@keyframes pd-reveal{to{visibility:visible}}

.auth-gate{
  position:fixed;inset:0;z-index:60;
  align-items:center;justify-content:center;
  padding:0;
  overflow:hidden;
  background-color:#030c1a;
  background-image:url('assets/landing/frames/background-reference-1536.png');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.auth-gate:not([hidden]){display:flex}
.auth-card{
  width:100%;max-width:390px;
  background:rgba(10,21,37,.94);
  border:1px solid #26486e;
  border-radius:22px;
  padding:34px 32px;
  text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
/* Logo on the login / landing screens: a single image (assets/brand). */
.auth-logo{
  position:relative;
  display:block;
  width:108px;
  height:90px;
  margin:0 auto 18px;
}
.auth-logo img{
  position:absolute;
  display:block;
  max-width:none;
}

.auth-card h2{font-size:21px;margin-bottom:20px}

/* ---------- pre-login landing (shown before Get started / Log in) ---------- */
.auth-landing{width:100%;max-width:920px;text-align:center}
.auth-landing .auth-logo{margin:0 auto 22px}
.auth-logo-lg{width:130px;height:108px}

.auth-landing .eyebrow{display:block;margin-bottom:14px}
.auth-landing h1{font-size:clamp(38px,5vw,58px);line-height:1.03;letter-spacing:-.05em;font-weight:800;margin-bottom:18px}
.landing-copy{max-width:560px;margin:0 auto 40px;color:#a8b6cd;font-size:16px;line-height:1.7}
.landing-trust{border-bottom:0;max-width:820px;margin:0 auto 40px}
.landing-actions{justify-content:center}
.auth-card form{display:flex;flex-direction:column;gap:12px}
.auth-card input{
  height:46px;
  background:#0b182a;
  border:1px solid #203a5d;
  border-radius:11px;
  padding:0 15px;
  color:#eef4ff;
  outline:none;
  font-size:13px;
}
.auth-card input:focus{border-color:#3e78bb;box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.password-field{position:relative}
.password-field input{width:100%;padding-right:44px!important}
.password-toggle{
  position:absolute;top:0;right:0;bottom:0;width:44px;
  background:transparent;border:0;cursor:pointer;
  font-size:15px;opacity:.55;filter:grayscale(1);
  display:grid;place-items:center;
}
.password-toggle:hover{opacity:.9}
.password-toggle.is-visible{opacity:1;filter:none}
.auth-card .btn{margin-top:4px}
.modal-card form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.modal-card input{
  height:46px;
  background:#0b182a;
  border:1px solid #203a5d;
  border-radius:11px;
  padding:0 15px;
  color:#eef4ff;
  outline:none;
  font-size:13px;
}
.modal-card input:focus{border-color:#3e78bb;box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.tf-qr{display:block;width:200px;height:200px;margin:14px auto;border-radius:12px;background:#fff;padding:10px}
.auth-toggle{margin-top:20px;font-size:12px;color:#7d90aa}
.auth-toggle a{color:#6fa9fa;font-weight:600}
.auth-toggle a:hover{color:#fff}

.upload-bar{
  position:relative;
  height:18px;
  border-radius:9px;
  background:#0c1a2e;
  overflow:hidden;
  margin:8px 0 22px;
  width:220px;
  max-width:100%;
}
.upload-bar-fill{
  height:100%;
  background:var(--gradient);
  border-radius:9px;
  transition:width .2s ease;
}
.upload-bar-pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;
  letter-spacing:.2px;
}

.upload-bar.processing .upload-bar-fill{
  width:100% !important;
  background:linear-gradient(90deg,#1e6fd9 0%,#7a3cff 25%,#9be3ff 50%,#7a3cff 75%,#1e6fd9 100%);
  background-size:200% 100%;
  animation:upload-shimmer 1.2s linear infinite;
}
.is-busy{animation:upload-pulse 1.4s ease-in-out infinite}
@keyframes upload-shimmer{from{background-position:200% 0}to{background-position:0 0}}
@keyframes upload-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.upload-bar.processing .upload-bar-fill,.is-busy{animation:none}}

/* ---------- PixelDrop rebrand ---------- */
.auth-logo{position:relative;display:block;width:auto;height:auto;margin:0 auto 18px;text-align:center;background:none;border:0;box-shadow:none}
.auth-logo::after{content:none}
.auth-logo img{position:static}
.auth-logo-full{height:80px;width:auto;max-width:100%;display:inline-block}
.auth-logo-lg .auth-logo-full{height:170px}

@media(max-width:720px){.auth-logo-lg .auth-logo-full{height:100px}.auth-logo-full{height:64px}}
@media(max-width:480px){.auth-logo-lg .auth-logo-full{height:80px}.auth-logo-full{height:60px}}

.auth-logo img.auth-logo-full,.auth-logo img.auth-logo-icon{display:block;margin:0 auto;position:static}
.auth-logo-icon{height:104px;width:auto;max-width:100%;filter:drop-shadow(0 0 16px rgba(90,150,255,.35))}
@media(max-width:480px){.auth-logo-icon{height:88px}}

/* ---------- PixelDrop buttons ---------- */
.btn{border-radius:999px}
.btn-primary{
  background:linear-gradient(100deg,#0aa8ff 0%,#2c3dff 46%,#b52dff 100%);
  border:1px solid rgba(160,230,255,.55);
  box-shadow:0 0 0 1px rgba(80,140,255,.25) inset,0 0 10px rgba(60,120,255,.28);
  text-shadow:0 1px 8px rgba(0,20,90,.45);
  transition:box-shadow .2s,filter .2s,transform .16s;
}
.btn-primary:hover{opacity:1;filter:brightness(1.1) saturate(1.05);box-shadow:0 0 0 1px rgba(160,220,255,.45) inset,0 0 14px rgba(70,150,255,.4)}
.btn-primary:active{filter:brightness(.88);transform:translateY(1px);box-shadow:0 0 8px rgba(60,100,255,.3)}
.btn-primary:disabled{background:#131c2e;border-color:#26344d;box-shadow:none;color:#5d6f8c;text-shadow:none;filter:none;opacity:1}
.btn-outline{background:rgba(6,14,30,.7);border:1px solid transparent;background-image:linear-gradient(rgba(6,14,30,.85),rgba(6,14,30,.85)),linear-gradient(100deg,#19b9ff,#7b4bff,#e030ff);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 18px rgba(80,110,255,.25)}
.btn-outline:hover{box-shadow:0 0 26px rgba(110,110,255,.5)}
.btn.is-copied{background:rgba(34,197,94,.18) !important;background-image:none !important;border-color:#22c55e !important;color:#4ade80;box-shadow:none !important}
.btn-pd{padding:0 8px 0 16px;min-height:52px;gap:12px;font-size:15px}
.btn-pd .btn-ico{width:26px;height:26px;flex:0 0 auto;filter:drop-shadow(0 0 2px rgba(10,20,50,.6))}
.btn-pd .btn-arrow{align-self:stretch;display:grid;place-items:center;padding:0 14px 0 16px;margin-left:6px;border-left:1px solid rgba(200,230,255,.28);font-size:18px}

/* ---------- PixelDrop user button ---------- */
#connect-btn.connect-button{
  height:48px;padding:0 10px 0 6px;border-radius:999px;gap:10px;color:#eaf2ff;font-size:14px;font-weight:700;letter-spacing:0;
  border:1px solid transparent;
  background-image:linear-gradient(rgba(7,14,30,.92),rgba(7,14,30,.92)),linear-gradient(100deg,#19b9ff,#5b5bff 55%,#e030ff);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 0 18px rgba(70,120,255,.35),0 0 34px rgba(170,60,255,.18);
  transition:box-shadow .2s,filter .2s,transform .16s;
}
#connect-btn.connect-button:hover,#connect-btn[aria-expanded="true"]{filter:brightness(1.15);box-shadow:0 0 26px rgba(80,150,255,.6),0 0 50px rgba(190,70,255,.32)}
#connect-btn.connect-button:active{transform:translateY(1px);filter:brightness(.9)}
#connect-btn .account-avatar{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(#0a1428,#0a1428) padding-box,linear-gradient(135deg,#19e0ff,#7b4bff,#ff40f0) border-box;border:2px solid transparent;box-shadow:0 0 12px rgba(90,160,255,.55)}
#connect-btn .account-avatar img{border-radius:50%}
#connect-btn .account-caret{display:grid;place-items:center;align-self:stretch;padding:0 6px 0 10px;margin-left:2px;border-left:1px solid rgba(200,230,255,.22);font-size:11px;opacity:.9}
@media(max-width:720px){#connect-btn.connect-button{height:44px;max-width:150px;padding:0 8px 0 5px}#connect-btn .account-avatar{width:32px;height:32px}}
#connect-btn #connect-btn-label{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-inner{gap:20px}

/* ---------- files header + neon dropdown ---------- */
.view{padding-top:26px}
#view-home.view{padding-top:0}
#view-files .section-head{align-items:end;margin-bottom:24px}
#view-files .section-head h2{margin-top:4px}
.account-dropdown{
  top:calc(100% + 12px);min-width:210px;padding:8px;gap:4px;border-radius:20px;border:1px solid transparent;
  background-image:linear-gradient(rgba(7,14,30,.96),rgba(7,14,30,.96)),linear-gradient(120deg,#19b9ff,#5b5bff 55%,#e030ff);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 0 22px rgba(70,120,255,.35),0 0 46px rgba(170,60,255,.2),0 24px 50px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}
.account-dropdown button{padding:12px 16px;border-radius:14px;font-size:14px;font-weight:600;color:#dbe8ff;border:1px solid transparent;transition:background .15s,box-shadow .15s,color .15s}
.account-dropdown button:hover,.account-dropdown button:focus-visible{color:#fff;background:linear-gradient(100deg,rgba(25,185,255,.22),rgba(150,60,255,.28));border-color:rgba(140,190,255,.35);box-shadow:0 0 16px rgba(90,140,255,.35)}
.account-dropdown-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(120,170,255,.45),transparent);margin:5px 4px}
#logoff-btn{color:#ff7aa8}
#logoff-btn:hover{background:linear-gradient(100deg,rgba(255,60,120,.2),rgba(200,40,255,.25))!important;border-color:rgba(255,110,170,.45)!important;box-shadow:0 0 16px rgba(255,80,150,.35)!important}

/* Search box: the Ctrl K badge is gone, so drop its reserved padding, and never let the
   extra Admin nav link squeeze the box below a readable width. */
.search{min-width:190px}
.search input{padding-right:14px;text-overflow:ellipsis}
.topbar-inner{gap:12px}
.mainnav{gap:14px}
.search{min-width:175px}

/* ---------- PixelDrop logo (header) ---------- */
.pd-logo{display:block;width:auto;height:auto;min-width:0;flex:0 0 auto;line-height:0;text-decoration:none}
.pd-logo-canvas{display:block}
.pd-logo-full{height:130px;width:auto;display:block}
@media(max-width:1400px){.pd-logo-full{height:96px}}
@media(max-width:1200px){.pd-logo-full{height:80px}}
@media(max-width:1050px){.pd-logo-full{height:72px}}
@media(max-width:720px){.pd-logo-full{height:52px}}
@media(max-width:480px){.pd-logo-full{height:46px}}
@media(max-width:1100px) and (min-width:721px){
  .topbar-inner{padding-left:16px;padding-right:16px;gap:8px}
  .mainnav{gap:10px}
  .search{min-width:0;width:140px;flex:0 1 140px}
  #connect-btn #connect-btn-label{max-width:80px}
}

/* ---------- mobile browser bars / PWA safe areas ---------- */
body{min-height:100vh;min-height:100dvh}
.topbar{padding-top:env(safe-area-inset-top)}
main{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.auth-gate{overflow-y:auto;align-items:flex-start;height:100vh;height:100dvh;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.auth-gate>.auth-landing,.auth-gate>.auth-card{margin:auto}

/* The install row is toggled with [hidden], which .btn / .settings-row display rules would otherwise override. */
#pwa-install-row[hidden],#pwa-install-btn[hidden]{display:none}

/* Status line shown at the bottom of the screen, e.g. while files shared from the phone upload. */
.app-banner{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;width:max-content;max-width:min(560px,calc(100vw - 32px));padding:12px 18px;border-radius:14px;background:#0d1728;border:1px solid var(--border-bright);color:var(--text);font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.app-banner.ok{border-color:#1f7a4a}
.app-banner.error{border-color:#a24a4a;color:#ffd0d0}
.app-banner[hidden]{display:none}

/* Admin: per-file size limit card */
#admin-settings{max-width:760px;margin-bottom:26px}
#admin-settings .settings-row{flex-wrap:wrap;align-items:flex-start}
#admin-settings .settings-row > div:first-child{flex:1 1 300px;min-width:0}
#admin-settings .settings-row-control{flex-wrap:wrap}
#admin-maxfile-input{height:38px;background:#0d1b2e;border:1px solid #263f61;border-radius:10px;color:#eef4ff;padding:0 12px;font-size:14px}
#admin-maxfile-input:focus{outline:none;border-color:#3976c7}

/* TimeVault tab: how-it-works card, block headings, collapsible setup steps */
.timevault-facts-card{max-width:none;margin-bottom:26px}
.timevault-facts{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.timevault-facts li{display:flex;gap:14px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:#a8b6cd}
.timevault-facts strong{color:#eef4ff}
.tv-fact-icon{flex:none;width:42px;height:42px;border-radius:12px;background:#0d1b2e;border:1px solid #1f3a5f;display:grid;place-items:center;font-size:15px}
.timevault-block-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 14px}
.timevault-block-head h3{font-size:17px;letter-spacing:-.02em}
.timevault-block-head .btn{height:38px;padding:0 18px;font-size:13px}
.timevault-setup{background:linear-gradient(160deg,rgba(13,26,45,.92),rgba(8,18,32,.95));border:1px solid #1b3556;border-radius:16px;padding:6px 20px;margin:14px 0 30px}
.timevault-setup summary{cursor:pointer;font-weight:700;font-size:14px;padding:14px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.timevault-setup summary::-webkit-details-marker{display:none}
.timevault-setup summary::after{content:"▾";color:#7d90aa;transition:transform .2s}
.timevault-setup[open] summary::after{transform:rotate(180deg)}
.timevault-setup .timevault-howto{padding:4px 0 18px}
#timevault-tab-unlocked .timevault-devices-list{margin-bottom:6px}

/* Landing page feature strip: centred rows of equal-width items at any window
   width, instead of a ragged 2-column wrap with an orphan on the left. */
.landing-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 40px;max-width:1240px;border-bottom:0}
.landing-trust .trust-item{flex:0 1 210px;padding:0!important;border-right:0!important;min-width:0}
.landing-trust .trust-item small{display:block}
@media(max-width:480px){.landing-trust .trust-item{flex:1 1 100%}}

/* TimeVault: computer detail dialog */
.timevault-device-row{cursor:pointer;transition:border-color .15s}
.timevault-device-row:hover{border-color:#2d5288}
.timevault-device-hint{color:#55a0ff;font-size:11px;margin-top:4px}
.tvd-card{max-width:520px;max-height:90vh;overflow:auto;text-align:left}
.tvd-card h4{margin:20px 0 6px;font-size:14px}
.tvd-status{margin-top:14px;padding:12px 14px;border-radius:12px;background:#0d1b2e;border:1px solid #1f3a5f;font-size:13px;line-height:1.6;color:#c6d3e6}
.tvd-status .muted{display:block;font-size:12px}
.tvd-os-tabs{display:flex;gap:8px;margin:12px 0 4px}
.tvd-os-tabs button{border:1px solid #263f61;background:transparent;color:#a8b6cd;border-radius:999px;padding:6px 16px;font-size:12.5px;cursor:pointer}
.tvd-os-tabs button.is-active{background:#16305a;color:#fff;border-color:#3976c7}
.tvd-steps{margin:10px 0 12px 20px;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.6;color:#a8b6cd}
.danger-text{color:#f87171}

/* Clickable file thumbnails/names open the preview */
.is-previewable{cursor:zoom-in}
.file-row-name.is-previewable:hover{text-decoration:underline}
.day-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.day-select-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:#7d90aa;cursor:pointer;text-transform:none;letter-spacing:0}

/* File preview */
body.preview-open{overflow:hidden}
.preview-overlay{background:rgba(3,6,14,.97);padding:0;align-items:stretch;justify-content:stretch}
.preview-overlay:not([hidden]){display:flex}
.preview-shell{position:relative;flex:1;display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:1fr auto;min-height:0}
.preview-stage{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:56px 0 8px}
.preview-stage img,.preview-stage video{max-width:100%;max-height:100%;border-radius:10px;object-fit:contain;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.preview-stage audio{width:min(520px,100%)}
.preview-stage iframe{width:100%;height:100%;border:0;border-radius:10px;background:#fff}
.preview-text{width:100%;max-height:100%;overflow:auto;background:#0d1728;border:1px solid #1b3556;border-radius:12px;padding:18px;font:13px/1.6 ui-monospace,Consolas,monospace;color:#d6e2f3;white-space:pre-wrap;word-break:break-word}
.preview-none{text-align:center;color:#a8b6cd}
.preview-pd{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:440px;margin:0 auto;padding:34px 28px 26px;border:1px solid #26486e;border-radius:22px;background:rgba(10,21,37,.88)}
.preview-pd-ico{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(18,185,255,.2),rgba(154,60,255,.24));border:1px solid #2f5f96;color:#8fd8ff}
.preview-pd-ico .ui-ico,.preview-pd-ico .ui-ico.ico-solo{width:34px;height:34px}
.preview-pd h4{margin:6px 0 0;font-size:19px;color:#eef4ff}
.preview-pd p{margin:0;font-size:14px;line-height:1.5;color:#a8b6cd}
.preview-pd-action{margin-top:8px}
.preview-pd-btn{display:inline-flex;align-items:center;gap:9px}
.preview-pd-btn img{width:20px;height:20px;filter:brightness(1.6)}
/* behind the card: a quiet echo of Pixeldrain's patterned page, in PixelDrop's blues */
#preview-stage:has(.preview-pd){background:radial-gradient(circle at 50% 42%,rgba(63,110,255,.16),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%234d9cff' stroke-opacity='.11' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");background-size:auto,17px 30px;border-radius:18px}
.preview-pd-tip{margin-top:10px!important;padding-top:14px;border-top:1px solid #1d3554;font-size:12px!important;color:#8ea0bd!important}
.preview-none span{font-size:54px;display:block;margin-bottom:8px}
.preview-nav{grid-row:1;align-self:center;justify-self:center;width:46px;height:46px;border-radius:50%;border:1px solid #29476e;background:rgba(13,23,40,.85);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.preview-nav:hover{background:#16305a}
.preview-nav.prev{grid-column:1}.preview-nav.next{grid-column:3}
.preview-nav[hidden]{display:none}
.preview-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid #29476e;background:rgba(13,23,40,.9);color:#fff;font-size:16px;cursor:pointer}
.preview-info{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 22px calc(14px + env(safe-area-inset-bottom));background:rgba(10,17,32,.96);border-top:1px solid #1b3151}
.preview-titles{min-width:0}
.preview-name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.preview-meta{font-size:12.5px;color:#7d90aa;margin-top:2px}
.preview-actions{display:flex;gap:10px}
.preview-actions .btn{height:38px;padding:0 18px;font-size:13px}
@media(max-width:640px){
  .preview-shell{grid-template-columns:44px 1fr 44px}
  .preview-nav{width:38px;height:38px;font-size:22px}
  .preview-name{max-width:100%}
}

/* Typed delete confirmation */
#confirm-delete-modal .field-label{display:block;margin:16px 0 6px}
#confirm-delete-modal input{margin-bottom:14px}

/* TimeVault: one collapsible row per backup run */
.tv-batch{background:linear-gradient(160deg,rgba(13,26,45,.92),rgba(8,18,32,.95));border:1px solid #1b3556;border-radius:16px;overflow:hidden}
.tv-batch summary{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;list-style:none}
.tv-batch summary::-webkit-details-marker{display:none}
.tv-batch-icon{flex:none;width:40px;height:40px;border-radius:12px;background:#0d1b2e;border:1px solid #1f3a5f;display:grid;place-items:center;font-size:17px}
.tv-batch-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tv-batch-title{font-weight:700;font-size:14px}
.tv-batch-meta{font-size:12px;color:#7d90aa}
.tv-batch-chevron{color:#7d90aa;transition:transform .2s}
.tv-batch[open] .tv-batch-chevron{transform:rotate(180deg)}
.tv-batch-rows{display:flex;flex-direction:column;gap:8px;padding:4px 14px 14px;border-top:1px solid #1b3151;max-height:460px;overflow:auto}
.tv-batch-rows .file-row{background:rgba(6,14,26,.6)}
.day-select-label{white-space:nowrap;flex:none}
.day-select-label input{width:16px;height:16px;margin:0;accent-color:#6366f1;padding:0}
.tv-batch-select{width:17px;height:17px;flex:none;accent-color:#6366f1}

/* Terms checkbox at sign-up, and the site footer */
.terms-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:#a8b6cd;text-align:left;margin:4px 0 12px;cursor:pointer}
.terms-check[hidden]{display:none}
.terms-check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:#6366f1;padding:0}
.terms-check a{color:#7fb0ff}
.site-footer{margin-top:60px;padding:26px 20px 34px;border-top:1px solid rgba(44,67,98,.4);text-align:center}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-bottom:10px}
.site-footer a{color:#8fa3c0;font-size:13px;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.powered-by-pixeldrain{display:inline-flex;align-items:center;gap:7px;margin-top:10px;color:#8fa3c0}
.powered-by-pixeldrain img{width:16px;height:16px;opacity:.85}
.powered-by-pixeldrain:hover{color:#fff}
.powered-by-pixeldrain:hover img{opacity:1}

/* Forgot-password link, delete-account dialog, language selector */
.auth-forgot{text-align:center;margin:10px 0 0;font-size:13px}
.auth-forgot[hidden]{display:none}
.auth-forgot a{color:#8fa3c0}
.danger-zone{border-color:#5a2536}
.danger-zone .settings-row-title{color:#fb7185}
.da-list{margin:4px 0 12px 20px;line-height:1.7}
#settings-language{min-width:140px}

.footer-language{background:transparent;color:#8fa3c0;border:1px solid rgba(44,67,98,.6);border-radius:8px;padding:4px 8px;font-size:13px;width:auto}

/* Menu labels that wrap (longer words in other languages) stay centred, on every language. */
.mainnav a, .mobile-nav a, nav[aria-label="Primary (mobile)"] a{text-align:center;line-height:1.2}
.mainnav{align-items:center}

/* An element marked hidden must stay hidden even when a class gives it a display value
   (the "Get started" button reappeared while sign-ups were closed). */
[hidden]{display:none!important}

/* Phones: the home page's text is centred. */
@media(max-width:720px){
  .auth-landing{text-align:center}
  .landing-copy,.eyebrow{margin-left:auto;margin-right:auto}
  .landing-actions{justify-content:center}
  .landing-trust .trust-item{justify-content:center;text-align:center}
  .landing-trust .trust-item>div{text-align:center}
}

.apt-install{margin-top:10px}
.apt-install summary{cursor:pointer;color:#8fa3c0;font-size:13px;font-weight:600}
.apt-install .apt-commands{margin:8px 0;padding:10px 12px;border:1px solid #1b3556;border-radius:10px;background:rgba(6,12,24,.7);color:#cfe0ff;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-all;user-select:all}

/* Server status light in the top bar: it blinks, calmly when all is well, faster the worse it gets */
.status-menu{position:relative;flex:0 0 auto}
/* on the home / sign-in screen (which covers the top bar) it sits in the corner */
.status-menu-gate{position:absolute;top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));z-index:5}
.status-led{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(62,97,147,.35);background:rgba(11,27,49,.55);color:#a8b6cd;font-size:12px;font-weight:700;cursor:pointer}
.status-led:hover{border-color:rgba(91,157,255,.5)}
.status-led .led{width:10px;height:10px;border-radius:50%;background:#64748b;box-shadow:0 0 6px #64748b;flex:0 0 auto}
.status-led[data-state="ok"] .led{background:#22c55e;box-shadow:0 0 8px #22c55e;animation:led-beat 2.4s ease-in-out infinite}
.status-led[data-state="ok"]{color:#86efac}
.status-led[data-state="degraded"] .led{background:#f59e0b;box-shadow:0 0 8px #f59e0b;animation:led-beat 1.1s ease-in-out infinite}
.status-led[data-state="degraded"]{color:#fbbf24}
.status-led[data-state="offline"] .led{background:#ef4444;box-shadow:0 0 8px #ef4444;animation:led-beat .55s steps(2,jump-none) infinite}
.status-led[data-state="offline"]{color:#f87171}
@keyframes led-beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.status-led .led{animation:none!important}}
.status-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:260px;padding:14px 16px;border-radius:14px;border:1px solid rgba(62,97,147,.4);background:rgba(9,17,32,.97);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.status-pop-title{font-size:13px;font-weight:800;margin-bottom:6px}
.status-pop-msg{font-size:12px;color:#a8b6cd;margin-bottom:8px}
.status-pop-list{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:12px;margin:0}
.status-pop-list dt{color:#8ea0bd}
.status-pop-list dd{margin:0;font-weight:700;text-align:right}
.status-pop-list .is-bad{color:#f87171}
@media(max-width:720px){.status-led-text{display:none}.status-led{padding:0 10px}.status-pop{right:-40px}}

/* the light in the corner: its bubble opens inward so it stays on screen */
.status-menu-gate .status-pop{right:0;max-width:calc(100vw - 32px)}
@media(max-width:720px){.status-menu-gate .status-pop{right:0}}

/* share links */
.link-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#a8b6cd;margin:12px 0}
.link-field select,.link-url{width:100%;height:42px;padding:0 12px;border-radius:12px;border:1px solid #263f61;background:#0d1b2e;color:#eef4ff;font-size:14px}
.link-url{margin:12px 0 8px}
.link-proof-hint{margin:4px 0 16px;padding:12px;border:1px solid #243049;border-radius:12px;background:rgba(245,158,11,.08)}
.link-proof-hint p{margin:0 0 10px;text-align:left}
.link-list-title{margin:18px 0 8px;font-size:13px;color:#8ea0bd}
.link-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.link-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #1b3556;border-radius:12px}
.link-row-info{flex:1;display:flex;flex-direction:column;font-size:13px;min-width:0}
.link-row-url{font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.auth-alt{margin-top:16px}
.auth-sep{display:flex;align-items:center;gap:12px;color:#7d90aa;font-size:12px;margin-bottom:12px}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:#1a2c47}
.auth-alt .btn+.btn{margin-top:10px}
.passkey-list{list-style:none;margin:6px 0 0;padding:0;font-size:13px;color:#b7c4d8}
.passkey-list li{margin:4px 0}
.link-btn{background:none;border:0;padding:0;color:#6fa9fa;cursor:pointer;font:inherit;text-decoration:underline}
.auth-alt-hint{margin-top:12px;text-align:center}
#settings-nimiq-status,#settings-passkey-status,#settings-2fa-status{text-align:left}
.modal-explain{font-size:13px;line-height:1.6;color:#a8b6cd;text-align:left;margin:10px 0 16px}
.modal-explain a{color:#6fa9fa}
.gift-redeem-form{display:flex;gap:10px;margin-top:12px}
.gift-redeem-form input{flex:1;height:42px;padding:0 12px;border-radius:12px;border:1px solid #263f61;background:#0d1b2e;color:#eef4ff;font-size:14px;text-transform:uppercase}
.gift-redeem-form .btn{flex:0 0 auto}
@media(max-width:480px){.gift-redeem-form{flex-direction:column}}

/* =========================================================
   PixelDrop Reference Landing — layered, multilingual implementation
   Background is artwork only. All visible copy is real HTML so i18n can translate it.
   ========================================================= */
.pd-reference-landing{
  position:absolute;left:50%;top:50%;width:1536px;height:1024px;max-width:none;min-height:0;margin:0;
  overflow:hidden;background:transparent;isolation:isolate;
  transform:translate(-50%,-50%) scale(var(--pd-reference-scale,1));transform-origin:center center;
}
.pd-reference-bg{
  position:absolute;inset:0;z-index:0;
  background:#030c1a url('assets/landing/frames/background-reference-1536.png') center center/cover no-repeat;
}
.pd-reference-landing > *:not(.pd-reference-bg){position:absolute;z-index:2}
.pd-ref-logo{left:495px;top:35px;width:540px;height:175px;pointer-events:none}
.pd-ref-logo img{display:block;width:100%;height:100%;object-fit:contain}
.pd-ref-hero-text{left:345px;top:220px;width:845px;height:215px;text-align:center;pointer-events:none}
.pd-ref-hero-text h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:0;font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.055em;line-height:.98}
.pd-ref-hero-text h1 span{font-size:67px;color:#f6f8ff}
.pd-ref-hero-text h1 strong{font-size:60px;background:linear-gradient(90deg,#18bfff 0%,#2d78ff 42%,#d52aff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;white-space:nowrap}
.pd-ref-hero-text p{margin:25px auto 0;max-width:690px;font-size:24px;line-height:1.35;color:#b5c9e8;font-weight:500;letter-spacing:-.015em}
.pd-ref-button{padding:0;border:0;background:transparent;cursor:pointer;line-height:0;appearance:none;z-index:5;position:absolute;display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:18px}
.pd-ref-button img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:-1}
.pd-ref-button span,.pd-ref-button b{position:relative;z-index:2}
.pd-ref-button b{font-size:25px;font-weight:400;line-height:1}
.pd-ref-button-primary{left:633px;top:460px;width:270px;height:70px}
.pd-ref-card{line-height:normal;pointer-events:none;overflow:hidden}
.pd-ref-card>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;z-index:0}
.pd-card-copy{position:absolute;inset:0;z-index:2;text-align:center;font-family:Inter,system-ui,sans-serif;padding:116px 24px 0;color:#eef5ff}
.pd-card-copy h2{margin:0;font-size:20px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.pd-card-copy p{margin:13px auto 0;max-width:235px;color:#a9c3e7;font-size:15px;line-height:1.35;font-weight:500}
.pd-ref-card-1{left:160px;top:560px;width:298px;height:226px}
.pd-ref-card-2{left:478px;top:560px;width:282px;height:226px}
.pd-ref-card-3{left:780px;top:560px;width:284px;height:226px}
.pd-ref-card-4{left:1083px;top:560px;width:297px;height:226px}
.pd-ref-privacy{left:350px;top:815px;width:840px;height:90px;pointer-events:none}
.pd-ref-privacy>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0}
.pd-privacy-copy{position:absolute;inset:0;z-index:2;font-family:Inter,system-ui,sans-serif;text-align:center;color:#c9d9f2}
.pd-privacy-copy>strong{display:block;margin-top:0;font-size:14px;line-height:24px;letter-spacing:.32em;color:#6aaeff;font-weight:700}
.pd-privacy-items{display:grid;grid-template-columns:repeat(4,1fr);height:60px;align-items:center}
.pd-privacy-items>span{font-size:13px;line-height:1.2;color:#a9c2e5;font-weight:500;padding:0 10px}
.pd-privacy-items em{font-style:normal}

/* Login / sign-up uses the same PixelDrop visual system without reusing the landing canvas. */
.auth-gate{background:#030c1a url('assets/landing/frames/background-reference-1536.png') center/cover no-repeat!important}
.auth-card{
  width:min(430px,calc(100vw - 32px));max-width:none;padding:28px 30px 26px;
  background:rgba(8,20,36,.94);border:1px solid rgba(52,116,190,.62);border-radius:22px;
  box-shadow:0 0 0 1px rgba(77,91,255,.08),0 25px 80px rgba(0,0,0,.55),0 0 40px rgba(48,120,255,.12);
  backdrop-filter:blur(8px);text-align:center;
}
.auth-logo-reference{width:300px!important;height:auto!important;margin:0 auto 12px!important}
.auth-logo-reference .auth-logo-full{height:auto!important;width:100%!important;max-width:100%!important;display:block!important}
.auth-reference-subtitle{margin:0 auto 20px;color:#8fb0d8;font-size:13px;line-height:1.45;max-width:330px}
.auth-card h2{font-size:25px;margin:0 0 20px;font-weight:800;letter-spacing:-.035em}
.auth-card form{gap:12px}
.auth-card input{height:48px;background:#0a1729;border:1px solid #24466e;border-radius:11px;color:#eef4ff;padding:0 15px;font-size:14px}
.auth-card input:focus{border-color:#24aaff;box-shadow:0 0 0 3px rgba(36,170,255,.12),0 0 18px rgba(75,90,255,.12)}
.auth-card .btn-primary{background:linear-gradient(100deg,#12b9ff,#425dff 48%,#d527ff);border:1px solid rgba(105,224,255,.8);box-shadow:0 0 22px rgba(48,145,255,.28),0 0 28px rgba(184,48,255,.15)}
.auth-card .btn-outline{border-color:#327fd0;background:rgba(9,20,36,.75)}
.auth-card .btn-outline:hover{border-color:#b43cff;box-shadow:0 0 18px rgba(98,89,255,.22)}
.auth-eyebrow{display:none!important}

@media(max-width:900px){
  .pd-reference-landing{position:relative;left:auto;top:auto;width:100vw;height:100dvh;min-height:760px;transform:none;overflow:hidden}
  .pd-reference-bg{background-size:auto 100%;background-position:center top}
  .pd-ref-logo{left:20%;width:60%;height:auto;top:4%}
  .pd-ref-hero-text{left:5%;width:90%;height:auto;top:19%}
  .pd-ref-hero-text h1 span{font-size:clamp(36px,8vw,54px)}
  .pd-ref-hero-text h1 strong{font-size:clamp(31px,7vw,48px);white-space:normal}
  .pd-ref-hero-text p{font-size:clamp(14px,3.5vw,20px);margin-top:18px}
  .pd-ref-button-primary{left:27%;width:21%;height:auto;top:46%;aspect-ratio:270/70;font-size:clamp(10px,2vw,15px)}
  .pd-ref-card-1{left:5%;width:43%;height:auto;top:56%;aspect-ratio:298/226}.pd-ref-card-2{left:52%;width:43%;height:auto;top:56%;aspect-ratio:282/226}.pd-ref-card-3{left:5%;width:43%;height:auto;top:70%;aspect-ratio:284/226}.pd-ref-card-4{left:52%;width:43%;height:auto;top:70%;aspect-ratio:297/226}
  .pd-card-copy{padding-top:45%;padding-left:8px;padding-right:8px}.pd-card-copy h2{font-size:clamp(12px,2.6vw,18px)}.pd-card-copy p{font-size:clamp(10px,2.1vw,14px);margin-top:7px}
  .pd-ref-privacy{left:8%;width:84%;height:auto;top:85%;aspect-ratio:840/90}.pd-privacy-copy>strong{font-size:clamp(8px,1.8vw,12px)}.pd-privacy-items>span{font-size:clamp(8px,1.6vw,12px)}
}
@media(max-width:560px){
  .pd-reference-landing{height:auto;min-height:980px;overflow-y:auto;overflow-x:hidden}
  .pd-ref-logo{left:19%;width:62%;top:4%}.pd-ref-hero-text{left:5%;width:90%;top:17%}
  .pd-ref-card-1,.pd-ref-card-2,.pd-ref-card-3,.pd-ref-card-4{width:90%;left:5%;height:auto}.pd-ref-card-1{top:49%}.pd-ref-card-2{top:62%}.pd-ref-card-3{top:75%}.pd-ref-card-4{top:88%}
  .pd-ref-privacy{left:7%;width:86%;height:auto;top:101%}
}
.auth-gate .status-menu-gate{display:none!important}

@media(max-width:900px){
  .pd-reference-landing{
    position:relative;
    left:auto;
    top:auto;
    width:100vw;
    height:100dvh;
    min-height:760px;
    transform:none;
    overflow:hidden;
  }
  .pd-reference-bg{background-size:auto 100%;background-position:center top}
  .pd-ref-logo{left:28%;width:44%;height:auto;top:5%}
  .pd-ref-hero-text{left:10%;width:80%;height:auto;top:21%}
  .pd-ref-button-primary{left:39.5%;width:21%;height:auto;top:46%}
  .pd-ref-card-1{left:5%;width:43%;height:auto;top:56%}
  .pd-ref-card-2{left:52%;width:43%;height:auto;top:56%}
  .pd-ref-card-3{left:5%;width:43%;height:auto;top:70%}
  .pd-ref-card-4{left:52%;width:43%;height:auto;top:70%}
  .pd-ref-privacy{left:12%;width:76%;height:auto;top:85%}
}
@media(max-width:560px){
  .pd-reference-landing{height:auto;min-height:980px;overflow-y:auto;overflow-x:hidden}
  .pd-ref-logo{left:19%;width:62%;top:4%}
  .pd-ref-hero-text{left:5%;width:90%;top:17%}
  .pd-ref-button-primary{left:31%;width:38%;top:39%}
  .pd-ref-card-1,.pd-ref-card-2,.pd-ref-card-3,.pd-ref-card-4{width:90%;left:5%;height:auto}
  .pd-ref-card-1{top:49%}.pd-ref-card-2{top:62%}.pd-ref-card-3{top:75%}.pd-ref-card-4{top:88%}
  .pd-ref-privacy{left:7%;width:86%;height:auto;top:101%}
}
/* Language-specific calibration for the same 1536×1024 composition. */
html[lang="de"] .pd-ref-hero-text h1 strong{font-size:52px}
html[lang="es"] .pd-ref-hero-text h1 strong{font-size:55px}
html[lang="fr"] .pd-ref-hero-text h1 strong{font-size:57px}
html[lang="zh"] .pd-ref-hero-text h1 span{font-size:60px}
html[lang="zh"] .pd-ref-hero-text h1 strong{font-size:56px}
html[lang="de"] .pd-card-copy h2,html[lang="es"] .pd-card-copy h2,html[lang="fr"] .pd-card-copy h2{font-size:18px}
html[lang="zh"] .pd-card-copy h2{font-size:19px}

/* =========================================================
   PixelDrop — final reference composition
   One full-viewport background. The 1536×1024 stage contains only
   transparent foreground artwork and live HTML/i18n content.
   No cover-cropping, no duplicated background, no opaque plates.
   ========================================================= */
.auth-gate{
  background-color:#020b19!important;
  background-image:url('assets/landing/frames/background-reference-1536.png')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  /* Preserve the complete artwork, including the planet/horizon.
     Stretching the fixed reference canvas is preferable to crop/zoom. */
  background-size:100% 100%!important;
  background-attachment:initial!important;
}

.pd-reference-landing{
  position:absolute;
  left:50%;
  top:50%;
  width:1536px!important;
  height:1024px!important;
  max-width:none!important;
  min-height:0!important;
  margin:0;
  overflow:visible;
  background:transparent!important;
  isolation:isolate;
  transform:translate(-50%,-50%) scale(var(--pd-reference-scale,1));
  transform-origin:center center;
}

/* The landing stage never paints a second background. */
.pd-reference-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:transparent!important;
  background-image:none!important;
}
.pd-reference-landing > *:not(.pd-reference-bg){
  position:absolute;
  z-index:2;
  background:transparent!important;
}

.pd-ref-button{
  padding:0;
  border:0;
  background:transparent!important;
  cursor:pointer;
  line-height:0;
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:Inter,system-ui,sans-serif;
  font-weight:700;
  font-size:18px;
  position:absolute;
  z-index:5;
}
.pd-ref-button img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  z-index:0;
  background:transparent!important;
}
.pd-ref-button span{position:relative;z-index:2}
.pd-ref-button b{display:none!important}
.pd-ref-button-primary{left:633px;top:460px;width:270px;height:70px}

.pd-ref-card{
  line-height:normal;
  pointer-events:none;
  overflow:visible!important;
  background:transparent!important;
}
.pd-ref-card>.pd-card-shell{
  position:absolute;inset:0;
  display:block;
  width:100%;height:100%;
  object-fit:fill;
  z-index:0;
  background:transparent!important;
}
.pd-ref-card>.pd-card-icon{
  position:absolute;
  z-index:1;
  left:50%;top:23px;
  transform:translateX(-50%);
  width:86px;height:86px;
  object-fit:contain;
  background:transparent!important;
}
.pd-card-copy{
  position:absolute;inset:0;z-index:2;
  text-align:center;
  font-family:Inter,system-ui,sans-serif;
  padding:116px 24px 0!important;
  color:#eef5ff;
  background:transparent!important;
}
.pd-card-copy h2{margin:0;font-size:20px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.pd-card-copy p{margin:13px auto 0;max-width:235px;color:#a9c3e7;font-size:15px;line-height:1.35;font-weight:500}
.pd-ref-card-1{left:160px;top:560px;width:298px;height:226px}
.pd-ref-card-2{left:478px;top:560px;width:282px;height:226px}
.pd-ref-card-3{left:780px;top:560px;width:284px;height:226px}
.pd-ref-card-4{left:1083px;top:560px;width:297px;height:226px}

.pd-ref-privacy{
  left:350px;top:815px;width:840px;height:90px;
  pointer-events:none;overflow:visible!important;
  background:transparent!important;
}
.pd-ref-privacy>.pd-privacy-shell{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill;z-index:0;
  background:transparent!important;
}
.pd-privacy-copy{
  position:absolute;inset:0;z-index:2;
  font-family:Inter,system-ui,sans-serif;
  text-align:center;color:#c9d9f2;
  background:transparent!important;
}
.pd-privacy-copy>strong{
  margin:0!important;height:30px;
  display:flex!important;align-items:center;justify-content:center;
  font-size:14px!important;line-height:1!important;
  letter-spacing:.30em!important;color:#6aaeff;font-weight:700;
}
.pd-privacy-items{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  height:60px!important;align-items:center!important;
}
.pd-privacy-items>span{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:13px!important;padding:0 12px!important;
  font-size:13px!important;line-height:1.2!important;
  color:#a9c2e5!important;font-weight:500!important;
}
.pd-privacy-items>span img{width:34px;height:34px;object-fit:contain;flex:0 0 auto;background:transparent!important}
.pd-privacy-items>span b{font-weight:500;color:#a9c2e5;text-align:left;display:block;max-width:104px}
.pd-privacy-items>span b span{display:block}


/* Language calibration for the fixed reference composition. */
html[lang="de"] .pd-ref-hero-text h1 strong{font-size:52px}
html[lang="es"] .pd-ref-hero-text h1 strong{font-size:55px}
html[lang="fr"] .pd-ref-hero-text h1 strong{font-size:57px}
html[lang="zh"] .pd-ref-hero-text h1 span{font-size:60px}
html[lang="zh"] .pd-ref-hero-text h1 strong{font-size:56px}
html[lang="de"] .pd-card-copy h2,html[lang="es"] .pd-card-copy h2,html[lang="fr"] .pd-card-copy h2{font-size:18px}
html[lang="zh"] .pd-card-copy h2{font-size:19px}

/* Auth sub-views must be mutually exclusive.
   On mobile, hidden() is still the source of truth in JS, but this guard
   prevents the marketing landing canvas from ever showing behind a form if
   the two states are changed in quick succession or during initialisation. */
.auth-gate:has(#auth-card:not([hidden])) .auth-landing,
.auth-gate:has(#auth-reset-card:not([hidden])) .auth-landing,
.auth-gate:has(#auth-2fa-card:not([hidden])) .auth-landing{
  display:none!important;
}

/* Login keeps the same artwork, but the form is a separate glass layer. */
.auth-card{
  width:min(460px,calc(100vw - 40px))!important;
  padding:34px 36px 30px!important;
  background:rgba(7,18,33,.76)!important;
  border:1px solid rgba(52,116,190,.72)!important;
  border-radius:22px!important;
  box-shadow:0 0 0 1px rgba(77,91,255,.08),0 28px 90px rgba(0,0,0,.48),0 0 55px rgba(48,120,255,.14);
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.auth-logo-reference{width:330px!important;height:auto!important;margin:0 auto 16px!important}
.auth-logo-reference .auth-logo-full{width:100%!important;height:auto!important;max-width:100%!important}
.auth-reference-subtitle{max-width:360px!important}

@media(max-width:900px){
  .pd-reference-landing{
    position:relative;left:auto;top:auto;
    width:100vw!important;height:100dvh!important;
    min-height:760px;transform:none;overflow:hidden;
  }
  .pd-ref-logo{left:28%;width:44%;height:auto;top:5%}
  .pd-ref-hero-text{left:10%;width:80%;height:auto;top:21%}
  .pd-ref-button-primary{left:39.5%;width:21%;height:auto;top:46%;aspect-ratio:270/70}
  .pd-ref-card-1{left:5%;width:43%;height:auto;top:56%;aspect-ratio:298/226}
  .pd-ref-card-2{left:52%;width:43%;height:auto;top:56%;aspect-ratio:282/226}
  .pd-ref-card-3{left:5%;width:43%;height:auto;top:70%;aspect-ratio:284/226}
  .pd-ref-card-4{left:52%;width:43%;height:auto;top:70%;aspect-ratio:297/226}
  .pd-card-copy{padding-top:45%!important;padding-left:8px!important;padding-right:8px!important}
  .pd-card-copy h2{font-size:clamp(12px,2.6vw,18px)}
  .pd-card-copy p{font-size:clamp(10px,2.1vw,14px);margin-top:7px}
  .pd-ref-privacy{left:12%;width:76%;height:auto;top:85%;aspect-ratio:840/90}
  .pd-privacy-copy>strong{font-size:clamp(8px,1.8vw,12px)!important}
  .pd-privacy-items>span{font-size:clamp(8px,1.6vw,12px)!important;padding:0 6px!important}
  .pd-privacy-items>span img{width:28px;height:28px}
  .auth-gate{background-size:100% 100%!important}
}
@media(max-width:560px){
  .pd-reference-landing{height:auto;min-height:980px;overflow-y:auto;overflow-x:hidden}
  .pd-ref-logo{left:19%;width:62%;top:4%}
  .pd-ref-hero-text{left:5%;width:90%;top:17%}
  .pd-ref-button-primary{left:31%;width:38%;top:39%}
  .pd-ref-card-1,.pd-ref-card-2,.pd-ref-card-3,.pd-ref-card-4{width:90%;left:5%;height:auto}
  .pd-ref-card-1{top:49%}.pd-ref-card-2{top:62%}.pd-ref-card-3{top:75%}.pd-ref-card-4{top:88%}
  .pd-ref-privacy{left:7%;width:86%;height:auto;top:101%}
  .auth-card{width:min(94vw,500px)!important;padding:28px 24px 26px!important}
  .auth-logo-reference{width:min(330px,88vw)!important}
}


/* =========================================================
   PixelDrop — interaction/detail pass
   ========================================================= */

/* The reference composition must never clip the live hero copy. */
.pd-ref-hero-text{
  overflow:visible!important;
}
.pd-ref-hero-text p{
  overflow:visible!important;
}

/* Buttons are interactive controls, not static artwork. */
.pd-ref-button{
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    filter .18s ease,
    opacity .18s ease;
  will-change:transform,filter;
}
.pd-ref-button:hover{
  transform:translateY(-3px) scale(1.018);
  filter:
    drop-shadow(0 0 8px rgba(20,190,255,.38))
    drop-shadow(0 0 20px rgba(150,45,255,.24));
}
.pd-ref-button-primary:hover{
  filter:
    drop-shadow(0 0 10px rgba(0,196,255,.52))
    drop-shadow(0 0 24px rgba(198,35,255,.34));
}
.pd-ref-button:active{
  transform:translateY(0) scale(.985);
  filter:
    drop-shadow(0 0 6px rgba(0,180,255,.35));
}
.pd-ref-button:focus-visible{
  outline:2px solid rgba(95,198,255,.9);
  outline-offset:5px;
  border-radius:38px;
}

/* The shell itself contains no text. Text is rendered only by the live button label. */
.pd-ref-button img{
  transition:filter .18s ease,opacity .18s ease;
}

/* Preserve the exact reference proportions on the fixed desktop stage. */
@media(min-width:901px){
  .pd-ref-hero-text p{
    max-width:700px;
    white-space:normal;
  }
}


/* =========================================================
   PixelDrop — precision cleanup pass
   ========================================================= */

/* Hero typography: never clip translated strings or collide with the next line. */
.pd-ref-hero-text{
  z-index:10!important;
  overflow:visible!important;
  height:auto!important;
}
.pd-ref-hero-text h1{
  width:100%!important;
  overflow:visible!important;
}
.pd-ref-hero-text h1 span{
  display:block!important;
  white-space:nowrap!important;
  line-height:1.02!important;
}
.pd-ref-hero-text h1 strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  line-height:1.02!important;
  overflow-wrap:normal!important;
  text-wrap:balance;
}
.pd-ref-hero-text p{
  position:relative!important;
  z-index:2!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  line-height:1.38!important;
  color:#c3d5ef!important;
  text-shadow:0 1px 10px rgba(0,0,0,.42)!important;
}

/* Button shells are transparent artwork only; live HTML owns all labels. */
.pd-ref-button{
  overflow:visible!important;
  isolation:isolate;
}
.pd-ref-button img{
  object-fit:contain!important;
  object-position:center!important;
  overflow:visible!important;
}
.pd-ref-button span{
  white-space:nowrap!important;
  text-shadow:0 1px 8px rgba(0,12,40,.58);
  pointer-events:none;
}
.pd-ref-button-primary span{color:#fff!important}

/* Privacy strip: retain the transparent artwork, but increase legibility over the
   bright planetary horizon without adding a dark plate. */
.pd-ref-privacy{
  z-index:8!important;
}
.pd-privacy-copy>strong{
  color:#82c4ff!important;
  text-shadow:0 0 9px rgba(40,155,255,.42),0 1px 4px rgba(0,0,0,.72)!important;
}
.pd-privacy-items>span{
  color:#d0e2fa!important;
  text-shadow:0 1px 5px rgba(0,0,0,.88),0 0 7px rgba(50,135,255,.16)!important;
}
.pd-privacy-items>span b{
  color:#d0e2fa!important;
  text-shadow:0 1px 5px rgba(0,0,0,.88),0 0 7px rgba(50,135,255,.16)!important;
}
.pd-privacy-items>span img{
  filter:brightness(1.18) saturate(1.12)
          drop-shadow(0 0 4px rgba(20,170,255,.38))!important;
}


/* Keep the complete reference artwork visible; do not stretch it to the viewport. */
@media(min-width:901px){
  .auth-gate{
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#020b19!important;
  }
}

/* Slightly stronger desktop composition while retaining the reference geometry. */
@media(min-width:901px){
  .pd-ref-hero-text p{font-size:23px!important}
  .pd-privacy-items>span{font-size:13.5px!important}
}


/* =========================================================
   PixelDrop — application polish pass 1
   Visual-only: layout rhythm, controls, header proportions and
   settings presentation. No application logic is changed.
   ========================================================= */

/* Shared desktop header: keep the large PixelDrop identity without
   letting the logo make the application chrome unnecessarily tall. */
@media (min-width: 1401px){
  .topbar-inner{min-height:120px;padding:8px 28px;gap:16px}
  .pd-logo-full{height:104px}
  .mainnav{gap:18px}
  .mainnav a{font-size:13px}
  .mainnav a.active::after{bottom:-10px}
  .search{width:min(310px,24vw);min-width:205px}
}

@media (min-width: 1201px) and (max-width: 1400px){
  .topbar-inner{min-height:112px;padding:7px 24px;gap:14px}
  .pd-logo-full{height:96px}
  .mainnav{gap:16px}
  .mainnav a.active::after{bottom:-9px}
}

@media (min-width: 1051px) and (max-width: 1200px){
  .topbar-inner{min-height:104px;padding:6px 20px;gap:12px}
  .pd-logo-full{height:86px}
  .mainnav{gap:13px}
  .mainnav a{font-size:12.5px}
  .mainnav a.active::after{bottom:-8px}
}

/* Consistent control language across the dark application. */
#settings-language,
#drop-request-expiry,
#drop-request-contact,
#link-expiry{
  min-height:40px;
  padding:0 38px 0 13px;
  border:1px solid #27476f;
  border-radius:11px;
  background-color:#0b182a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa8c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
  color:#e8f1ff;
  font-size:12px;
  outline:none;
  color-scheme:dark;
  appearance:none;
  -webkit-appearance:none;
}
#settings-language{min-width:156px}
#settings-language:hover,
#drop-request-expiry:hover,
#drop-request-contact:hover,
#link-expiry:hover{border-color:#3d6da4}
#settings-language:focus-visible,
#drop-request-expiry:focus-visible,
#drop-request-contact:focus-visible,
#link-expiry:focus-visible{
  border-color:#3ea9ff;
  box-shadow:0 0 0 3px rgba(62,169,255,.12),0 0 18px rgba(76,88,255,.12);
}
#settings-language option,
#drop-request-expiry option,
#drop-request-contact option,
#link-expiry option{background:#0b182a;color:#eef5ff}

/* Every .toggle checkbox site-wide (share-link and drop-request options, admin signups toggle) —
   previously unstyled, falling back to the browser's bare native checkbox, which on some devices
   renders as a large plain square that clashes with everything else on the page. */
.toggle{display:flex;align-items:center;gap:10px;margin:14px 0;cursor:pointer;font-size:13px;color:#a8b6cd;line-height:1.4}
.toggle input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:0 0 auto;
  border:1px solid #31527b;border-radius:6px;
  background:#0b182a;
  margin:0;padding:0;cursor:pointer;position:relative;
  transition:border-color .16s,background .16s;
}
.toggle input[type="checkbox"]:hover{border-color:#557bab}
.toggle input[type="checkbox"]:checked{background:var(--gradient);border-color:transparent}
.toggle input[type="checkbox"]:checked::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px 13px;
}
.toggle input[type="checkbox"]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(62,169,255,.25)}

/* Settings should read as a deliberate application workspace rather than
   a narrow column stranded on the left side of a large desktop screen. */
#view-settings{
  width:min(100%,980px);
  margin:0 auto;
}
#view-settings > .section-head{margin-bottom:24px}
#view-settings > .settings-card{
  width:100%;
  max-width:none;
  padding:24px 26px;
}
#view-settings > .settings-card + .settings-card{margin-top:16px}
#view-settings .settings-row{gap:28px}
#view-settings .settings-row > div:first-child{min-width:0;flex:1 1 auto}
#view-settings .settings-row-title{font-size:14px}
#view-settings .settings-row .muted.small{
  text-align:left;
  line-height:1.55;
  margin-top:3px;
}
#view-settings .settings-row-control{flex:0 0 auto}
#view-settings #timevault-card .settings-row,
#view-settings #danger-card .settings-row{align-items:center}
#view-settings .gift-redeem-form{max-width:680px}

/* File action buttons: same optical footprint and hover language as the
   rest of the application controls. */
.file-row-actions{gap:7px}
.file-row-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(8,19,35,.84);
  border-color:#284668;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease;
}
.file-row-btn:hover{
  transform:translateY(-1px);
  background:#0d2038;
  border-color:#4d9cff;
  color:#fff;
  box-shadow:0 0 15px rgba(63,138,255,.18);
}
.file-row-btn:active{transform:translateY(0)}
.file-row-btn:focus-visible{
  outline:2px solid rgba(95,198,255,.85);
  outline-offset:2px;
}
.file-row-btn.danger:hover{
  border-color:#fb7185;
  color:#ffd1da;
  box-shadow:0 0 15px rgba(251,113,133,.16);
}

/* Shared keyboard-focus language for primary application actions. */
.btn:focus-visible,
.connect-button:focus-visible,
.search input:focus-visible,
.mobile-nav-toggle:focus-visible{
  outline:2px solid rgba(95,198,255,.9);
  outline-offset:3px;
}

/* Slightly tighter footer rhythm on wide screens; preserve the existing
   understated footer rather than adding visual weight. */
.site-footer{padding-top:30px;padding-bottom:24px}

@media(max-width:720px){
  #view-settings{width:100%}
  #view-settings > .settings-card{padding:21px 18px}
  #view-settings .settings-row{align-items:flex-start;gap:16px}
  #view-settings .settings-row-control{margin-top:1px}
  #settings-language{min-width:150px}
}

@media(max-width:480px){
  #view-settings > .settings-card{padding:18px 16px}
  #view-settings .settings-row{flex-direction:column;align-items:stretch}
  #view-settings .settings-row-control{justify-content:flex-start}
  #view-settings .settings-row-control .btn{align-self:flex-start}
  #settings-language{width:100%;min-width:0}
}


/* =========================================================
   PixelDrop — dashboard finishing pass
   Subtle visual polish only. No behavior or layout dependencies.
   ========================================================= */
.storage-hero{
  max-width:780px;
  gap:30px;
  padding-top:46px;
  padding-bottom:54px;
}
.storage-hero-copy>p{
  max-width:540px;
  margin-bottom:24px;
}
.dash-dropzone{
  min-height:212px;
  background:rgba(10,21,37,.64);
  box-shadow:inset 0 1px rgba(255,255,255,.025), 0 14px 34px rgba(0,0,0,.10);
}
.dash-dropzone:hover,
.dash-dropzone:focus-visible{
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 0 0 1px rgba(78,139,208,.10),0 16px 38px rgba(0,0,0,.12);
}
.dash-dropzone-icon{
  filter:drop-shadow(0 0 8px rgba(101,169,255,.20));
}
.dash-playzone{
  background:rgba(20,13,35,.42);
  color:#9c91bc;
}
.hero-actions .btn-primary{
  box-shadow:0 9px 24px rgba(73,85,236,.16);
}
.hero-actions .btn-primary:hover{
  box-shadow:0 11px 28px rgba(73,85,236,.22);
}
.storage-meter-card{
  padding:24px 26px;
}
.storage-meter-track{
  background:#0d1b2e;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
@media(max-width:720px){
  .storage-hero{
    max-width:none;
    padding-top:34px;
    padding-bottom:40px;
  }
}


/* =========================================================
   PixelDrop — mobile landing correction
   Mobile-only layout fix for the public landing page.
   Desktop and all authenticated pages keep their existing layout.
   ========================================================= */
@media (max-width:560px){
  .pd-reference-landing{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100vw!important;
    height:auto!important;
    min-height:1680px!important;
    max-width:none!important;
    margin:0!important;
    padding:18px 0 36px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }

  .pd-reference-landing > *:not(.pd-reference-bg){
    position:relative!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .pd-ref-logo{
    width:min(260px,68vw)!important;
    height:auto!important;
    margin-top:8px!important;
    flex:0 0 auto!important;
  }

  .pd-ref-hero-text{
    width:92%!important;
    height:auto!important;
    margin-top:22px!important;
  }

  .pd-ref-hero-text h1 span{
    font-size:clamp(34px,9vw,40px)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
  }

  .pd-ref-hero-text h1 strong{
    width:100%!important;
    max-width:350px!important;
    margin:0 auto!important;
    font-size:clamp(31px,8.6vw,38px)!important;
    line-height:1.03!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    text-wrap:balance!important;
  }

  .pd-ref-hero-text p{
    max-width:330px!important;
    margin:17px auto 0!important;
    font-size:14px!important;
    line-height:1.38!important;
  }

  .pd-ref-button-primary{
    width:min(210px,56vw)!important;
    height:auto!important;
    aspect-ratio:270/70!important;
    margin-top:18px!important;
    font-size:14px!important;
  }

  .pd-ref-card{
    width:92%!important;
    left:auto!important;
    height:auto!important;
    margin-top:20px!important;
    flex:0 0 auto!important;
  }
  .pd-ref-card-1{aspect-ratio:298/226!important;margin-top:26px!important}
  .pd-ref-card-2{aspect-ratio:282/226!important}
  .pd-ref-card-3{aspect-ratio:284/226!important}
  .pd-ref-card-4{aspect-ratio:297/226!important}

  .pd-card-copy{
    padding:40% 18px 0!important;
  }
  .pd-card-copy h2{
    font-size:18px!important;
    line-height:1.12!important;
  }
  .pd-card-copy p{
    max-width:280px!important;
    margin-top:7px!important;
    font-size:12.5px!important;
    line-height:1.32!important;
  }

  .pd-ref-privacy{
    width:92%!important;
    height:150px!important;
    margin-top:30px!important;
    flex:0 0 auto!important;
  }
  .pd-ref-privacy > .pd-privacy-shell{
    object-fit:fill!important;
  }
  .pd-privacy-copy > strong{
    font-size:10px!important;
    line-height:24px!important;
    letter-spacing:.18em!important;
  }
  .pd-privacy-items{
    grid-template-columns:repeat(2,1fr)!important;
    height:auto!important;
    min-height:112px!important;
    align-items:center!important;
    row-gap:10px!important;
  }
  .pd-privacy-items > span{
    justify-content:center!important;
    gap:7px!important;
    padding:0 8px!important;
    font-size:10px!important;
  }
  .pd-privacy-items > span img{
    width:24px!important;
    height:24px!important;
  }
  .pd-privacy-items > span b{
    max-width:120px!important;
    font-size:10px!important;
  }
}

/* Links under the login/landing screen: the gate covers the page footer, so it carries its own. */
.gate-footer{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:6;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;padding:0 16px;pointer-events:none}
.gate-footer a{pointer-events:auto;color:#8fa3c0;font-size:13px;text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.gate-footer a:hover{color:#fff;text-decoration:underline}
.gate-footer .gate-powered{flex-basis:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px}.gate-footer .gate-powered img{width:16px;height:16px;opacity:.85}.gate-footer .gate-powered:hover{text-decoration:none}

/* Terms / Privacy read in place from the sign-up form, so the person never loses what they typed. */
.legal-modal-card{max-width:720px;width:calc(100% - 28px);max-height:88vh;display:flex;flex-direction:column;text-align:left}
.legal-modal-body{overflow-y:auto;flex:1;padding-right:6px;font-size:14.5px;line-height:1.65;color:#b2bfd4}
.legal-modal-body h1{font-size:26px;line-height:1.2;margin:0 0 8px;color:#fff}
.legal-modal-body h2{font-size:18px;margin:22px 0 6px;color:#fff}
.legal-modal-body h3{font-size:15px;margin:16px 0 4px;color:#fff}
.legal-modal-body p,.legal-modal-body ul,.legal-modal-body ol{margin:0 0 12px}
.legal-modal-body ul,.legal-modal-body ol{padding-left:22px}
.legal-modal-body a{color:#7fb0ff}
.legal-modal-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}

/* Step-by-step "get your Pixeldrain key" list */
.pd-key-steps{counter-reset:k;list-style:none;padding:0;margin:10px 0 14px;text-align:left}
.pd-key-steps li{counter-increment:k;position:relative;padding:0 0 0 34px;margin-bottom:12px;font-size:13px;line-height:1.5;color:#a8b6cd}
.pd-key-steps li:before{content:counter(k);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#0f2038;border:1px solid #2a4f80;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
.pd-key-steps a{display:inline-block;margin-top:4px;color:#7fb0ff;font-weight:600}

/* the global ".auth-card input{height:48px}" was stretching the terms checkbox into a tall box */
.auth-card .terms-check input{height:17px;width:17px}
#legal-modal{z-index:80}

/* Pop-up cards: the "vh" unit counts the area behind a phone's browser bars, so a tall card (the
   share dialog in French, say) ran past the visible screen and looked cut off. "dvh" is the area
   actually on screen; and a soft edge at the top/bottom shows when there is more to scroll to. */
.modal-card{
  max-height:90vh;max-height:calc(100dvh - 40px);
  overscroll-behavior:contain;
  background:
    linear-gradient(#0b1728 30%,rgba(11,23,40,0)) center top/100% 34px no-repeat local,
    linear-gradient(rgba(11,23,40,0),#0b1728 70%) center bottom/100% 34px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(90,150,255,.28),rgba(90,150,255,0)) center top/100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(90,150,255,.28),rgba(90,150,255,0)) center bottom/100% 12px no-repeat scroll,
    #0b1728;
}
@media(max-width:480px){
  .modal-card{padding:20px 18px}
  .modal-card .toggle{margin:10px 0}
  .modal-card label{margin-bottom:10px}
}

/* The login/landing links sit under the content instead of floating over it. Pinned to the bottom of the
   screen they covered the lower lines of a tall login card on phones ("Forgot your password?", "Sign
   up"), because the card scrolls but the links don't. Next to a login/sign-up/reset card, and on any
   phone-sized screen, the links are simply the last thing in the scrolling page. On a wide landing
   screen (a fixed composition with nothing to collide with) they stay pinned to the bottom. */
.auth-gate:has(.auth-card:not([hidden])){flex-direction:column;align-items:center}
.auth-gate:has(.auth-card:not([hidden])) .gate-footer{position:static;margin:18px 0 6px}
@media(max-width:700px){
  .auth-gate{flex-direction:column;align-items:center}
  .gate-footer{position:static;margin:18px 0 6px;gap:4px 16px}
  .gate-footer a{font-size:12px;white-space:nowrap}
}
.apt-commands{white-space:pre-wrap;word-break:break-all;margin:10px 0}
#apt-copy{margin-bottom:10px}
.settings-row .apt-commands{margin:8px 0;padding:10px 12px;border:1px solid #1b3556;border-radius:10px;background:rgba(6,12,24,.7);color:#cfe0ff;font-size:12px;line-height:1.55;user-select:all;text-align:left}
.pd-key-steps .btn{margin-top:6px}
.phone-advanced{margin-top:10px}.phone-advanced summary{cursor:pointer;color:#8fa3c0;font-size:13px}.phone-advanced[open] summary{margin-bottom:8px}

/* Settings groups: collapsed menus that open when pressed, so the page isn't one long scroll. */
.settings-group{margin-bottom:14px}
.settings-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border:1px solid #1f3a5e;border-radius:16px;background:rgba(11,24,42,.8);font-weight:700;font-size:15px;color:#eaf2ff}
.settings-group>summary::-webkit-details-marker{display:none}
.settings-group>summary::after{content:"▸";font-size:15px;color:#7fb0ff;transition:transform .15s}
.settings-group[open]>summary::after{transform:rotate(90deg)}
.settings-group[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.settings-group>.settings-card{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:none}
#phone-add-hint.is-ok{color:#5ee08a;font-weight:600}
#phone-add-address{width:100%;margin:8px 0}
/* the card styling of "#view-settings > .settings-card" now has to reach the card inside each group */
#view-settings .settings-group > .settings-card{width:100%;max-width:none;padding:24px;background:rgba(10,22,40,.92);border:1px solid #1f3a5e;border-top:none;border-radius:0 0 18px 18px;box-sizing:border-box}
#view-settings .settings-group .settings-row{gap:28px}
@media(max-width:700px){#view-settings .settings-group > .settings-card{padding:18px 16px}}
.share-name-list{margin:12px 0}.share-name-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.share-name-row input{flex:1;min-width:0}.share-name-ext{color:#8fa3c0;font-size:14px;white-space:nowrap}

/* Settings text was 10–11px for descriptions: unreadable on a computer and worse on a phone. Everything the person has to
   read in Settings (and in the pop-ups opened from it) is now body-sized. */
#view-settings .muted,
#view-settings .muted.small{font-size:14.5px;line-height:1.6}
#view-settings .settings-row-title{font-size:17px;margin-bottom:6px}
#view-settings .settings-group > summary{font-size:18px;padding:18px 22px}
#view-settings .btn{font-size:15px}
#view-settings .link-btn{font-size:14px}
#view-settings .link-field,
#view-settings label{font-size:14px}
#view-settings .pd-key-steps li{font-size:14.5px;line-height:1.6}
#view-settings .apt-commands{font-size:13.5px}
#view-settings .phone-advanced summary,
#view-settings .apt-install summary{font-size:15px}
#view-settings .passkey-list li,
#view-settings .passkey-list{font-size:14px}
.modal-card .muted,
.modal-card .muted.small{font-size:14px;line-height:1.6}
.modal-card label{font-size:13.5px}
@media(max-width:700px){
  #view-settings .muted,#view-settings .muted.small{font-size:15px}
  #view-settings .settings-row-title{font-size:17px}
}

/* One-line "next thing to set up" card on the dashboard, and the small tip after an upload */
.onboarding-card{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:14px 16px 14px 20px;border:1px solid #2a4f80;border-radius:16px;background:linear-gradient(100deg,rgba(18,185,255,.10),rgba(213,39,255,.10))}
.onboarding-card[hidden],.nudge-card[hidden]{display:none}
.onboarding-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.onboarding-step{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7fb0ff}
.onboarding-body strong{font-size:16px}
.onboarding-body .muted.small{font-size:14px;line-height:1.5;margin:0;text-align:left}
.onboarding-card .btn{min-height:42px;flex:0 0 auto}
.onboarding-close{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid #28415f;background:transparent;color:#8fa3c0;font-size:20px;line-height:1;cursor:pointer}
.onboarding-close:hover{color:#fff;border-color:#557bab}
@media(max-width:700px){.onboarding-card{flex-wrap:wrap}.onboarding-body{flex:1 1 100%}.onboarding-card .btn{flex:1}}
.nudge-card{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;max-width:380px;padding:16px 18px;border:1px solid #2a4f80;border-radius:16px;background:#0b1728;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.nudge-card p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#cfe0ff}
.nudge-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.nudge-actions .btn{min-height:40px;font-size:14px;padding:0 16px}
@media(max-width:700px){.nudge-card{left:14px;right:14px;max-width:none}}
.upload-cancel{margin-top:10px;min-height:38px;font-size:14px;padding:0 16px}
#dash-greeting-eyebrow{font-size:13px;letter-spacing:.12em}

/* Plans: a paying Membre sees their membership (and its countdown) instead of a payment button */
.plan-member-badge{display:flex;flex-direction:column;gap:2px;margin:12px 0;padding:12px 14px;border:1px solid #2f7a52;border-radius:12px;background:rgba(46,219,117,.10)}
.plan-member-badge strong{color:#5ee08a;font-size:15px}
.plan-member-badge span{color:#cfe0ff;font-size:14px}
.plan-member-badge .plan-gift-link{align-self:flex-start;margin-top:6px;font-size:13px}
.plan-card.is-locked .plan-payment-group,.plan-card.is-locked .plan-timevault-toggle{display:none}
.plan-card.is-locked .plan-price,.plan-card.is-locked .plan-price-usd{opacity:.5}

.plan-member-badge.is-trial{border-color:#3b5f99;background:rgba(99,132,255,.10)}
.plan-member-badge.is-trial strong{color:#8db4ff}
.plan-card .paypal-button-container{min-height:0}

/* One type scale for the whole app: secondary text is never below 13px, descriptive text never below 14px
   (the older rules above used 9-12px in many places; this block is the single place that decides). */
.muted{font-size:14px}
.muted.small{font-size:13px}
.plans-intro,.view>p.muted{font-size:15px;line-height:1.5}
.section-kicker,.eyebrow{font-size:12px}
.trial-banner-sub,.plan-price-usd,.plan-payment-label,.file-row-meta,.timevault-device-meta,.tv-batch-meta,.contact-row-address,
.field-label,.auth-toggle,.auth-sep,.status-pop-msg,.status-pop-list,.day-select-label,.admin-plan-field,
.drop-request-secure-note,.drop-request-sign-badge,.recent-shared-mini-when,.timevault-device-hint,.tvd-status .muted,.back,
.site-footer a,.gate-footer a,.footer-language,.hero-meta,.trust-item small{font-size:14px}
.recent-shared-mini-kicker,.plan-paypal-divider{font-size:12px}
.btn-small,.bulk-toolbar .btn,.timevault-howto-step .btn{font-size:14px}
.plan-member-badge span{font-size:14px}
.plan-price-usd{color:#8ea0bd}

/* The login page is centred in a scrolling gate; when its content is taller than the screen (a phone), plain centring
   pushes the top (logo, title, sign-in button) above the screen where it can't be scrolled to — the page then seemed
   to open scrolled to the bottom. Auto margins centre it when it fits and start at the top when it doesn't. */
.auth-gate{justify-content:flex-start}
.auth-gate>*{margin-top:auto;margin-bottom:auto}

/* the small "create an account" link under the landing's Log in button (positioned from the button by placeCreateLink) */
.pd-ref-create-link{position:absolute;z-index:5;transform:translateX(-50%);white-space:nowrap;color:#9fb6d8;font-size:15px;line-height:1.3;text-decoration:none}
.pd-ref-create-link b{color:#8db8ff;font-weight:700;text-decoration:underline}
.pd-ref-create-link:hover b{color:#fff}
.pd-ref-create-link[hidden]{display:none}
.pd-ref-create-link.is-stacked{position:relative;transform:none;align-self:center;margin:10px 0 0;left:auto;top:auto}

/* A paying Membre's banner is a small badge in the same style as the one on the Plans page: green outline, one line, only as wide as its text
   (the renewal link still shows in the last month) */
.trial-banner.is-compact{display:inline-flex;width:fit-content;max-width:100%;padding:8px 14px;margin-bottom:14px;border-radius:12px;box-shadow:none;background:rgba(46,219,117,.10);border:1px solid #2f7a52;gap:6px 14px}
.trial-banner.is-compact:before{display:none}
.trial-banner.is-compact .trial-banner-sub{display:none}
.trial-banner.is-compact .trial-banner-text{flex:0 1 auto}
.trial-banner.is-compact .trial-banner-text strong{font-size:15px;font-weight:700;color:#5ee08a}
.trial-banner.is-compact .trial-banner-text strong:before{content:"✓ "}
.trial-banner.is-compact .link{font-size:14px}

/* On a phone the top bar (logo + menu + status + account) was wider than the screen, so the whole page could be scrolled
   sideways and the browser shrank everything: the account button shows only its picture there, and the logo is smaller. */
@media(max-width:480px){
  .topbar .pd-logo-canvas,.topbar .pd-logo-full{width:112px}
  .topbar #connect-btn-label{display:none}
  .topbar .connect-button{width:auto;padding-left:6px;padding-right:6px;gap:4px}
}

/* The browser extension's page, laid exactly over the dashboard drop box. It is transparent: the box underneath is what people
   see; the page above only catches the drop. Under the header (z-index 20) and under every pop-up. */
#ext-dropzone{position:fixed;z-index:10;border:0;background:transparent;color-scheme:normal;border-radius:18px}
#ext-dropzone.is-parked{left:-9999px;top:0;width:1px;height:1px;pointer-events:none}
.ext-transfer{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:14px;align-items:center;max-width:min(460px,calc(100vw - 32px));padding:14px 16px;border:1px solid #2a4f80;border-radius:14px;background:#0b1728;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.ext-transfer[hidden]{display:none}
.ext-transfer-main{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.ext-transfer .upload-bar{margin:2px 0 0}

/* above the drop box on the dashboard (full width of the box), floating on the other screens */
.ext-transfer.is-inline{position:static;max-width:none;width:100%;margin:0 0 14px;box-shadow:none}
.ext-transfer-main strong{white-space:nowrap}
.ext-transfer{min-width:min(340px,calc(100vw - 32px))}

/* free mode: the person unpinned it, so it floats where they dragged it (grab the dotted handle); pinned: above the drop box */
.ext-transfer-grip{cursor:grab;color:#6f809d;font-size:20px;line-height:1;user-select:none;touch-action:none;padding:2px 2px}
.ext-transfer.is-free{max-width:min(460px,calc(100vw - 32px))}
.ext-transfer.is-dragging{opacity:.92;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.ext-transfer.is-dragging .ext-transfer-grip{cursor:grabbing}
.ext-transfer-pin{border:1px solid #263f61;background:transparent;border-radius:9px;color:#8ea0bd;padding:6px 8px;cursor:pointer;font-size:16px;line-height:1;flex:0 0 auto}
.ext-transfer-pin.is-pinned{background:rgba(111,169,250,.14);border-color:#3b6fb0;color:#fff}
.ext-transfer-main .upload-bar{width:100%;max-width:none}

/* "View all" sits right beside the section title instead of at the far edge */
.section-title-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.section-title-row .link{font-size:14px;font-weight:700;white-space:nowrap}

/* file icons: a line icon in PixelDrop's colours for the kind of file, with its extension below */
.file-glyph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;color:#69a6ff}
.file-glyph svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.file-glyph small{font-size:8px;font-weight:800;letter-spacing:.05em;color:#8fb6ee}
/* only the colours of the PixelDrop logo: cyan, blue, violet, magenta */
.file-glyph.is-video{color:#a98bff}.file-glyph.is-audio{color:#2ec8ff}.file-glyph.is-archive{color:#d980ff}.file-glyph.is-doc{color:#7fb2ff}.file-glyph.is-file{color:#8da2c0}.file-glyph.is-folder{color:#38bdf8}.file-glyph.is-lock{color:#a98bff}
.file-glyph.is-video small{color:#c4b0ff}.file-glyph.is-audio small{color:#8fe0ff}.file-glyph.is-archive small{color:#eaa8ff}
.file-glyph.is-folder svg,.file-glyph.is-lock svg{width:21px;height:21px}
.folder-row-icon .file-glyph.is-folder{color:#c98bff}

/* small line icons that follow the text colour (instead of colour emojis) */
.ui-ico{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em;margin-right:.4em}
.ext-transfer-pin .ui-ico{margin:0;width:16px;height:16px;vertical-align:middle}
.ui-ico.ico-solo{margin:0;width:18px;height:18px;vertical-align:middle}
.ui-ico.ico-big{margin:0;width:42px;height:42px;opacity:.7}
.password-toggle .eye-ico{margin:0;width:18px;height:18px;vertical-align:middle}
.password-toggle .slash{display:none}.password-toggle.is-visible .slash{display:inline}
.tv-fact-icon .ui-ico{margin:0;width:23px;height:23px;color:#69a6ff;vertical-align:middle}
.drop-request-secure-note .ui-ico,.settings-row-title .ui-ico{color:#69a6ff}
.timevault-badge .ui-ico{width:.95em;height:.95em;margin-right:.3em;vertical-align:-.12em}
.password-toggle{color:#9fb0cc;opacity:.85}.password-toggle:hover,.password-toggle.is-visible{color:#fff;opacity:1}

/* ---------- Stablecoin checkout ---------- */
.evm-card{max-width:440px}
.evm-options{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.evm-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border,#2a3342);border-radius:10px;cursor:pointer}
.evm-option:has(input:checked){border-color:#4d9cff;background:rgba(77,156,255,.08)}
.modal-card .evm-option input[type="radio"]{width:18px;height:18px;min-width:18px;flex:none;padding:0;margin:0;accent-color:#4d9cff}
.evm-option-name{font-weight:600}
.evm-option small{margin-left:auto;opacity:.7;white-space:nowrap}
.evm-qr{display:block;margin:6px auto 4px;border-radius:12px;background:#fff;padding:8px;max-width:100%;height:auto}
.evm-copy-row{display:flex;gap:8px;align-items:center;margin-top:4px}
.evm-copy-row input{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:13px}
.evm-warning{margin:8px 0}
#evm-address{font-size:11.5px}
.evm-status{margin:10px 0;font-weight:600}
.evm-status.is-ok{color:#3ecf8e}
.evm-tx{margin:10px 0}
.evm-tx summary{cursor:pointer;font-size:13px;opacity:.85}
.plan-payment-group [data-action="buy-evm"]{margin-top:8px}

/* =========================================================
   Landing on phones: one scroll area, not two
   The page is scrolled by the full-screen sheet (.auth-gate). The landing inside it also had
   overflow:auto, which made a second, nested scroll area: on phones it swallowed the first swipe
   and fought the outer one, so people could not get to the bottom. The window behind is also
   locked while the sheet is open, so a swipe can never turn into scrolling the page underneath.
   ========================================================= */
@media (max-width:560px){
  .pd-reference-landing{
    overflow-x:clip!important;
    overflow-y:visible!important;
    /* inside the column-shaped sheet it was squeezed down to its minimum height, so the last
       block hung out below it and sat under the links */
    flex:0 0 auto!important;
  }
}
@media (max-width:900px){
  .auth-gate{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  html:has(.auth-gate:not([hidden])),
  body:has(.auth-gate:not([hidden])){
    overflow:hidden;
    height:100%;
  }
}

.dash-dropzone-cap{display:block;max-width:420px;text-align:center;line-height:1.45}
.dash-dropzone-cap a{color:#7ff0ff;text-decoration:underline}

.send-menu{position:fixed;z-index:70;min-width:240px;max-width:min(92vw,340px);background:#0c1a2e;border:1px solid #2d537d;border-radius:12px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.send-menu-title{font-size:12px;color:#8fa3c0;padding:6px 10px 8px;text-transform:uppercase;letter-spacing:.06em}
.send-menu-list{display:flex;flex-direction:column;gap:2px}
.send-menu-item{display:grid;grid-template-columns:12px 1fr;gap:2px 10px;align-items:center;text-align:left;background:transparent;border:0;border-radius:8px;padding:9px 10px;color:#e8f0ff;font:inherit;cursor:pointer}
.send-menu-item:hover{background:rgba(127,240,255,.1)}
.send-menu-item small{grid-column:2;color:#8fa3c0;font-size:12px}
.send-menu-item.is-offline{opacity:.6}
.send-dot{width:10px;height:10px;border-radius:50%;background:#5d6a7a;display:block}
.send-dot.is-on{background:#35d07f}
.send-menu-note{margin:0;padding:8px 10px;color:#b9c8de;font-size:13px;line-height:1.45;max-width:300px}

.people-box{margin:0 0 22px;padding:16px;border:1px solid #1b3556;border-radius:14px;background:rgba(9,20,35,.5)}
.people-title{margin:0 0 6px;font-size:16px}
.people-id-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 14px}
.people-id-row code{font-size:16px;letter-spacing:.06em;padding:6px 10px;border-radius:8px;background:rgba(127,240,255,.08);color:#bfefff}
.people-waiting{margin:0 0 22px}
.people-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.people-actions{display:flex;flex-wrap:wrap;gap:8px}
.people-actions .btn,.people-actions a.btn{height:34px;padding:0 14px;font-size:13px;display:inline-flex;align-items:center;text-decoration:none}
.nav-badge{display:inline-block;min-width:18px;margin-left:6px;padding:1px 6px;border-radius:999px;background:#ff5d8f;color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center}
.nav-badge[hidden]{display:none}
.send-menu-section{padding:8px 10px 2px;color:#8fa3c0;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.send-menu-hours{display:block;padding:4px 10px 6px;color:#b9c8de;font-size:12px}
.send-menu-hours select{margin-left:6px;background:#0a1626;color:#e8f0ff;border:1px solid #2d537d;border-radius:8px;padding:3px 6px}
.send-dot.is-person{background:#7fbcff}

.save-page{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px;background:radial-gradient(circle at 50% 0%,#0d2140,#050b16 70%)}
.save-page[hidden]{display:none}
.save-card{width:min(440px,100%);margin:auto;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid #2d537d;border-radius:18px;background:rgba(9,20,35,.92)}
.save-logo{width:min(220px,70%);align-self:center;margin-bottom:6px}
.save-from{margin:0;font-size:17px;line-height:1.4;text-align:center}
.save-file{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:rgba(127,240,255,.07);word-break:break-word}
.save-note{margin:0;padding:10px 12px;border-radius:10px;background:rgba(127,240,255,.08);font-size:14px;line-height:1.45}
.save-note.is-bad{background:rgba(255,93,143,.12);color:#ffc2d4}

.save-always{display:flex;align-items:center;gap:8px;font-size:14px;color:#b9c8de;cursor:pointer}
.save-always[hidden]{display:none}
.pick-box{display:flex;flex-direction:column;gap:10px}
.pick-box[hidden]{display:none}
.pick-box input[type=search]{width:100%;height:40px;padding:0 12px;border-radius:10px;border:1px solid #2d537d;background:#08111f;color:#e8f0ff;font:inherit}
.pick-list{max-height:300px;overflow-y:auto;border:1px solid #1b3556;border-radius:12px;background:rgba(5,11,22,.5)}
.pick-row{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #12263f;cursor:pointer}
.pick-row:last-child{border-bottom:0}
.pick-row:hover{background:rgba(127,240,255,.06)}
.pick-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pick-row input{accent-color:#7ff0ff;width:18px;height:18px;margin:0}
.pick-row{padding:8px 12px}
.pick-list{max-height:min(46vh,380px);-webkit-overflow-scrolling:touch}
.pick-filters{display:flex;flex-wrap:wrap;gap:6px}
.pick-chip{background:transparent;color:#b9c8de;border:1px solid #2d537d;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.pick-chip.is-on{background:rgba(127,240,255,.16);border-color:#7ff0ff;color:#e8f0ff}
.pick-more{display:block;width:100%;padding:12px;background:transparent;border:0;border-top:1px solid #12263f;color:#7ff0ff;font:inherit;cursor:pointer}
.pick-count{margin:0;text-align:center}

.save-badge{margin:0;text-align:center;font-size:14px;color:#8fa3c0}
.save-badge.is-known{color:#bfefff}
.save-badge.is-verified{color:#5fe39a;font-weight:600}
.dev-apps-box{width:100%}
.dev-app-list{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.dev-app{padding:12px;border:1px solid #1b3556;border-radius:12px;background:rgba(9,20,35,.5)}
.dev-app-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline}
.dev-app-status{font-size:13px;color:#e8c77f}
.dev-app-status.is-ok{color:#5fe39a}
.dev-app-how{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.dev-app-how code{display:block;padding:6px 8px;border-radius:8px;background:rgba(127,240,255,.07);font-size:13px;word-break:break-all}
.dev-app-how .btn{align-self:flex-start;height:34px}
.send-dot.is-app{background:#b58cff;box-shadow:0 0 6px #b58cff}

.dev-form{display:flex;flex-direction:column;gap:14px;margin:10px 0 6px}
.dev-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#9db0cc}
.dev-field input,.dev-input{width:100%;height:52px;background:#0b182a;border:1px solid #203a5d;border-radius:12px;padding:0 16px;color:#eef4ff;font-size:16px;outline:none}
.dev-field input:focus,.dev-input:focus{border-color:#3e78bb;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.dev-form .btn,.dev-app-how .btn{min-height:50px;width:100%}
.dev-app-how .btn{align-self:stretch}
.dev-app-how{gap:10px}
.people-box>p.muted.small,.people-box ol.people-steps{font-size:14.5px;line-height:1.6;text-align:left;margin:8px 0 14px;color:#a9bad1}
.people-box ol.people-steps{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.people-box ol.people-steps li{padding-left:4px}
.invite-note{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:30;max-width:min(560px,calc(100vw - 32px));margin:0;padding:12px 18px;border-radius:14px;background:rgba(18,62,120,.92);border:1px solid #3976c7;color:#eef4ff;text-align:center;font-size:15px}
.contact-invite{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-basis:100%;order:3;margin:2px 0 0;color:#a9bad1;font-size:14.5px;font-weight:500;line-height:1.4;text-align:left;cursor:pointer}
.contact-form .contact-invite input[type=checkbox]{width:20px;min-width:0;height:20px;margin:0;padding:0;flex:none;border-radius:5px;accent-color:#5b9dff;cursor:pointer}
.contact-invite-btn{margin-right:8px;font-size:13px}
.contact-invite-state{margin-right:10px;font-size:13px;text-align:right;max-width:260px;line-height:1.35}

/* Home: what do you want to do? */
.home-cards{margin:0 0 22px}
.home-cards-title{font-size:20px;margin:0 0 12px;letter-spacing:-.01em}
.home-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.home-card{display:flex;align-items:flex-start;gap:14px;text-align:left;padding:16px;border:1px solid #1f3b5f;border-radius:16px;background:linear-gradient(150deg,rgba(13,26,45,.92),rgba(8,18,32,.95));color:#eef4ff;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.home-card:hover,.home-card:focus-visible{border-color:#4a86d0;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25);outline:none}
.home-card-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(18,185,255,.18),rgba(154,60,255,.2));border:1px solid #2f5f96;color:#8fd8ff}
.home-card-ico .ui-ico{width:24px;height:24px}
.home-card-text{display:flex;flex-direction:column;gap:4px}
.home-card-text strong{font-size:16px;line-height:1.25}
.home-card-text small{font-size:14px;line-height:1.45;color:#9db0cc}
@media(max-width:900px){.home-card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.home-card-grid{grid-template-columns:1fr}.home-card{padding:14px}}
/* the account button explained once */
.account-menu{position:relative}
.account-hint{position:absolute;top:calc(100% + 12px);right:0;z-index:40;width:230px;padding:12px 14px;border-radius:14px;background:#123e78;border:1px solid #3976c7;color:#eef4ff;font-size:14px;line-height:1.45;box-shadow:0 14px 36px rgba(0,0,0,.4);cursor:pointer}
.account-hint:before{content:"";position:absolute;top:-7px;right:34px;width:12px;height:12px;background:#123e78;border-left:1px solid #3976c7;border-top:1px solid #3976c7;transform:rotate(45deg)}
/* a hint on the button to press */
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(127,240,255,.0)}50%{box-shadow:0 0 0 6px rgba(127,240,255,.45)}}
.file-row-btn.hint-pulse{animation:hintPulse 1.1s ease-in-out infinite;border-color:#7ff0ff!important}
.file-row.hint-pulse{animation:hintPulse 1.1s ease-in-out infinite;outline:2px solid #7ff0ff;outline-offset:-2px}
/* file buttons say what they do on a wide screen */
.file-row-btn.has-label{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.file-row-btn.has-label span{display:none;margin-left:7px;font-size:13px}
@media(min-width:1000px){.file-row-btn.has-label{width:auto;padding:0 12px}.file-row-btn.has-label span{display:inline}}
/* with a mouse, "Send to…" is the right-click menu (a tooltip on the row says so); the button is for touch screens */
@media(hover:hover) and (pointer:fine){.file-row-btn[data-action="send-device"]{display:none}}
.home-cards-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.home-cards-head .home-cards-title{margin:0}
.home-cards-close{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid #28415f;background:rgba(13,25,43,.8);color:#9db0cc;font-size:22px;line-height:1;cursor:pointer}
.home-cards-close:hover{color:#fff;border-color:#4a86d0}
.home-cards-ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 14px;padding:12px 14px;border:1px solid #2a4f80;border-radius:14px;background:rgba(18,62,120,.35);color:#d6e4fa;font-size:14.5px}
.home-cards-ask span{flex:1 1 260px}
.quickstart-box{width:100%}
.quickstart-box .home-card-grid{margin:12px 0 14px}
.home-cards-toggle{display:flex;align-items:center;gap:12px;margin:0;color:#c3d1e6;font-size:15px;font-weight:500;cursor:pointer}
.home-cards-toggle input[type=checkbox]{width:20px;min-width:0;height:20px;margin:0;padding:0;flex:none;accent-color:#5b9dff;cursor:pointer}