/* Shubh Ventures investor portal — "website look" layer (v3).
   Same language as shubhventures.org: paper background, ink text, Instrument Serif display with
   italic brand-blue accents, eyebrow labels, 24px cards, pill buttons, soft sky blobs and dot grain. */
:root{
  --bg:#f7f9fd; --surface:#ffffff; --surface-2:#eef4fc; --line:#dde6f3; --line-2:#cddbee;
  --ink:#0a1f3d; --ink-2:#44536b; --ink-3:#5b6b82;
  --brand:#0b5fc7; --brand-2:#0b4fae; --navy:#0b2450; --sky:#12a3f0; --gold:#0b5fc7; --gold-soft:#e6f1ff;
  --r:24px; --r-sm:14px;
  --shadow:0 1px 0 rgba(10,31,61,.03),0 24px 60px -40px rgba(11,95,199,.45);
}
[data-theme=dark]{
  --bg:#071225; --surface:#0d1a31; --surface-2:#13233f; --line:#1c2d4b; --line-2:#28406a;
  --ink:#e9f0fc; --ink-2:#b0bfd8; --ink-3:#8494b0; --gold:#4fb8ff; --gold-soft:#10284a;
}

/* no text selection except inputs; copy is done with tap-to-copy buttons */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--bg)}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(11,95,199,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(ellipse at 70% 0%,#000 10%,transparent 60%);-webkit-mask-image:radial-gradient(ellipse at 70% 0%,#000 10%,transparent 60%)}
body::after{content:"";position:fixed;right:-12%;top:-18%;width:560px;height:560px;border-radius:50%;background:rgba(18,163,240,.16);filter:blur(120px);pointer-events:none;z-index:0}
[data-theme=dark] body::after{background:rgba(18,163,240,.10)}
#app{position:relative;z-index:1}

/* eyebrow + display type */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand)}
.eyebrow::before{content:"";width:24px;height:1px;background:color-mix(in srgb,var(--brand) 60%,transparent)}
.greet h2,.top h1,.detail-head h2,.card-auth h2,.modal h3{letter-spacing:-.01em}
.greet{margin:4px 0 26px}
.greet h2{font-size:clamp(2.3rem,5vw,3.4rem);line-height:1;margin-top:10px}
.greet h2 em,.auth-art h1 em{font-style:italic;color:var(--brand)}

/* buttons: pills with the site gradient */
.btn{border-radius:999px;font-weight:700;height:46px;padding:0 22px}
.btn-sm{height:38px;padding:0 16px}
.btn-pri{color:#fff;background:linear-gradient(120deg,#0b4fae,#0b5fc7 45%,#12a3f0);background-size:180% 100%;box-shadow:0 10px 30px -12px rgba(11,95,199,.7)}
.btn-pri:hover{background:linear-gradient(120deg,#0b4fae,#0b5fc7 45%,#12a3f0);background-size:180% 100%;background-position:100% 0;transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(11,95,199,.75)}
.btn-ghost{background:var(--surface);border-color:var(--line)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));color:var(--brand);background:var(--surface);transform:translateY(-1px)}
.btn.big{height:54px;font-size:1rem}
.input{height:50px;border-radius:16px;border-color:var(--line);padding:0 16px}
.input:focus{border-color:var(--brand)}
.seg{border-radius:999px;padding:4px}.seg button{border-radius:999px;padding:7px 14px;font-weight:500}
.seg button.on{background:var(--ink);color:var(--bg)}
.icon-btn{border-radius:999px;width:40px;height:40px}

/* cards */
.card{border-radius:var(--r);border-color:var(--line);padding:24px}
.card h3{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.card h3 small{letter-spacing:.04em;text-transform:none}
.card h3 .btn-link{letter-spacing:0;text-transform:none;font-size:var(--t-sm)}
.kpi .l{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.kpi .v{font-size:2.4rem}
.hero{background:#0a1f3d!important;color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;left:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:rgba(11,95,199,.55);filter:blur(60px);z-index:-1}
.hero::after{border-color:rgba(18,163,240,.3);z-index:-1}
.hero .l{color:#7cc8ff}
.hero-mark{position:absolute;right:14px;top:14px;width:44px;height:44px;opacity:.95;filter:drop-shadow(0 6px 14px rgba(18,163,240,.5));animation:floaty 6s ease-in-out infinite}
.banner{border-radius:20px}
.date-chip{border-radius:14px;background:var(--surface)}
.pill{font-weight:700}
.li{padding:14px 0}

/* shell: floating sidebar + floating pill header, like the website */
@media (min-width:901px){.shell{grid-template-columns:272px 1fr;gap:0}}
.side{margin:14px 0 14px 14px;height:calc(100vh - 28px);top:14px;border:1px solid var(--line);border-radius:28px;padding:18px 14px;box-shadow:var(--shadow)}
.side-logo{display:block;padding:4px 8px 18px;margin-bottom:6px;border-bottom:1px solid var(--line);text-align:center}
.logo-sm{width:112px;height:auto;filter:drop-shadow(0 10px 18px rgba(11,95,199,.18));transition:transform .5s var(--ease)}
.side-logo:hover .logo-sm{transform:scale(1.04) rotate(-1deg)}
.nav a{border-radius:999px;padding:11px 16px}
.nav .pill-bg{border-radius:999px;background:linear-gradient(120deg,#0b4fae,#0b5fc7 50%,#12a3f0)}
.side-foot{border-top:1px solid var(--line);border-radius:0;padding:14px 6px 2px}
.side-foot .cp{font-size:var(--t-sm);color:var(--ink-3);max-width:100%}
.top{margin:14px clamp(14px,2.4vw,28px) 0;border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 24px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 14px 40px -30px rgba(11,95,199,.5);top:14px}
.top h1{font-size:1.6rem}
.content{padding:clamp(18px,3vw,34px) clamp(14px,2.6vw,30px)}
@media (max-width:900px){
  .side{display:none}
  .top{padding:8px 8px 8px 12px}
  .top .brand-m{display:flex;align-items:center}
  .top h1{font-size:1.35rem}
  .tabbar{left:10px;right:10px;bottom:10px;border:1px solid var(--line);border-radius:26px;box-shadow:0 20px 50px -20px rgba(10,31,61,.4);padding:6px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px)}
  .tabbar a{border-radius:20px}
  .tabbar a.on{background:var(--surface-2)}
  .content{padding-bottom:110px}
}

/* auth: website hero feel */
.auth-art{background:linear-gradient(160deg,#f7fbff,#eaf3ff)!important;overflow:hidden}
[data-theme=dark] .auth-art{background:linear-gradient(160deg,#0b1a33,#0a2144)!important}
[data-theme=dark] .auth-art h1{color:#e9f0fc}[data-theme=dark] .auth-art p{color:#b0bfd8}[data-theme=dark] .auth-art .facts b{color:#e9f0fc}
.auth-art .grain{position:absolute;inset:0;background-image:radial-gradient(rgba(11,95,199,.1) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(ellipse at 40% 40%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 40% 40%,#000 20%,transparent 70%);pointer-events:none}
.auth-art .blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.auth-art .b1{width:420px;height:420px;right:-120px;top:-120px;background:rgba(18,163,240,.28)}
.auth-art .b2{width:360px;height:360px;left:-140px;bottom:-60px;background:rgba(11,95,199,.14)}
.auth-art h1{font-size:clamp(2.6rem,5.4vw,4.4rem);margin-top:14px}
.auth-art .eyebrow{position:relative}
.logo-full{width:clamp(170px,18vw,240px)!important}
.card-auth{position:relative}
.auth-logo{display:none;width:96px;height:auto;margin:0 auto 18px}
.card-auth h2{font-size:2.6rem}
.auth-main{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}
.auth-foot{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin:0}
@media (max-width:860px){
  .auth-art{padding:22px 22px 28px}
  .auth-art .brand-full{display:none}
  .auth-art h1{font-size:2.3rem}
  .auth-logo{display:block}
}

/* boot */
.boot-mark img{width:150px!important;height:auto!important}

/* tap to copy */
.cp{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;max-width:100%;border-radius:8px;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent;overflow-wrap:anywhere}
.cp i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;color:var(--ink-3);opacity:.55;flex:none;transition:all .2s}
.cp:hover{color:var(--brand)}.cp:hover i{opacity:1;color:var(--brand);background:var(--surface-2)}
.cp:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cp.done i{opacity:1;background:var(--good-soft);color:var(--good)}
.cp.done i svg{animation:pop .3s var(--ease)}
.hero .cp i{color:#9fd6ff}
.codes{grid-template-columns:repeat(2,1fr);border-radius:16px}
.codes .cp{justify-content:space-between;background:var(--surface);border:1px solid var(--line);padding:8px 10px;border-radius:10px}

/* two-step wizard */
.modal{border-radius:28px;padding:26px}
.wiz-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.wiz-top h3{margin:0}.wiz-top p{margin:2px 0 0}
.wiz-logo{width:64px;height:auto;flex:none;filter:drop-shadow(0 8px 14px rgba(11,95,199,.2))}
.wiz-steps{display:flex;gap:6px;margin:4px 0 18px}
.wiz-steps i{flex:1;height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.wiz-steps i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sky),var(--brand));animation:grow .5s var(--ease) both;transform-origin:left}
.wiz section h4{font:400 1.7rem/1.1 var(--f-display);margin:6px 0 8px}
.wiz-n{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.wiz-in{animation:stepin .45s var(--ease) both}
.store{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.store-b{flex:1;min-width:140px;display:flex;flex-direction:column;padding:12px 16px;border-radius:16px;background:var(--ink);color:var(--bg);text-decoration:none;transition:transform .25s var(--ease)}
.store-b:hover{transform:translateY(-2px)}.store-b small{opacity:.7;font-size:12px}
.wiz-art{display:flex;align-items:center;gap:16px;background:var(--surface-2);border-radius:18px;padding:14px;margin-top:6px}
.wiz-art p{margin:0}
.phone{width:176px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow)}
.ph-top{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 10px}
.ph-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:10px}
.ph-row img{width:26px;height:26px}
.ph-row small{display:block;font-size:10px;color:var(--ink-3)}.ph-row b{white-space:nowrap;font:500 1.05rem/1 ui-monospace,Menlo,monospace;color:var(--brand);letter-spacing:.06em}
.ph-row.dim{opacity:.45}.ph-dot{width:26px;height:26px;border-radius:50%;background:var(--line)}
.ph-t{margin-left:auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--brand);border-right-color:transparent;animation:orbit 3s linear infinite}
.qrbox{text-align:center;margin:12px 0}
details.key{margin-top:12px;border:1px dashed var(--line-2);border-radius:16px;padding:10px 14px}
details.key summary{cursor:pointer;font-size:var(--t-sm);font-weight:700;color:var(--brand)}
details.key ol{padding-left:18px;color:var(--ink-2)}
details.key .secret{display:inline-block}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.mini-steps{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 14px;flex-wrap:wrap}
.mini-steps li{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);background:var(--surface-2);padding:6px 12px 6px 6px;border-radius:999px}
.mini-steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:11px}
@media (max-width:520px){.wiz-art{flex-direction:column;text-align:center}}
@media print{body::before,body::after{display:none}.cp i{display:none}}
.pfoot{display:flex;align-items:center;gap:16px;margin-top:40px;padding:22px 24px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.pfoot-logo{width:84px;height:auto;flex:none}
.pfoot b{display:block;font:400 1.4rem/1.1 var(--f-display);color:var(--ink)}.pfoot span{font-size:var(--t-sm);color:var(--ink-3)}
@media print{.pfoot{display:none}}