/* Me/Sell/Make toolset surface — Civitas kit (WO Phase 1). * Native shell surface that renders the TOOLSETS content (lifted verbatim from * the approved prototype) inside the concierge #panel. Design spec, not the * prototype's wireframe CSS. Readability is a hard rule: body/tile/detail copy * uses bright ink (--ts-ink), never silver-on-black. * * Reuses the shell's :root tokens (--gold/--teal/--silver/--cosmos/--display/ * --body/--mono from concierge.html) and adds surface tokens below. */ .ts-surface{ --ts-ink:#E7ECEE; /* body copy — bright, the hard contrast rule */ --ts-s1:#0F1626; /* surface */ --ts-s2:#141E33; /* raised surface */ --ts-line:#1F2A42; /* hairline border */ --ts-silver-dim:#7F8B95; /* tertiary label */ position:relative; min-height:100%; padding:34px 40px 64px; color:var(--ts-ink); font-family:var(--body); overflow-x:hidden; } /* Atmosphere: faint fixed grid + soft radial glows (gold top, teal lower) — * the avatar-page depth treatment, behind all content. */ .ts-surface::before, .ts-surface::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0} .ts-surface::before{ background-image: linear-gradient(rgba(168,181,189,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(168,181,189,.045) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 85%); -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 85%); } .ts-surface::after{ background: radial-gradient(60% 42% at 50% -6%,rgba(201,168,76,.16),transparent 70%), radial-gradient(70% 50% at 50% 112%,rgba(0,184,169,.13),transparent 72%); } .ts-surface > *{position:relative;z-index:1} /* ── Toolset switcher (Me / Sell / Make) ── */ .ts-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--ts-line); border-radius:12px;background:rgba(15,22,38,.6);backdrop-filter:blur(4px);margin-bottom:22px} .ts-switch .tsbtn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--silver);padding:9px 20px;border-radius:9px;transition:color .2s,background .2s} .ts-switch .tsbtn:hover{color:var(--ts-ink)} .ts-switch .tsbtn.on{background:var(--gold);color:var(--cosmos);font-weight:500} .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)} .ts-title{font-family:var(--display);font-weight:700;font-size:30px;color:var(--gold);margin:10px 0 8px; text-shadow:0 0 24px rgba(201,168,76,.28)} .ts-role{font-size:15px;line-height:1.6;color:var(--ts-ink);max-width:640px} .ts-legend{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 26px;font-family:var(--mono); font-size:11px;letter-spacing:.04em;color:var(--silver)} .ts-legend b{color:var(--ts-ink);font-weight:500} .ts-legend b.live{color:var(--teal)} /* ── Group headers (Me only) ── */ .ts-grphead{margin:26px 0 12px} .ts-grphead .gt{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ts-ink)} .ts-grphead .gd{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--silver);margin-top:3px} /* ── Tile grid ── */ .ts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .ts-tile{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left; padding:18px;border:1px solid var(--ts-line);border-radius:14px;position:relative; background:linear-gradient(160deg,var(--ts-s2),var(--ts-s1)); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} /* Reusable corner flag — any tile with dtApp:true renders a small gold "DT APP" label in the top-right. Subtle (gold text + thin gold-dim border, no fill); clears the top-left icon and the bottom status/tier row. */ .ts-tile .ts-dtapp{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:8px; letter-spacing:.1em;text-transform:uppercase;color:var(--gold); border:1px solid rgba(201,168,76,.35);border-radius:5px;padding:2px 6px;line-height:1;pointer-events:none} .ts-tile:hover{transform:translateY(-3px);border-color:var(--gold); box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(201,168,76,.25)} .ts-tile .tic{font-size:22px;color:var(--gold);line-height:1} .ts-tile .tn{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ts-ink)} .ts-tile .tb{font-size:13px;line-height:1.5;color:var(--ts-ink);opacity:.92} .ts-tile .trow{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px} .ts-tile.flag{border-color:rgba(0,184,169,.4)} /* status pills + tier chip */ .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; padding:3px 9px;border-radius:999px} .st.live{color:var(--teal);border:1px solid var(--teal)} .st.soon{color:var(--silver);border:1px solid var(--silver)} .tier{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--gold)} /* ── Loop strip (Me) ── */ .ts-loop{margin-top:30px;padding:18px;border:1px dashed var(--ts-line);border-radius:14px; background:rgba(15,22,38,.4)} .ts-loopline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px; font-family:var(--mono);font-size:11px;letter-spacing:.04em} .ts-loopline .lp{padding:6px 11px;border-radius:8px;border:1px solid var(--ts-line);color:var(--ts-ink)} .ts-loopline .lp.make{border-color:rgba(201,168,76,.45)} .ts-loopline .lp.sell{border-color:rgba(0,184,169,.45)} .ts-loopline .lp.be{border-color:rgba(168,181,189,.45)} .ts-loopline .lp.map{border-color:rgba(201,168,76,.3);color:var(--gold)} .ts-loopline .arr{color:var(--silver)} /* ── Detail view ── */ .ts-detail{max-width:760px;animation:ts-fade .22s ease both} .ts-back{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--silver);padding:8px 0;margin-bottom:16px} .ts-back:hover{color:var(--gold)} .d-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px} .d-ic{font-size:34px;color:var(--gold);line-height:1;flex:none} .d-title{font-family:var(--display);font-weight:700;font-size:26px;color:var(--ts-ink);margin:0 0 6px} .d-blurb{font-size:15px;line-height:1.55;color:var(--ts-ink);opacity:.92;margin:0 0 12px} .d-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .d-meta .tier{text-transform:uppercase} .needs{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--gold);border:1px solid rgba(201,168,76,.4);border-radius:999px;padding:3px 9px} .d-how{margin:6px 0 22px;padding:18px;border:1px solid var(--ts-line);border-radius:12px;background:var(--ts-s1)} .d-how p{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:var(--ts-ink)} .d-section{margin-top:8px} .inside{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px} .in-card{padding:14px;border:1px solid var(--ts-line);border-radius:11px;background:var(--ts-s2)} .in-card .it{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ts-ink);margin-bottom:4px} .in-card .id{font-size:12.5px;line-height:1.5;color:var(--ts-ink);opacity:.85} /* ── Mocks ── */ .mock{margin:6px 0 22px;padding:18px;border:1px solid var(--ts-line);border-radius:12px;background:var(--ts-s1)} .mock .metricrow{display:flex;flex-wrap:wrap;gap:18px} .mock .metric .ml{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver)} .mock .metric .mv{font-family:var(--display);font-size:22px;color:var(--ts-ink);margin-top:3px} .mock .connectrow{display:flex;align-items:center;justify-content:space-between;gap:12px} .mock .connectrow span:first-child{color:var(--ts-ink);font-size:14px} .mock .connectbtn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--cosmos);background:var(--teal);padding:8px 14px;border-radius:8px} .mock .txn{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--ts-line);font-size:13px;color:var(--ts-ink)} .mock .txn .amt{color:var(--teal);font-family:var(--mono)} .mock .bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:14px} .mock .bars span{flex:1;background:linear-gradient(to top,var(--teal),rgba(0,184,169,.25));border-radius:4px 4px 0 0} .mock .connect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px} .mock .cplat{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border:1px solid var(--ts-line);border-radius:9px;font-size:12.5px;color:var(--ts-ink)} .mock .cplat .cc{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)} .mock .invoiceform .invrow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--ts-line);font-size:13.5px;color:var(--ts-ink)} .mock .canvasbox{border:1px dashed var(--ts-line);border-radius:10px;padding:34px;text-align:center;color:var(--silver);font-family:var(--mono);font-size:12px;letter-spacing:.06em} /* ── Avatar spinning stage (the "start of a video game" treatment) ── */ .av-stage-wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center} .av-stage{position:relative;width:200px;height:200px;flex:none;display:flex;align-items:center;justify-content:center} .av-stage .ring{position:absolute;border-radius:50%} .av-stage .ring.gold{inset:0;border:1.5px solid rgba(201,168,76,.6); border-right-color:rgba(201,168,76,.12);border-bottom-color:rgba(201,168,76,.12); animation:ts-spin 18s linear infinite} .av-stage .ring.teal{inset:22px;border:1.5px solid rgba(0,184,169,.6); border-top-color:rgba(0,184,169,.12);border-left-color:rgba(0,184,169,.12); animation:ts-spin 13s linear infinite reverse} .av-stage .pedestal{position:absolute;inset:44px;border-radius:50%; background:radial-gradient(circle at 50% 38%,rgba(201,168,76,.12),rgba(8,13,26,.9)); box-shadow:0 0 40px rgba(201,168,76,.18),inset 0 0 30px rgba(0,184,169,.1); display:flex;align-items:center;justify-content:center;animation:ts-turntable 24s linear infinite} .av-ctrls{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px} .av-ctrl{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--ts-line);border-radius:9px;font-size:13px;color:var(--ts-ink)} .av-ctrl .ck{font-family:var(--mono);font-size:11px;color:var(--teal)} .wardstrip{display:flex;gap:8px;margin-top:4px} .ward{width:38px;height:38px;border-radius:9px;border:1px solid var(--ts-line);display:flex;align-items:center;justify-content:center;color:var(--gold)} /* ── Brand-mark rotation (the spinning seal) ── */ body .seal{animation:ts-spin 40s linear infinite;transform-origin:50% 50%} @keyframes ts-spin{to{transform:rotate(360deg)}} @keyframes ts-turntable{to{transform:rotate(360deg)}} @keyframes ts-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .ts-surface.switching{animation:ts-fade .2s ease both} /* ── AI navigator (sidebar; replaces the retired DT_APPS shelf) ── */ /* Lives OUTSIDE .ts-surface, so colors are explicit (bright ink, not silver). */ .ts-nav h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 4px} .ts-nav .ts-nav-sub{font-size:11.5px;line-height:1.5;color:#A8B5BD;margin-bottom:10px} .ts-nav .nav-prompt{display:block;width:100%;text-align:left;padding:9px 11px;margin-bottom:6px; border:1px solid #1F2A42;border-radius:9px;background:rgba(15,22,38,.5); color:#E7ECEE;font-family:var(--body);font-size:13px;line-height:1.35;transition:border-color .15s,background .15s} .ts-nav .nav-prompt:hover{border-color:var(--gold);background:rgba(201,168,76,.08)} .ts-nav .nav-prompt i{color:var(--gold);font-style:normal;margin-right:7px} .ts-nav .nav-plug-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#A8B5BD;margin:12px 0 5px} .ts-nav .nav-plug{display:block;width:100%;text-align:left;padding:8px 11px;margin-bottom:5px; border:1px solid rgba(0,184,169,.3);border-radius:9px;background:rgba(0,184,169,.06); color:#E7ECEE;font-family:var(--body);font-size:13px} .ts-nav .nav-plug:hover{border-color:var(--teal);background:rgba(0,184,169,.14)} @media (prefers-reduced-motion: reduce){ body .seal,.av-stage .ring,.av-stage .pedestal{animation:none !important} .ts-detail,.ts-surface.switching{animation:none !important} .ts-tile{transition:none} } /* ───────────────────────────────────────────────────────────────────────── * Avatar Studio surface (WO Phase 1, item C/C''). Ported VERBATIM in look from * digital-me-avatar.html, but EVERY selector is scoped under #dt-avatar-studio * and the mock's generic class names (.top/.panel/.center/.stage/.item/.pill/ * .badge/.hint/.wallet/.crumbs/.nameplate/.tag…) can no longer collide with the * shell or the toolset grid. The mock's :root tokens are scoped onto the root * container (self-contained, non-leaking); the mock's html/body rules are NOT * ported (they would restyle the shell). Fonts come from the shell (concierge * .html already loads Cinzel/Exo 2/DM Mono) — no re-import. * ───────────────────────────────────────────────────────────────────────── */ #dt-avatar-studio{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#1F2A42; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-dim:#0a6a64; --silver:#A8B5BD; --ink:#E7ECEE; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; min-height:100%; background: radial-gradient(1200px 600px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 80% 90%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-avatar-studio *{box-sizing:border-box} /* TOP */ #dt-avatar-studio .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 24px; border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(20,30,51,.6), transparent)} #dt-avatar-studio .crumbs{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase} #dt-avatar-studio .crumbs b{color:var(--gold);font-weight:500} #dt-avatar-studio .nameplate{text-align:center} #dt-avatar-studio .nameplate .h{font-family:"Cinzel",serif;font-weight:600;font-size:20px;letter-spacing:.2em} #dt-avatar-studio .nameplate .sub{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.24em;color:var(--silver);margin-top:3px;text-transform:uppercase} #dt-avatar-studio .nameplate .sub .dot{color:var(--gold);margin:0 7px} #dt-avatar-studio .wallet{justify-self:end;display:flex;gap:10px} #dt-avatar-studio .pill{display:flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid var(--gold-dim);border-radius:999px; background:linear-gradient(180deg, rgba(201,168,76,.08), rgba(201,168,76,.02))} #dt-avatar-studio .pill .v{font-family:"DM Mono",monospace;font-size:15px;color:var(--gold)} #dt-avatar-studio .pill .l{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.2em;color:var(--silver);text-transform:uppercase} #dt-avatar-studio .pill.teal{border-color:var(--teal-dim);background:linear-gradient(180deg, rgba(0,184,169,.08), rgba(0,184,169,.02))} #dt-avatar-studio .pill.teal .v{color:var(--teal)} #dt-avatar-studio .coin-ico{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #ffd76b, #8a6a1c 70%, #4a3a10);box-shadow:0 0 10px rgba(201,168,76,.4)} #dt-avatar-studio .stage{display:grid;grid-template-columns:340px 1fr 340px;align-items:start} #dt-avatar-studio .section-title{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.3em;color:var(--silver); text-transform:uppercase;display:flex;align-items:center;gap:10px;margin:0 0 14px} #dt-avatar-studio .section-title::after{content:"";flex:1;height:1px;background:var(--line)} #dt-avatar-studio .section-title b{color:var(--gold);font-weight:500} /* LEFT WARDROBE */ #dt-avatar-studio .wardrobe{border-right:1px solid var(--line);padding:20px 18px} #dt-avatar-studio .cat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} #dt-avatar-studio .cat-tab{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver); padding:6px 11px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:rgba(15,22,38,.5);transition:all .15s;user-select:none} #dt-avatar-studio .cat-tab:hover{border-color:var(--teal-dim);color:var(--teal)} #dt-avatar-studio .cat-tab.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.06)} #dt-avatar-studio .items{display:flex;flex-direction:column;gap:9px} #dt-avatar-studio .item{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:11px 13px; border:1px solid var(--line);border-radius:7px;background:rgba(15,22,38,.5);cursor:pointer;transition:all .15s;position:relative} #dt-avatar-studio .item:hover{border-color:var(--teal-dim)} #dt-avatar-studio .item.equipped{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.04)} #dt-avatar-studio .item.equipped::after{content:"✓";position:absolute;top:8px;right:10px;font-size:11px;color:var(--gold);font-family:"DM Mono",monospace} #dt-avatar-studio .swatch{width:44px;height:44px;border-radius:5px;border:1px solid var(--line);position:relative;overflow:hidden} #dt-avatar-studio .swatch .brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Cinzel",serif;font-weight:700;font-size:13px;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.6)} #dt-avatar-studio .brand-name{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase} #dt-avatar-studio .item-name{font-size:13px;color:var(--ink);margin-top:2px;line-height:1.2} #dt-avatar-studio .payout{text-align:right;white-space:nowrap} #dt-avatar-studio .payout .rate{font-family:"DM Mono",monospace;font-size:13px;color:var(--teal)} #dt-avatar-studio .payout .unit{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin-top:2px} #dt-avatar-studio .item.none-item .swatch{background:repeating-linear-gradient(45deg,#0c1322,#0c1322 6px,#101a2e 6px,#101a2e 12px)} #dt-avatar-studio .item.none-item .payout .rate{color:var(--silver)} /* CENTER 3D */ #dt-avatar-studio .center{padding:20px;display:flex;flex-direction:column;align-items:center} #dt-avatar-studio .stage-cap{text-align:center;margin-bottom:10px} #dt-avatar-studio .stage-cap .ce{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.4em;color:var(--silver);text-transform:uppercase} #dt-avatar-studio .stage-cap .cn{font-family:"Cinzel",serif;font-size:26px;letter-spacing:.18em;margin-top:5px;font-weight:600} #dt-avatar-studio .canvas-wrap{position:relative;width:100%;max-width:560px;height:clamp(400px,56vh,560px);border:1px solid var(--line); border-radius:12px;overflow:hidden;background:radial-gradient(120% 92% at 50% 40%, rgba(70,86,112,.55), rgba(24,34,54,.30) 46%, rgba(8,13,26,0) 74%),radial-gradient(ellipse at 50% 90%, rgba(201,168,76,.12), transparent 62%)} #dt-avatar-studio #dtav-scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab} #dt-avatar-studio #dtav-scene:active{cursor:grabbing} #dt-avatar-studio .badge{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:6px;padding:5px 10px; border:1px solid var(--teal-dim);border-radius:999px;background:rgba(8,13,26,.8);backdrop-filter:blur(4px)} #dt-avatar-studio .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:dtav-blink 1.6s ease-in-out infinite} #dt-avatar-studio .badge .t{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.22em;color:var(--teal);text-transform:uppercase} @keyframes dtav-blink{0%,100%{opacity:1}50%{opacity:.35}} #dt-avatar-studio .earn-float{position:absolute;top:14px;left:14px;padding:9px 13px;border:1px solid var(--gold-dim);border-radius:8px;background:rgba(8,13,26,.82);backdrop-filter:blur(4px)} #dt-avatar-studio .earn-float .l{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.2em;color:var(--silver);text-transform:uppercase} #dt-avatar-studio .earn-float .v{font-family:"DM Mono",monospace;font-size:20px;color:var(--gold);margin-top:2px} #dt-avatar-studio .earn-float .v small{font-size:10px;color:var(--silver)} #dt-avatar-studio .hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;opacity:.5;white-space:nowrap} /* RIGHT */ #dt-avatar-studio .panel{border-left:1px solid var(--line);padding:20px 18px} #dt-avatar-studio .stat-block{padding:14px;border:1px solid var(--line);border-radius:8px;background:rgba(15,22,38,.5);margin-bottom:14px} #dt-avatar-studio .stat-block.teal{background:rgba(0,184,169,.04)} #dt-avatar-studio .stat-block.gold{background:rgba(201,168,76,.04)} #dt-avatar-studio .stat-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} #dt-avatar-studio .stat-row:last-child{margin-bottom:0} #dt-avatar-studio .stat-l{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase} #dt-avatar-studio .stat-v{font-family:"DM Mono",monospace;font-size:15px;color:var(--ink)} #dt-avatar-studio .stat-v small{color:var(--silver);font-size:9px;margin-left:3px} #dt-avatar-studio .stat-v.teal{color:var(--teal)} #dt-avatar-studio .stat-v.gold{color:var(--gold)} #dt-avatar-studio .split-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;margin:6px 0 12px} #dt-avatar-studio .split-bar i{height:100%} #dt-avatar-studio .split-legend{display:flex;gap:14px;flex-wrap:wrap;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver);text-transform:uppercase} #dt-avatar-studio .split-legend span{display:flex;align-items:center;gap:5px} #dt-avatar-studio .split-legend .d{width:8px;height:8px;border-radius:2px} #dt-avatar-studio .equipped-list{display:flex;flex-direction:column;gap:7px;margin-bottom:14px} #dt-avatar-studio .eq-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 11px; border:1px solid var(--line);border-radius:6px;background:rgba(15,22,38,.5);font-size:12px} #dt-avatar-studio .eq-row .nm{color:var(--ink)} #dt-avatar-studio .eq-row .nm small{display:block;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--silver);text-transform:uppercase;margin-top:1px} #dt-avatar-studio .eq-row .rt{font-family:"DM Mono",monospace;font-size:12px;color:var(--teal);white-space:nowrap} #dt-avatar-studio .eq-row.empty .nm{color:#4a5566;font-style:italic} #dt-avatar-studio .eq-row.empty .rt{color:#4a5566} #dt-avatar-studio .reach-track{height:5px;border-radius:3px;background:var(--cosmos-3);overflow:hidden;margin:8px 0} #dt-avatar-studio .reach-fill{height:100%;width:62%;background:linear-gradient(90deg,var(--teal),var(--gold))} #dt-avatar-studio .btn-primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 16px;margin-top:4px; font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cosmos); background:linear-gradient(180deg,#e0c266,var(--gold));border:1px solid var(--gold);border-radius:8px;cursor:pointer;transition:all .15s} #dt-avatar-studio .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)} #dt-avatar-studio .btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 16px;margin-top:9px; font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver); background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:all .15s} #dt-avatar-studio .btn-ghost:hover{border-color:var(--teal-dim);color:var(--teal)} #dt-avatar-studio .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:999px;white-space:nowrap} #dt-avatar-studio .tag.own{color:var(--teal);border:1px solid var(--teal-dim);background:rgba(0,184,169,.06)} #dt-avatar-studio .tag.soon{color:var(--silver);border:1px solid var(--line);background:rgba(168,181,189,.05)} #dt-avatar-studio .item.locked{opacity:.5;cursor:not-allowed} #dt-avatar-studio .item.locked:hover{border-color:var(--line)} #dt-avatar-studio .av-status{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--silver);line-height:1.5;margin-bottom:12px} #dt-avatar-studio .av-status b{color:var(--gold);font-weight:500} #dt-avatar-studio .lim-note{margin-top:12px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.05em;color:var(--silver);line-height:1.5} #dt-avatar-studio .toast{position:absolute;bottom:54px;left:50%;transform:translateX(-50%) translateY(6px);opacity:0;pointer-events:none; padding:8px 14px;border:1px solid var(--gold-dim);border-radius:8px;background:rgba(8,13,26,.92);backdrop-filter:blur(4px); font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;transition:all .25s;z-index:5} #dt-avatar-studio .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media (max-width:1040px){ #dt-avatar-studio .stage{grid-template-columns:1fr} #dt-avatar-studio .center{order:-1} #dt-avatar-studio .wardrobe,#dt-avatar-studio .panel{border:none;border-top:1px solid var(--line)} #dt-avatar-studio .top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px} #dt-avatar-studio .crumbs{display:none}#dt-avatar-studio .wallet{justify-self:center} } @media (prefers-reduced-motion: reduce){ #dt-avatar-studio .badge .dot{animation:none} } /* Avatar Studio — handle shown alongside the Digital Me name (scoped). */ #dt-avatar-studio .stage-cap .hd{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--silver);margin-top:6px} #dt-avatar-studio .stage-cap .hd:empty{display:none} /* Avatar Studio — social channels DISPLAY-ONLY preview grid (look ported from social-channels-grid.html; scoped + dtav- prefixed). No wiring/OAuth/data. */ /* Full-width row across the whole stage so the grid packs into multiple columns (the center column alone is too narrow — one tile per row). In the single-column stacked layout (<=1040px) 1 / -1 is simply the one column = full width. */ #dt-avatar-studio .dtav-social{grid-column:1 / -1;margin-top:6px;padding:18px 20px 4px;border-top:1px solid var(--line)} #dt-avatar-studio .dtav-social-head{display:flex;align-items:center;gap:12px;margin:0 2px 4px} #dt-avatar-studio .dtav-social-head .t{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} #dt-avatar-studio .dtav-social-head .tag{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal-dim);background:rgba(0,184,169,.06);padding:3px 8px;border-radius:999px} #dt-avatar-studio .dtav-social-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} #dt-avatar-studio .dtav-social-sub{font-family:"Exo 2",system-ui,sans-serif;font-size:12.5px;color:var(--silver);margin:0 2px 16px;line-height:1.5} #dt-avatar-studio .dtav-social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px} #dt-avatar-studio .dtav-ch{border:1px solid var(--line);border-radius:10px;background:rgba(20,28,44,.4);padding:12px 13px;display:flex;flex-direction:column;gap:9px;transition:border-color .15s} #dt-avatar-studio .dtav-ch:hover{border-color:#28344a} #dt-avatar-studio .dtav-ch-top{display:flex;align-items:center;justify-content:space-between;gap:8px} #dt-avatar-studio .dtav-ch-name{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:.01em} #dt-avatar-studio .dtav-ch-connect{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:transparent;border:1px solid var(--teal-dim);border-radius:6px;padding:5px 9px;white-space:nowrap} #dt-avatar-studio .dtav-ch-connect:disabled{cursor:not-allowed;opacity:.55} #dt-avatar-studio .dtav-ch-count{font-family:"DM Mono",monospace;font-size:11px;color:var(--silver);display:flex;align-items:baseline;gap:6px} #dt-avatar-studio .dtav-ch-count b{color:#5d6975;font-weight:500;font-size:15px} #dt-avatar-studio .dtav-ch-count span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.7} #dt-avatar-studio .dtav-ch-more{align-items:center;justify-content:center;border-style:dashed;background:transparent;color:var(--silver);min-height:78px} #dt-avatar-studio .dtav-ch-more span{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;text-align:center} #dt-avatar-studio .dtav-social-foot{margin-top:14px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--silver);opacity:.7;text-align:center;line-height:1.6} /* ───────────────────────────────────────────────────────────────────────── * CANONICAL PLATFORM PATTERN — reach contrast (NOT scoped; reusable across * surfaces). BOTH numbers render at full weight (Sacred Gold + Cipher Teal * labels, equal size/opacity) — the social/unverified number is NO LONGER * de-emphasised. The real distinction is the explicit "unverified" tag on the * social number, not visual de-emphasis. Uses the shell brand tokens * (--gold/--teal), which exist on both concierge.html :root and #dt-avatar-studio. * ───────────────────────────────────────────────────────────────────────── */ .dt-reach-contrast{display:flex;flex-direction:column;gap:14px} .dt-reach-num{font-family:"DM Mono",ui-monospace,monospace;line-height:1;font-size:30px;font-weight:500;color:var(--gold);text-shadow:0 0 14px rgba(201,168,76,.25)} .dt-reach-label{font-family:"DM Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;margin-top:5px;font-size:10px;color:var(--teal)} .dt-reach-tag{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--silver);border-radius:999px;font-size:8px;letter-spacing:.12em;opacity:.85} /* ───────────────────────────────────────────────────────────────────────── * Social Collage surface (/me/collage) — display-only. Look ported VERBATIM from * social-collage.html, but EVERY selector is scoped under #dt-collage and the mockup's * generic class names (.top/.tile/.card/.profile/.grid/.pfp/.media/.corner/.cap…) can no * longer collide with the shell or other surfaces. The mockup's :root tokens are scoped * onto the root container; its html/body rules are NOT ported; body.owner/.public/ * .noavatar → #dt-collage.owner/.public/.noavatar. Fonts come from the shell. * ───────────────────────────────────────────────────────────────────────── */ #dt-collage{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; min-height:100%; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 95%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-collage *{box-sizing:border-box} #dt-collage .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 22px; border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(20,30,51,.6), transparent)} #dt-collage .crumbs{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase} #dt-collage .crumbs b{color:var(--gold)} #dt-collage .np{text-align:center} #dt-collage .np .h{font-family:"Cinzel",serif;font-weight:600;font-size:19px;letter-spacing:.2em;color:#fff} #dt-collage .np .s{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.22em;color:var(--silver);margin-top:3px;text-transform:uppercase} #dt-collage .viewtoggle{justify-self:end;display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} #dt-collage .viewtoggle button{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase; padding:8px 14px;background:transparent;color:var(--silver);border:none;cursor:pointer;transition:all .15s} #dt-collage .viewtoggle button.on{background:rgba(201,168,76,.16);color:var(--gold)} #dt-collage .profile{display:flex;align-items:center;gap:18px;padding:20px 26px;border-bottom:1px solid var(--line);flex-wrap:wrap} #dt-collage .pfp{width:78px;height:78px;border-radius:50%;flex:none;border:2px solid var(--gold);position:relative; overflow:hidden;background:radial-gradient(circle at 50% 30%, #2a3550, #0b1325)} #dt-collage .pfp::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(201,168,76,.3)} /* thumbnail fallback chain — (a)/(b) inject .pfp-img; (c) = .noavatar silhouette + tag */ #dt-collage .pfp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1} #dt-collage .pfp-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:1} #dt-collage .pfp .av{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center} #dt-collage .pfp .av svg{width:62px;height:62px;filter:drop-shadow(0 0 6px rgba(201,168,76,.5))} #dt-collage .pfp .deftag{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);display:none;z-index:2; font-family:"DM Mono",monospace;font-size:6.5px;letter-spacing:.1em;color:var(--silver); background:rgba(8,13,26,.92);padding:1px 5px;border-radius:6px;text-transform:uppercase;white-space:nowrap} /* No photo/snapshot → live spinning avatar canvas. If WebGL can't load, JS adds .thumb-failed and the static silhouette + tag take over. */ #dt-collage.noavatar .pfp-img{display:none} #dt-collage.noavatar .pfp-canvas{display:block} #dt-collage.noavatar.thumb-failed .pfp-canvas{display:none} #dt-collage.noavatar.thumb-failed .pfp .av{display:flex} #dt-collage.noavatar.thumb-failed .pfp .deftag{display:block} #dt-collage.noavatar .pfp{background:radial-gradient(circle at 35% 30%, #1c2a44, #0b1325)} #dt-collage .pinfo{flex:1;min-width:220px} #dt-collage .pinfo .name{font-family:"Cinzel",serif;font-size:23px;letter-spacing:.05em;font-weight:600;color:#fff} #dt-collage .pinfo .meta{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--silver);margin-top:5px} #dt-collage .pinfo .meta .v{color:var(--teal)} #dt-collage .pinfo .bio{font-size:13px;color:var(--ink);opacity:.92;margin-top:9px;max-width:560px;line-height:1.55} #dt-collage .pinfo .bio-line{font-style:italic;color:var(--gold);font-size:12.5px;letter-spacing:.04em;margin-top:6px} #dt-collage .owner-bar{display:none;margin:18px 26px 2px;padding:13px 16px;border:1px solid var(--gold-dim);border-radius:12px; background:linear-gradient(180deg, rgba(201,168,76,.06), transparent);align-items:center;gap:16px;flex-wrap:wrap} #dt-collage.owner .owner-bar{display:flex} #dt-collage .owner-bar .ot{flex:1;min-width:250px;font-size:13px;color:var(--ink);opacity:.9;line-height:1.55} #dt-collage .owner-bar .ot b{color:var(--gold);font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px;opacity:1} #dt-collage .proj{display:flex;gap:8px;flex-wrap:wrap} #dt-collage .proj .chip{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase; padding:8px 13px;border-radius:999px;border:1px solid var(--line);color:var(--silver);background:rgba(15,22,38,.5);cursor:pointer;user-select:none} #dt-collage .proj .chip.on{border-color:var(--teal-dim);color:var(--teal);background:rgba(0,184,169,.1)} #dt-collage .public-note{display:none;margin:16px 26px 0;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--silver)} #dt-collage.public .public-note{display:block} #dt-collage .wall-head{display:flex;align-items:center;justify-content:space-between;padding:16px 26px 8px;flex-wrap:wrap;gap:10px} #dt-collage .wall-title{font-family:"Cinzel",serif;font-size:17px;letter-spacing:.12em;color:#fff} #dt-collage .wall-title small{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.2em;color:var(--silver);text-transform:uppercase;margin-left:10px} #dt-collage .legend{display:flex;gap:16px;flex-wrap:wrap;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver);text-transform:uppercase} #dt-collage .legend span{display:flex;align-items:center;gap:6px} #dt-collage .legend .d{width:9px;height:9px;border-radius:2px} #dt-collage .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:8px 26px 36px;grid-auto-flow:dense} #dt-collage .tile{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--cosmos-2); min-height:158px;transition:border-color .15s} #dt-collage .tile:hover{border-color:var(--teal-dim)} #dt-collage .tile.w2{grid-column:span 2} #dt-collage .tile.h2{grid-row:span 2} #dt-collage .tile .corner{position:absolute;top:9px;left:9px;z-index:3;display:flex;align-items:center;gap:5px; padding:4px 9px;border-radius:999px;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(4px)} #dt-collage .tile .corner .ci{width:6px;height:6px;border-radius:2px} #dt-collage .embed .corner{background:rgba(0,184,169,.2);color:#3fe0d2} #dt-collage .embed .corner .ci{background:var(--teal)} #dt-collage .card .corner{background:rgba(184,196,204,.16);color:#cdd6dc} #dt-collage .card .corner .ci{background:var(--silver)} #dt-collage .media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"DM Mono",monospace;font-size:11px;color:rgba(255,255,255,.5)} #dt-collage .media.g2{background:linear-gradient(135deg,#0a3f3a,#0c1322)} #dt-collage .media.g4{background:linear-gradient(135deg,#2a1c3a,#0c1322)} #dt-collage .media.g6{background:linear-gradient(135deg,#11324f,#0c1322)} #dt-collage .tile .cap{position:absolute;bottom:0;left:0;right:0;padding:11px 13px;z-index:2; background:linear-gradient(0deg, rgba(8,13,26,.95), transparent);font-size:12.5px;color:#fff;line-height:1.4} #dt-collage .tile .cap .sub{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver);margin-top:4px;text-transform:uppercase} #dt-collage .card-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px} #dt-collage .ch-logo{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff; font-family:"Arial",sans-serif;font-weight:800;font-size:22px;border:1px solid rgba(255,255,255,.12)} #dt-collage .ig{background:radial-gradient(circle at 30% 110%,#fdb84b,#fd1d1d 45%,#b330a8 70%,#5b51d8)} #dt-collage .tt{background:#0a0a0a} #dt-collage .yt{background:#ff0033} #dt-collage .xx{background:#000} #dt-collage .li{background:#0a66c2} #dt-collage .fb{background:#1877f2} #dt-collage .th{background:#0a0a0a} #dt-collage .pi{background:#e60023} #dt-collage .bs{background:#1185fe} #dt-collage .ma{background:#6364ff} #dt-collage .rd{background:#ff4500} #dt-collage .tu{background:#001935} #dt-collage .dc{background:#5865f2} #dt-collage .tg{background:#26a5e4} #dt-collage .gb{background:#4285f4;font-size:13px} /* embedded-post placeholder = the platform logo + a neutral "Preview" */ #dt-collage .embed-prev{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px} #dt-collage .preview-tag{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);opacity:.85} #dt-collage .card-body .cn{font-size:14px;color:#fff;font-weight:500;letter-spacing:.01em} #dt-collage .card-body .cc{font-family:"DM Mono",monospace;font-size:15px;color:#3fe0d2} #dt-collage .card-body .cl{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase} #dt-collage .conn-btn{margin-top:5px;padding:7px 18px;border-radius:999px;border:1px solid var(--teal-dim); background:rgba(0,184,169,.1);color:#3fe0d2;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer} #dt-collage .conn-btn:disabled{cursor:not-allowed;opacity:.6} #dt-collage .tile .grip{position:absolute;top:8px;right:8px;width:23px;height:23px;border-radius:6px;display:none; background:rgba(8,13,26,.88);border:1px solid var(--gold-dim);align-items:center;justify-content:center; color:var(--gold);font-size:12px;cursor:pointer;z-index:4} #dt-collage.owner .tile .grip{display:flex} #dt-collage.owner .tile{cursor:grab} #dt-collage.owner .tile:hover{border-color:rgba(201,168,76,.55)} #dt-collage .add-tile{border:1px dashed var(--line);border-radius:12px;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px; min-height:158px;color:var(--silver);cursor:pointer;background:rgba(15,22,38,.3);transition:all .15s} #dt-collage .add-tile:hover{border-color:var(--gold-dim);color:var(--gold)} #dt-collage .add-tile .plus{font-size:28px;font-weight:300} #dt-collage .add-tile .t{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase} #dt-collage.owner .add-tile{display:flex} @media (max-width:900px){ #dt-collage .grid{grid-template-columns:repeat(2,1fr)} #dt-collage .tile.w2{grid-column:span 2} #dt-collage .top{grid-template-columns:1fr;justify-items:center;text-align:center} #dt-collage .crumbs{display:none}#dt-collage .viewtoggle{justify-self:center} } /* ───────────────────────────────────────────────────────────────────────── * Unified Inbox surface (/me/unified-inbox) — display-only. Look ported from * unified-inbox.html, EVERY selector scoped under #dt-unified-inbox (the mockup's * generic .top/.rail/.list/.thread/.conv/.msg… can't collide with the shell or the * existing /me/inbox DM page). :root tokens scoped onto the root; html/body rules NOT * ported; body.prio/.disconnected → #dt-unified-inbox.prio/.disconnected. Fills the * #panel as a flex column. No triage-tag / concierge styles. * ───────────────────────────────────────────────────────────────────────── */ #dt-unified-inbox{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; display:flex; flex-direction:column; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 90% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-unified-inbox *{box-sizing:border-box} #dt-unified-inbox .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 22px; border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(20,30,51,.6), transparent)} #dt-unified-inbox .crumbs{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase} #dt-unified-inbox .crumbs b{color:var(--gold)} #dt-unified-inbox .np{text-align:center} #dt-unified-inbox .np .h{font-family:"Cinzel",serif;font-weight:600;font-size:19px;letter-spacing:.2em;color:#fff} #dt-unified-inbox .np .s{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.22em;color:var(--silver);margin-top:3px;text-transform:uppercase} #dt-unified-inbox .pbtabs{justify-self:end;display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} #dt-unified-inbox .pbtabs button{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase; padding:9px 16px;background:transparent;color:var(--silver);border:none;cursor:pointer;transition:all .15s} #dt-unified-inbox .pbtabs button.on{background:rgba(201,168,76,.16);color:var(--gold)} #dt-unified-inbox .shell{flex:1;display:grid;grid-template-columns:230px 330px 1fr;min-height:0} #dt-unified-inbox .rail{border-right:1px solid var(--line);overflow-y:auto;padding:10px 0;background:rgba(11,17,30,.5)} #dt-unified-inbox .rail-sec{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.18em;color:var(--silver-dim);text-transform:uppercase;padding:12px 18px 6px} #dt-unified-inbox .rl{display:flex;align-items:center;gap:11px;padding:10px 16px;cursor:pointer;border-left:2px solid transparent;transition:background .12s} #dt-unified-inbox .rl:hover{background:rgba(20,30,51,.55)} #dt-unified-inbox .rl.on{background:rgba(201,168,76,.08);border-left-color:var(--gold)} #dt-unified-inbox .rl .ic{width:22px;height:22px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;font-family:Arial,sans-serif} #dt-unified-inbox .rl .nm{flex:1;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dt-unified-inbox .rl.off .nm{color:var(--silver-dim)} #dt-unified-inbox .rl.off .ic{opacity:.5} #dt-unified-inbox .rl .ct{font-family:"DM Mono",monospace;font-size:9px;padding:1px 7px;border-radius:999px;background:var(--teal);color:#022;font-weight:600} #dt-unified-inbox .rl .conn{font-family:"DM Mono",monospace;font-size:7.5px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase} #dt-unified-inbox .rl.priority{margin:2px 8px 6px;border-radius:10px;border:1px solid var(--gold-dim);background:linear-gradient(180deg,rgba(201,168,76,.1),rgba(0,184,169,.04));border-left:1px solid var(--gold-dim)} #dt-unified-inbox .rl.priority.on{background:linear-gradient(180deg,rgba(201,168,76,.18),rgba(0,184,169,.06))} #dt-unified-inbox .rl.priority .ic{background:linear-gradient(135deg,var(--gold),var(--teal))} #dt-unified-inbox .rl.priority .nm{color:var(--gold);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase} #dt-unified-inbox .rail-div{height:1px;background:var(--line);margin:8px 16px} #dt-unified-inbox .dt{background:linear-gradient(135deg,#C9A84C,#8A7430)} #dt-unified-inbox .ig{background:radial-gradient(circle at 30% 110%,#fdb84b,#fd1d1d 45%,#b330a8 70%,#5b51d8)} #dt-unified-inbox .yt{background:#ff0033}#dt-unified-inbox .tt{background:#0a0a0a}#dt-unified-inbox .xx{background:#000} #dt-unified-inbox .li{background:#0a66c2}#dt-unified-inbox .fb{background:#1877f2}#dt-unified-inbox .th2{background:#0a0a0a} #dt-unified-inbox .pi{background:#e60023}#dt-unified-inbox .bs{background:#1185fe}#dt-unified-inbox .rd{background:#ff4500} #dt-unified-inbox .dc{background:#5865f2}#dt-unified-inbox .tg{background:#26a5e4}#dt-unified-inbox .gb{background:#4285f4;font-size:9px} #dt-unified-inbox .gm{background:#ea4335}#dt-unified-inbox .ms{background:#0a66c2} #dt-unified-inbox .list{border-right:1px solid var(--line);overflow-y:auto} #dt-unified-inbox .list-head{padding:14px 18px 8px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase} #dt-unified-inbox .conv{display:flex;gap:11px;padding:13px 18px;border-bottom:1px solid rgba(36,49,73,.5);cursor:pointer;transition:background .12s} #dt-unified-inbox .conv:hover{background:rgba(20,30,51,.5)} #dt-unified-inbox .conv.on{background:rgba(201,168,76,.07);border-left:2px solid var(--gold);padding-left:16px} #dt-unified-inbox .conv .av{width:38px;height:38px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#2a3a5a,#0b1325); border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:"Cinzel",serif;color:var(--silver);font-size:14px;position:relative} #dt-unified-inbox .conv .av .src,#dt-unified-inbox .th-head .av .src{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:5px;border:2px solid var(--cosmos);font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff} #dt-unified-inbox .conv .body{flex:1;min-width:0} #dt-unified-inbox .conv .row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px} #dt-unified-inbox .conv .nm{font-size:13.5px;color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dt-unified-inbox .conv .tm{font-family:"DM Mono",monospace;font-size:9px;color:var(--silver-dim);flex:none} #dt-unified-inbox .conv .snip{font-size:12px;color:var(--silver);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dt-unified-inbox .conv .unread{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;align-self:center} #dt-unified-inbox .thread{display:flex;flex-direction:column;min-height:0} #dt-unified-inbox .th-head{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;background:rgba(15,22,38,.4)} #dt-unified-inbox .th-head .av{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a3a5a,#0b1325);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--silver);font-family:"Cinzel",serif;position:relative} #dt-unified-inbox .th-head .nm{font-family:"Cinzel",serif;font-size:16px;color:#fff} #dt-unified-inbox .th-head .via{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin-top:2px} #dt-unified-inbox .msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px} #dt-unified-inbox .msg{max-width:74%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.45} #dt-unified-inbox .msg.in{align-self:flex-start;background:var(--cosmos-3);border:1px solid var(--line);border-bottom-left-radius:4px} #dt-unified-inbox .msg.out{align-self:flex-end;background:rgba(201,168,76,.12);border:1px solid var(--gold-dim);border-bottom-right-radius:4px;color:#fff} #dt-unified-inbox .msg .t{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em;color:var(--silver-dim);margin-top:5px;text-transform:uppercase} #dt-unified-inbox .assist{border-top:1px solid var(--line);padding:12px 20px;background:linear-gradient(180deg, rgba(0,184,169,.04), transparent)} #dt-unified-inbox .composer{display:flex;gap:10px;align-items:center} #dt-unified-inbox .composer input{flex:1;background:var(--cosmos-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--ink);font-family:"Exo 2",sans-serif;font-size:13px} #dt-unified-inbox .composer input::placeholder{color:var(--silver-dim)} #dt-unified-inbox .composer .send{padding:11px 18px;border-radius:10px;border:1px solid var(--gold-dim);background:rgba(201,168,76,.1);color:var(--gold);font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer} #dt-unified-inbox .prio-banner{display:none;padding:12px 18px;border-bottom:1px solid var(--gold-dim);background:linear-gradient(180deg,rgba(201,168,76,.08),transparent)} #dt-unified-inbox .prio-banner .h{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase} #dt-unified-inbox .prio-banner .p{font-size:11.5px;color:var(--silver);margin-top:4px;line-height:1.5} #dt-unified-inbox.prio .prio-banner{display:block} #dt-unified-inbox .connect-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;text-align:center} #dt-unified-inbox .connect-pane .big{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;font-family:Arial,sans-serif} #dt-unified-inbox .connect-pane h3{font-family:"Cinzel",serif;font-size:20px;color:#fff;margin:0} #dt-unified-inbox .connect-pane p{font-size:13px;color:var(--silver);max-width:380px;line-height:1.55;margin:0} #dt-unified-inbox .connect-pane .cbtn{margin-top:6px;padding:11px 26px;border-radius:999px;border:1px solid var(--teal-dim);background:rgba(0,184,169,.1);color:var(--teal-bright);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer} #dt-unified-inbox.disconnected .list,#dt-unified-inbox.disconnected .thread{display:none} #dt-unified-inbox.disconnected .connect-wrap{display:flex} #dt-unified-inbox .connect-wrap{display:none;grid-column:2 / span 2;align-items:center;justify-content:center} @media (max-width:860px){ #dt-unified-inbox .shell{grid-template-columns:64px 1fr} #dt-unified-inbox .rl .nm,#dt-unified-inbox .rl .ct,#dt-unified-inbox .rl .conn,#dt-unified-inbox .rail-sec{display:none} #dt-unified-inbox .thread{display:none} #dt-unified-inbox .top{grid-template-columns:1fr;justify-items:center;text-align:center} #dt-unified-inbox .crumbs{display:none}#dt-unified-inbox .pbtabs{justify-self:center} } /* ───────────────────────────────────────────────────────────────────────── * Plots & Founding surface (/me/plots) — display-only. Look ported from * plots-founding.html, EVERY selector scoped under #dt-plots (the mockup's generic * .plot/.stat/.levels/.buildup/.icard/.pill/.head/.wrap… can't collide). :root tokens * scoped onto the root; html/body rules NOT ported. Fills the #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-plots{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-plots *{box-sizing:border-box} #dt-plots .wrap{max-width:860px;margin:0 auto;padding:34px 26px 60px} #dt-plots .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-plots .back:hover{color:var(--gold)} #dt-plots .head{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px} #dt-plots .seal{width:42px;height:42px;flex:none;margin-top:4px;display:flex;align-items:center;justify-content:center} #dt-plots .seal svg{width:42px;height:42px} #dt-plots .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.03em;color:#fff;line-height:1.1} #dt-plots .htext .sub{font-size:14px;color:var(--silver);margin-top:7px} #dt-plots .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 58px} #dt-plots .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-plots .pill.live{color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-plots .pill.tier{color:var(--silver)} #dt-plots .howbox{margin:22px 0 26px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-plots .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-plots .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.92} #dt-plots .howbox b{color:var(--gold);font-weight:600} #dt-plots .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver-dim);text-transform:uppercase;margin:30px 0 14px} #dt-plots .plots{display:grid;grid-template-columns:1fr 1fr;gap:16px} #dt-plots .plot{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--cosmos-2),#0a1120)} #dt-plots .plot .map{height:96px;position:relative;background: linear-gradient(135deg, rgba(0,184,169,.1), rgba(201,168,76,.06)), repeating-linear-gradient(0deg, transparent 0 19px, rgba(36,49,73,.6) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(36,49,73,.6) 19px 20px), #0b1322} #dt-plots .plot .map .pin{position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50% 50% 50% 0; background:var(--gold);box-shadow:0 0 12px rgba(201,168,76,.7);transform:translate(-50%,-60%) rotate(-45deg)} #dt-plots .plot.founding .map{background: linear-gradient(135deg, rgba(201,168,76,.18), rgba(0,184,169,.05)), repeating-linear-gradient(0deg, transparent 0 19px, rgba(201,168,76,.18) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(201,168,76,.18) 19px 20px), #0d1018} #dt-plots .plot .pbody{padding:15px 17px 17px} #dt-plots .plot .ptop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px} #dt-plots .plot .pname{font-family:"Cinzel",serif;font-size:17px;color:#fff;line-height:1.2} #dt-plots .plot .ploc{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--silver);text-transform:uppercase;margin-top:4px} #dt-plots .badge-f{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold); border:1px solid var(--gold-dim);background:rgba(201,168,76,.1);padding:3px 8px;border-radius:999px;white-space:nowrap;flex:none} #dt-plots .plot .stats{display:flex;gap:10px;margin-top:14px} #dt-plots .stat{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;background:rgba(8,13,26,.5)} #dt-plots .stat .v{font-family:"DM Mono",monospace;font-size:18px;color:var(--gold)} #dt-plots .stat .v.teal{color:var(--teal-bright)} #dt-plots .stat .v.muted{color:var(--silver-dim)} #dt-plots .stat.active{border-color:var(--gold-dim);background:rgba(201,168,76,.08)} #dt-plots .stat .flag{font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;margin-top:4px} #dt-plots .stat .flag.on{color:var(--gold)} #dt-plots .stat .flag.off{color:var(--silver-dim)} #dt-plots .stat .k{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin-top:3px} #dt-plots .levels{display:flex;align-items:center;gap:0;margin-top:15px} #dt-plots .lv{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative} #dt-plots .lv .dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);background:var(--cosmos);z-index:2} #dt-plots .lv.cur .dot{border-color:var(--gold);background:var(--gold);box-shadow:0 0 8px rgba(201,168,76,.6)} #dt-plots .lv.future .dot{border-style:dashed;border-color:var(--silver-dim)} #dt-plots .lv .n{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em;color:var(--silver-dim);text-transform:uppercase} #dt-plots .lv.cur .n{color:var(--gold)} #dt-plots .lv::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--line);z-index:1} #dt-plots .lv:first-child::before{display:none} #dt-plots .lv.cur::before{background:var(--gold-dim)} #dt-plots .plot .actions{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap} #dt-plots .pbtn{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:8px; border:1px solid var(--line);background:rgba(15,22,38,.6);color:var(--silver);cursor:pointer;transition:all .15s} #dt-plots .pbtn:hover{border-color:var(--teal-dim);color:var(--teal-bright)} #dt-plots .pbtn.gold{border-color:var(--gold-dim);color:var(--gold);background:rgba(201,168,76,.06)} #dt-plots .buildup{margin-top:14px;border:1px dashed var(--line);border-radius:14px;padding:20px;background:rgba(15,22,38,.3)} #dt-plots .buildup .row{display:flex;align-items:center;gap:13px} #dt-plots .buildup .ic{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center; border:1px solid var(--gold-dim);color:var(--gold);font-size:17px;background:rgba(201,168,76,.06)} #dt-plots .buildup .t{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-plots .buildup .d{font-size:13px;color:var(--silver);margin-top:3px;line-height:1.5} #dt-plots .buildup .soon{margin-left:auto;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--silver-dim);border:1px solid var(--line);padding:4px 10px;border-radius:999px;flex:none} #dt-plots .inside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} #dt-plots .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-plots .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-plots .icard .d{font-size:12px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:720px){ #dt-plots .plots{grid-template-columns:1fr} #dt-plots .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * Identity & Verification surface (/me/identity) — display-only. Look ported from * identity-verification.html, EVERY selector scoped under #dt-identity (the mockup's * generic .standing/.badge/.tier/.ladder/.status/.pill/.step/.wrap… can't collide). * :root tokens scoped onto the root; html/body rules NOT ported. Fills #panel as a * scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-identity{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-identity *{box-sizing:border-box} #dt-identity .wrap{max-width:820px;margin:0 auto;padding:34px 26px 60px} #dt-identity .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-identity .back:hover{color:var(--gold)} #dt-identity .head{display:flex;align-items:flex-start;gap:16px} #dt-identity .seal{width:40px;height:40px;flex:none;margin-top:5px;color:var(--gold);font-size:30px;line-height:1} #dt-identity .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-identity .htext .sub{font-size:14px;color:var(--silver);margin-top:7px} #dt-identity .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 56px} #dt-identity .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-identity .pill.live{color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-identity .pill.tier{color:var(--silver)} #dt-identity .standing{margin:24px 0 10px;border:1px solid var(--gold-dim);border-radius:16px;padding:22px 24px; background:linear-gradient(135deg, rgba(201,168,76,.1), rgba(0,184,169,.04));display:flex;align-items:center;gap:22px;flex-wrap:wrap} #dt-identity .badge{width:96px;height:96px;flex:none;position:relative;display:flex;align-items:center;justify-content:center} #dt-identity .badge svg{width:96px;height:96px;filter:drop-shadow(0 0 10px rgba(201,168,76,.4))} #dt-identity .badge .lvl{position:absolute;font-family:"Cinzel",serif;font-weight:700;font-size:26px;color:var(--gold)} #dt-identity .standing .sinfo{flex:1;min-width:220px} #dt-identity .standing .vh{display:inline-flex;align-items:center;gap:7px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);padding:4px 11px;border-radius:999px} #dt-identity .standing h2{font-family:"Cinzel",serif;font-size:23px;color:#fff;margin:11px 0 4px} #dt-identity .standing p{font-size:13.5px;color:var(--silver);margin:0;line-height:1.5} #dt-identity .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver-dim);text-transform:uppercase;margin:30px 0 14px} #dt-identity .ladder{display:flex;flex-direction:column;gap:12px} #dt-identity .tier{display:flex;gap:16px;border:1px solid var(--line);border-radius:14px;padding:17px 19px;background:rgba(15,22,38,.5);position:relative} #dt-identity .tier.done{border-color:var(--teal-dim);background:linear-gradient(180deg,rgba(0,184,169,.06),transparent)} #dt-identity .tier.current{border-color:var(--gold-dim);background:linear-gradient(180deg,rgba(201,168,76,.08),transparent)} #dt-identity .tier .step{width:42px;height:42px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center; font-family:"Cinzel",serif;font-weight:700;font-size:16px;border:1px solid var(--line);color:var(--silver)} #dt-identity .tier.done .step{background:rgba(0,184,169,.15);border-color:var(--teal-dim);color:var(--teal-bright)} #dt-identity .tier.current .step{background:rgba(201,168,76,.15);border-color:var(--gold-dim);color:var(--gold)} #dt-identity .tier .tbody{flex:1;min-width:0} #dt-identity .tier .trow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} #dt-identity .tier .tname{font-family:"Cinzel",serif;font-size:16px;color:#fff} #dt-identity .tier .treq{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:3px} #dt-identity .tier .tunlock{font-size:13px;color:var(--silver);margin-top:9px;line-height:1.5} #dt-identity .tier .tunlock b{color:var(--ink);font-weight:500} #dt-identity .status{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;flex:none} #dt-identity .status.done{color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-identity .status.cur{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.08)} #dt-identity .status.avail{color:var(--silver-dim);border:1px solid var(--line)} #dt-identity .tcta{margin-top:13px;display:inline-flex;align-items:center;gap:8px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em; text-transform:uppercase;padding:9px 16px;border-radius:9px;border:1px solid var(--gold-dim);background:rgba(201,168,76,.1);color:var(--gold);cursor:pointer;transition:all .15s} #dt-identity .tcta:hover{background:rgba(201,168,76,.18)} @media (max-width:600px){ #dt-identity .standing{gap:16px} #dt-identity .badge{width:76px;height:76px} #dt-identity .badge svg{width:76px;height:76px} } /* ───────────────────────────────────────────────────────────────────────── * Calendar & Schedule surface (/me/calendar) — display-only. Look ported from * calendar-schedule.html, EVERY selector scoped under #dt-calendar. :root tokens scoped * onto the root; html/body rules NOT ported; body.seller → #dt-calendar.seller. Shared * .sec-lbl/.htext are defined here too, scoped under #dt-calendar (intentional — each * surface scopes its own). Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-calendar{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-calendar *{box-sizing:border-box} #dt-calendar .wrap{max-width:860px;margin:0 auto;padding:34px 26px 60px} #dt-calendar .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-calendar .back:hover{color:var(--gold)} #dt-calendar .headrow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} #dt-calendar .head{display:flex;align-items:flex-start;gap:16px} #dt-calendar .seal{width:38px;height:38px;flex:none;margin-top:5px;color:var(--gold);font-size:26px;line-height:1} #dt-calendar .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-calendar .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:480px} #dt-calendar .vtoggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:6px} #dt-calendar .vtoggle button{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase; padding:9px 15px;background:transparent;color:var(--silver);border:none;cursor:pointer;transition:all .15s} #dt-calendar .vtoggle button.on{background:rgba(201,168,76,.16);color:var(--gold)} #dt-calendar .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-calendar .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-calendar .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-calendar .pill.tier{color:var(--silver)} #dt-calendar .howbox{margin:22px 0 26px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-calendar .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-calendar .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.92} #dt-calendar .howbox b{color:var(--gold);font-weight:600} #dt-calendar .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver-dim);text-transform:uppercase;margin:30px 0 14px;display:flex;align-items:center;gap:10px} #dt-calendar .sec-lbl .tagsoon{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} #dt-calendar .sched{border:1px solid var(--gold-dim);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(201,168,76,.05),transparent)} #dt-calendar .sched .stitle{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px} #dt-calendar .sched .stitle .ic{width:30px;height:30px;border-radius:8px;background:rgba(201,168,76,.12);border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:14px} #dt-calendar .sched .stitle .t{font-family:"Cinzel",serif;font-size:16px;color:#fff} #dt-calendar .sched .stitle .x{font-family:"DM Mono",monospace;font-size:10px;color:var(--silver);margin-left:auto} #dt-calendar .sched .sbody{padding:20px} #dt-calendar .item{display:flex;gap:13px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:11px;background:rgba(8,13,26,.4);margin-bottom:18px} #dt-calendar .item .thumb{width:46px;height:46px;border-radius:9px;flex:none;background:linear-gradient(135deg,#1a3a2a,#0c1322);display:flex;align-items:center;justify-content:center;font-size:20px} #dt-calendar .item .iname{font-size:14px;color:#fff;font-weight:500} #dt-calendar .item .imeta{font-family:"DM Mono",monospace;font-size:10px;color:var(--silver);margin-top:3px;letter-spacing:.05em} #dt-calendar .item .claimed{margin-left:auto;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);padding:4px 10px;border-radius:999px;flex:none} #dt-calendar .daylabel{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin:0 0 10px} #dt-calendar .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px} #dt-calendar .slot{padding:11px 8px;border-radius:10px;border:1px solid var(--line);background:rgba(15,22,38,.5);text-align:center;cursor:pointer;transition:all .14s} #dt-calendar .slot .tm{font-family:"DM Mono",monospace;font-size:12px;color:var(--ink)} #dt-calendar .slot .st{font-family:"DM Mono",monospace;font-size:7.5px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase;margin-top:3px} #dt-calendar .slot.open:hover{border-color:var(--teal);background:rgba(0,184,169,.1)} #dt-calendar .slot.sel{border-color:var(--gold);background:rgba(201,168,76,.14)} #dt-calendar .slot.sel .tm{color:var(--gold)} #dt-calendar .slot.taken{opacity:.4;cursor:not-allowed} #dt-calendar .slot.taken .st{color:var(--silver-dim)} #dt-calendar.seller .slot.open .st::after{content:" · offered"} #dt-calendar .confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:4px} #dt-calendar .cbtn{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;border-radius:10px; border:1px solid var(--gold-dim);background:rgba(201,168,76,.1);color:var(--gold);cursor:pointer} #dt-calendar .cnote{font-size:12px;color:var(--silver)} #dt-calendar .seller-only{display:none} #dt-calendar.seller .seller-only{display:block} #dt-calendar .buyer-only{display:block} #dt-calendar.seller .buyer-only{display:none} #dt-calendar .addwin{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright); border:1px dashed var(--teal-dim);background:transparent;border-radius:9px;padding:9px 14px;cursor:pointer;margin-top:4px} #dt-calendar .connect-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} #dt-calendar .ccard{border:1px solid var(--line);border-radius:12px;padding:16px;background:rgba(15,22,38,.45);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} #dt-calendar .ccard .clogo{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);overflow:hidden} #dt-calendar .gc,#dt-calendar .oc,#dt-calendar .ac{background:#fff} #dt-calendar .ccard .cn{font-size:13.5px;color:#fff;font-weight:500} #dt-calendar .ccard .cs{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;color:var(--silver-dim);text-transform:uppercase} #dt-calendar .ccard .cbtn2{margin-top:2px;padding:8px 18px;border-radius:999px;border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);color:var(--teal-bright);font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer} #dt-calendar .inside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px} #dt-calendar .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-calendar .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-calendar .icard .d{font-size:12px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:720px){ #dt-calendar .slots{grid-template-columns:repeat(3,1fr)} #dt-calendar .connect-grid,#dt-calendar .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * Transmissions VIEW surface (/me/transmissions) — display-only, read-only analytics. * Look ported from transmissions.html, EVERY selector scoped under #dt-transmissions. * :root tokens scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext/.inside/ * .icard defined here too, scoped under #dt-transmissions. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-transmissions{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-transmissions *{box-sizing:border-box} #dt-transmissions .wrap{max-width:880px;margin:0 auto;padding:34px 26px 60px} #dt-transmissions .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-transmissions .back:hover{color:var(--gold)} #dt-transmissions .head{display:flex;align-items:flex-start;gap:16px} #dt-transmissions .seal{width:38px;height:38px;flex:none;margin-top:5px;color:var(--gold);font-size:24px;line-height:1} #dt-transmissions .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-transmissions .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:520px} #dt-transmissions .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-transmissions .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-transmissions .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-transmissions .pill.tier{color:var(--silver)} #dt-transmissions .howbox{margin:22px 0 8px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-transmissions .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-transmissions .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-transmissions .howbox b{color:var(--gold);font-weight:600} #dt-transmissions .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:28px 0 14px;display:flex;align-items:center;gap:10px} #dt-transmissions .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} #dt-transmissions .rollup{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px} #dt-transmissions .ru{border:1px solid var(--line);border-radius:13px;padding:15px;background:rgba(15,22,38,.55)} #dt-transmissions .ru .k{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase} #dt-transmissions .ru .v{font-family:"DM Mono",monospace;font-size:23px;color:#fff;margin-top:7px} #dt-transmissions .ru .s{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--teal-bright);text-transform:uppercase;margin-top:4px} #dt-transmissions .chan-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} #dt-transmissions .chan{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(15,22,38,.5)} #dt-transmissions .chan .chead{display:flex;align-items:center;gap:11px;margin-bottom:14px} #dt-transmissions .chan .clogo{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;font-family:Arial,sans-serif} #dt-transmissions .chan .cname{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-transmissions .chan .cstat{margin-left:auto;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--teal-dim);color:var(--teal-bright);background:rgba(0,184,169,.07)} #dt-transmissions .chan .cstat.none{border-color:var(--line);color:var(--silver);background:transparent} #dt-transmissions .sparks{display:grid;grid-template-columns:1fr 1fr;gap:10px} #dt-transmissions .spark{border:1px solid rgba(36,49,73,.6);border-radius:9px;padding:9px 10px;background:rgba(8,13,26,.4)} #dt-transmissions .spark .sl{display:flex;justify-content:space-between;align-items:baseline} #dt-transmissions .spark .sk{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--silver);text-transform:uppercase} #dt-transmissions .spark .sv{font-family:"DM Mono",monospace;font-size:12px;color:var(--gold)} #dt-transmissions .spark svg{display:block;width:100%;height:24px;margin-top:6px} #dt-transmissions .spark .line{fill:none;stroke:var(--teal-bright);stroke-width:1.6} #dt-transmissions .spark .area{fill:rgba(0,184,169,.12);stroke:none} #dt-transmissions .nometrics{font-size:12.5px;color:var(--silver);padding:6px 0;line-height:1.5} #dt-transmissions .notconnected{display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px 0 4px} #dt-transmissions .notconnected .nc{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.04em;color:var(--silver);text-transform:uppercase;text-align:center;line-height:1.5} #dt-transmissions .notconnected .ncb{padding:7px 16px;border-radius:999px;border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);color:var(--teal-bright);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer} #dt-transmissions .ig{background:radial-gradient(circle at 30% 110%,#fdb84b,#fd1d1d 45%,#b330a8 70%,#5b51d8)} #dt-transmissions .yt{background:#ff0033}#dt-transmissions .tt{background:#0a0a0a}#dt-transmissions .xx{background:#000} #dt-transmissions .li{background:#0a66c2}#dt-transmissions .fb{background:#1877f2}#dt-transmissions .tg{background:#26a5e4} #dt-transmissions .footnote{font-size:12px;color:var(--silver);margin-top:16px;line-height:1.55} #dt-transmissions .footnote b{color:var(--ink)} #dt-transmissions .makecta{margin-top:24px;border:1px solid var(--gold-dim);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap; background:linear-gradient(135deg,rgba(201,168,76,.09),rgba(0,184,169,.04))} #dt-transmissions .makecta .mc-t{flex:1;min-width:240px} #dt-transmissions .makecta .mc-t .h{font-family:"Cinzel",serif;font-size:16px;color:#fff} #dt-transmissions .makecta .mc-t .d{font-size:13px;color:var(--ink);opacity:.9;margin-top:4px;line-height:1.5} #dt-transmissions .makecta .mc-b{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;border-radius:10px; border:1px solid var(--gold-dim);background:rgba(201,168,76,.12);color:var(--gold);cursor:pointer;white-space:nowrap} #dt-transmissions .inside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px} #dt-transmissions .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-transmissions .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-transmissions .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:720px){ #dt-transmissions .chan-grid,#dt-transmissions .inside{grid-template-columns:1fr} #dt-transmissions .rollup{grid-template-columns:repeat(2,1fr)} } /* ───────────────────────────────────────────────────────────────────────── * Wallet & Coins surface (/me/wallet) — two-currency wallet (real balances injected * server-side; activity sample). Look ported from wallet-coins.html, EVERY selector scoped * under #dt-wallet. :root tokens scoped onto the root; html/body NOT ported. Shared * .sec-lbl/.htext defined here too, scoped under #dt-wallet. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-wallet{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-wallet *{box-sizing:border-box} #dt-wallet .wrap{max-width:840px;margin:0 auto;padding:34px 26px 60px} #dt-wallet .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-wallet .back:hover{color:var(--gold)} #dt-wallet .head{display:flex;align-items:flex-start;gap:16px} #dt-wallet .seal{width:38px;height:38px;flex:none;margin-top:5px;color:var(--gold);font-size:24px;line-height:1} #dt-wallet .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-wallet .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:520px} #dt-wallet .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-wallet .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-wallet .pill.live{color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-wallet .pill.tier{color:var(--silver)} #dt-wallet .howbox{margin:22px 0 26px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-wallet .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-wallet .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-wallet .howbox b{color:var(--gold);font-weight:600} #dt-wallet .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:28px 0 14px} #dt-wallet .sec-lbl .hsample{color:var(--silver-dim);font-size:8px} #dt-wallet .balances{display:grid;grid-template-columns:1fr 1fr;gap:16px} #dt-wallet .bal{border-radius:18px;padding:22px;position:relative;overflow:hidden} #dt-wallet .bal.tokens{border:1px solid var(--teal-dim);background:linear-gradient(135deg,rgba(0,184,169,.12),rgba(0,184,169,.02))} #dt-wallet .bal.coins{border:1px solid var(--gold-dim);background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.02))} #dt-wallet .bal .bhead{display:flex;align-items:center;gap:11px;margin-bottom:16px} #dt-wallet .bal .bic{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px} #dt-wallet .bal.tokens .bic{background:rgba(0,184,169,.16);border:1px solid var(--teal-dim);color:var(--teal-bright)} #dt-wallet .bal.coins .bic{background:rgba(201,168,76,.16);border:1px solid var(--gold-dim);color:var(--gold)} #dt-wallet .bal .bname{font-family:"Cinzel",serif;font-size:17px;color:#fff} #dt-wallet .bal .btype{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin-top:2px} #dt-wallet .bal .amt{font-family:"DM Mono",monospace;font-size:38px;line-height:1;color:#fff;display:flex;align-items:baseline;gap:9px} #dt-wallet .bal.tokens .amt .u{font-size:15px;color:var(--teal-bright)} #dt-wallet .bal.coins .amt .u{font-size:15px;color:var(--gold)} #dt-wallet .bal .bdesc{font-size:12.5px;color:var(--ink);opacity:.85;line-height:1.5;margin-top:12px} #dt-wallet .bal .bdesc b{font-weight:600} #dt-wallet .bal.tokens .bdesc b{color:var(--teal-bright)} #dt-wallet .bal.coins .bdesc b{color:var(--gold)} #dt-wallet .bal .baction{margin-top:16px;display:flex;gap:9px;flex-wrap:wrap} #dt-wallet .abtn{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;border-radius:10px;cursor:pointer;transition:all .15s} #dt-wallet .bal.tokens .abtn.primary{border:1px solid var(--teal-dim);background:rgba(0,184,169,.14);color:var(--teal-bright)} #dt-wallet .bal.coins .abtn.primary{border:1px solid var(--gold-dim);background:rgba(201,168,76,.14);color:var(--gold)} #dt-wallet .abtn.ghost{border:1px solid var(--line);background:transparent;color:var(--silver)} #dt-wallet .earned-note{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:16px;display:flex;align-items:center;gap:6px} #dt-wallet .hist{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(15,22,38,.45)} #dt-wallet .hrow{display:flex;align-items:center;gap:13px;padding:13px 17px;border-bottom:1px solid rgba(36,49,73,.5)} #dt-wallet .hrow:last-child{border-bottom:none} #dt-wallet .hrow .hic{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;border:1px solid var(--line)} #dt-wallet .hrow .hic.in{color:var(--teal-bright);background:rgba(0,184,169,.08)} #dt-wallet .hrow .hic.out{color:var(--gold);background:rgba(201,168,76,.08)} #dt-wallet .hrow .hbody{flex:1;min-width:0} #dt-wallet .hrow .ht{font-size:13px;color:#fff} #dt-wallet .hrow .hd{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:2px} #dt-wallet .hrow .hright{text-align:right} #dt-wallet .hrow .hamt{font-family:"DM Mono",monospace;font-size:13px;flex:none} #dt-wallet .hrow .hamt.pos{color:var(--teal-bright)} #dt-wallet .hrow .hamt.neg{color:var(--gold)} #dt-wallet .hrow .hcur{font-size:8px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase} #dt-wallet .footnote{font-size:12px;color:var(--silver);margin-top:14px;line-height:1.55} #dt-wallet .footnote .ft-teal{color:var(--teal-bright)} #dt-wallet .footnote .ft-gold{color:var(--gold)} @media (max-width:680px){ #dt-wallet .balances{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * Privacy Controls surface (/me/privacy) — four REAL visibility toggles (persist via * PATCH /api/me/profile), display-only per-surface chips, "What you own" vault (principle * only — no internal mechanism named) + verbatim commitment copy, inert export/delete/manage. * Look ported from privacy-controls.html, EVERY selector scoped under #dt-privacy. :root * tokens scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext defined here too, * scoped under #dt-privacy. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-privacy{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-privacy *{box-sizing:border-box} #dt-privacy .wrap{max-width:860px;margin:0 auto;padding:34px 26px 60px} #dt-privacy .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-privacy .back:hover{color:var(--gold)} #dt-privacy .head{display:flex;align-items:flex-start;gap:16px} #dt-privacy .seal{width:38px;height:38px;flex:none;margin-top:5px;color:var(--gold);font-size:23px;line-height:1} #dt-privacy .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-privacy .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:520px} #dt-privacy .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-privacy .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-privacy .pill.live{color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-privacy .pill.tier{color:var(--silver)} #dt-privacy .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px} /* WHAT OTHERS SEE — visibility toggles (interactive) */ #dt-privacy .vis{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(15,22,38,.5)} #dt-privacy .vrow{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid rgba(36,49,73,.5)} #dt-privacy .vrow:last-child{border-bottom:none} #dt-privacy .vrow .vt{flex:1} #dt-privacy .vrow .vt .vn{font-size:14px;color:#fff} #dt-privacy .vrow .vt .vd{font-size:12px;color:var(--silver);margin-top:2px} #dt-privacy .tog{width:42px;height:24px;border-radius:999px;flex:none;position:relative;cursor:pointer;transition:background .15s;background:var(--cosmos-3);border:1px solid var(--line)} #dt-privacy .tog:focus-visible{outline:2px solid var(--teal-dim);outline-offset:2px} #dt-privacy .tog.on{background:rgba(0,184,169,.25);border-color:var(--teal-dim)} #dt-privacy .tog .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--silver);transition:all .15s} #dt-privacy .tog.on .knob{left:21px;background:var(--teal-bright)} /* per-surface chips — display-only this pass (no listeners), so no pointer cursor */ #dt-privacy .surfaces{display:flex;gap:7px;flex-wrap:wrap} #dt-privacy .schip{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:8px;border:1px solid var(--line);color:var(--silver-dim);user-select:none} #dt-privacy .schip.on{border-color:var(--teal-dim);color:var(--teal-bright);background:rgba(0,184,169,.08)} /* WHAT YOU OWN */ #dt-privacy .own{border:1px solid var(--gold-dim);border-radius:16px;padding:24px;background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(0,184,169,.03))} #dt-privacy .own h2{font-family:"Cinzel",serif;font-size:21px;color:#fff;margin:0 0 6px} #dt-privacy .own .od{font-size:13.5px;color:var(--ink);opacity:.92;line-height:1.6;margin:0 0 20px;max-width:640px} #dt-privacy .own .od b{color:var(--gold);font-weight:600} /* vault diagram — principle only, no internals */ #dt-privacy .vault{display:flex;align-items:center;justify-content:center;gap:0;margin:6px 0 22px;flex-wrap:wrap} #dt-privacy .vbox{border-radius:14px;padding:16px 18px;text-align:center;min-width:150px} #dt-privacy .vbox.core{border:1.5px solid var(--gold-dim);background:rgba(201,168,76,.08)} #dt-privacy .vbox.core .vi{font-size:22px;color:var(--gold)} #dt-privacy .vbox.pub{border:1px solid var(--teal-dim);background:rgba(0,184,169,.06)} #dt-privacy .vbox.pub .vi{font-size:22px;color:var(--teal-bright)} #dt-privacy .vbox .vlt{font-family:"Cinzel",serif;font-size:14px;color:#fff;margin-top:8px} #dt-privacy .vbox .vld{font-size:11px;color:var(--silver);margin-top:4px;line-height:1.4} #dt-privacy .varrow{display:flex;flex-direction:column;align-items:center;padding:0 14px;color:var(--gold)} #dt-privacy .varrow .alabel{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);margin-bottom:4px;white-space:nowrap} #dt-privacy .varrow .aglyph{font-size:20px} #dt-privacy .vnote{text-align:center;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase;margin-top:-12px;margin-bottom:22px} /* commitment rows */ #dt-privacy .commits{display:grid;grid-template-columns:1fr 1fr;gap:12px} #dt-privacy .commit{display:flex;gap:12px;border:1px solid var(--line);border-radius:12px;padding:15px;background:rgba(8,13,26,.45)} #dt-privacy .commit .ci{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-privacy .commit .ct{font-size:13.5px;color:#fff;font-weight:500} #dt-privacy .commit .cd{font-size:12px;color:var(--silver);margin-top:3px;line-height:1.45} /* coming note */ #dt-privacy .coming{margin-top:14px;border:1px dashed var(--gold-dim);border-radius:12px;padding:15px 17px;display:flex;align-items:center;gap:13px;background:rgba(201,168,76,.04)} #dt-privacy .coming .ci{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--gold);border:1px solid var(--gold-dim)} #dt-privacy .coming .ct{font-size:13px;color:var(--ink);line-height:1.5} #dt-privacy .coming .ct b{color:var(--gold)} #dt-privacy .coming .soon{margin-left:auto;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-dim);border:1px solid var(--line);padding:4px 9px;border-radius:999px;flex:none} /* data actions — inert this pass */ #dt-privacy .data-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} #dt-privacy .dbtn{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;border-radius:10px;cursor:pointer;transition:all .15s} #dt-privacy .dbtn.export{border:1px solid var(--teal-dim);background:rgba(0,184,169,.1);color:var(--teal-bright)} #dt-privacy .dbtn.delete{border:1px solid var(--line);background:transparent;color:var(--silver)} #dt-privacy .dbtn.delete:hover{border-color:#7a3b3b;color:#e0a0a0} /* block & report */ #dt-privacy .br{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:15px 18px;background:rgba(15,22,38,.5)} #dt-privacy .br .brt{flex:1} #dt-privacy .br .brn{font-size:14px;color:#fff} #dt-privacy .br .brd{font-size:12px;color:var(--silver);margin-top:2px} #dt-privacy .br .brb{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border-radius:9px;border:1px solid var(--line);color:var(--silver);cursor:pointer} @media (max-width:680px){ #dt-privacy .commits{grid-template-columns:1fr} #dt-privacy .vault{flex-direction:column} #dt-privacy .varrow{padding:10px 0} #dt-privacy .varrow .aglyph{transform:rotate(90deg)} } /* ───────────────────────────────────────────────────────────────────────── * Wardrobe surface (/me/wardrobe) — UI-only display pass: sample owned-items grid (rarity + * source + provenance), an inert trade panel, visual-only filter chips, and "what lives * inside" cards. Look ported from wardrobe.html, EVERY selector scoped under #dt-wardrobe. * :root tokens scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext/.inside/ * .icard defined here too, scoped under #dt-wardrobe. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-wardrobe{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.08), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-wardrobe *{box-sizing:border-box} #dt-wardrobe .wrap{max-width:900px;margin:0 auto;padding:34px 26px 60px} #dt-wardrobe .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-wardrobe .back:hover{color:var(--gold)} #dt-wardrobe .headrow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} #dt-wardrobe .head{display:flex;align-items:flex-start;gap:16px} #dt-wardrobe .seal{width:38px;height:38px;flex:none;margin-top:5px;color:var(--gold);font-size:22px;line-height:1} #dt-wardrobe .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-wardrobe .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:500px} #dt-wardrobe .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-wardrobe .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-wardrobe .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-wardrobe .pill.tier{color:var(--silver)} #dt-wardrobe .equip-link{display:inline-block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);padding:9px 15px;border-radius:10px;cursor:pointer;white-space:nowrap;margin-top:4px;text-decoration:none} #dt-wardrobe .equip-link:hover{background:rgba(0,184,169,.16)} #dt-wardrobe .howbox{margin:22px 0 8px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-wardrobe .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-wardrobe .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-wardrobe .howbox b{color:var(--gold);font-weight:600} #dt-wardrobe .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 14px;flex-wrap:wrap} #dt-wardrobe .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase} #dt-wardrobe .sec-lbl .ssample{color:var(--silver-dim)} #dt-wardrobe .sec-lbl.sec-inside{display:block;margin-top:30px;margin-bottom:14px} #dt-wardrobe .filters{display:flex;gap:7px;flex-wrap:wrap} #dt-wardrobe .fchip{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:8px;border:1px solid var(--line);color:var(--silver-dim);cursor:pointer;user-select:none} #dt-wardrobe .fchip.on{border-color:var(--gold-dim);color:var(--gold);background:rgba(201,168,76,.07)} /* GRID */ #dt-wardrobe .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} #dt-wardrobe .item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--cosmos-2);position:relative;transition:border-color .15s} #dt-wardrobe .item:hover{border-color:var(--gold-dim)} #dt-wardrobe .item .pic{height:130px;position:relative;display:flex;align-items:center;justify-content:center;font-size:44px} #dt-wardrobe .item .pic.g1{background:linear-gradient(135deg,#2a1c3a,#0c1322)} #dt-wardrobe .item .pic.g2{background:linear-gradient(135deg,#1a3a2a,#0c1322)} #dt-wardrobe .item .pic.g3{background:linear-gradient(135deg,#3a2a1c,#0c1322)} #dt-wardrobe .item .pic.g4{background:linear-gradient(135deg,#1a2c4f,#0c1322)} #dt-wardrobe .item .pic.g5{background:linear-gradient(135deg,#3a1c2a,#0c1322)} #dt-wardrobe .item .pic.g6{background:linear-gradient(135deg,#0a3f3a,#0c1322)} #dt-wardrobe .item .rar{position:absolute;top:9px;left:9px;font-family:"DM Mono",monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:999px;backdrop-filter:blur(4px)} #dt-wardrobe .rar.common{background:rgba(168,181,189,.16);color:#cdd6dc} #dt-wardrobe .rar.rare{background:rgba(0,184,169,.18);color:var(--teal-bright)} #dt-wardrobe .rar.limited{background:rgba(201,168,76,.18);color:var(--gold)} #dt-wardrobe .item .src{position:absolute;top:9px;right:9px;font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver);background:rgba(8,13,26,.7);padding:3px 7px;border-radius:999px} #dt-wardrobe .item .ibody{padding:12px 13px 13px} #dt-wardrobe .item .inm{font-size:13.5px;color:#fff;font-weight:500;line-height:1.25} #dt-wardrobe .item .iprov{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:5px;display:flex;align-items:center;gap:5px} #dt-wardrobe .item .iprov .ed{color:var(--gold)} #dt-wardrobe .item .iacts{display:flex;gap:7px;margin-top:11px} #dt-wardrobe .iabtn{flex:1;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 6px;border-radius:7px;text-align:center;cursor:pointer;transition:all .14s} #dt-wardrobe .iabtn.trade{border:1px solid var(--gold-dim);background:rgba(201,168,76,.08);color:var(--gold)} #dt-wardrobe .iabtn.trade:hover{background:rgba(201,168,76,.16)} #dt-wardrobe .iabtn.prov{border:1px solid var(--line);background:transparent;color:var(--silver)} #dt-wardrobe .item.locked .iabtn.trade{opacity:.4;cursor:not-allowed;border-color:var(--line);color:var(--silver-dim);background:transparent} /* TRADE PANEL */ #dt-wardrobe .trade{margin-top:30px;border:1px solid var(--gold-dim);border-radius:16px;padding:22px;background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(0,184,169,.03))} #dt-wardrobe .trade .th{display:flex;align-items:center;gap:11px;margin-bottom:6px} #dt-wardrobe .trade .th .ic{width:32px;height:32px;border-radius:9px;background:rgba(201,168,76,.14);border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px} #dt-wardrobe .trade .th h2{font-family:"Cinzel",serif;font-size:19px;color:#fff;margin:0} #dt-wardrobe .trade .td{font-size:13px;color:var(--ink);opacity:.9;line-height:1.55;margin:0 0 18px;max-width:600px} #dt-wardrobe .trade-lanes{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap} #dt-wardrobe .lane{flex:1;min-width:200px;border:1px solid var(--line);border-radius:12px;padding:15px;background:rgba(8,13,26,.4)} #dt-wardrobe .lane .ll{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);margin-bottom:11px} #dt-wardrobe .lane .slot{border:1px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--silver-dim);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:7px} #dt-wardrobe .lane .slot .plus{font-size:22px;font-weight:300} #dt-wardrobe .lane .filled{display:flex;align-items:center;gap:11px;border:1px solid var(--gold-dim);border-radius:10px;padding:11px;background:rgba(201,168,76,.06)} #dt-wardrobe .lane .filled .mini{width:38px;height:38px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px;background:linear-gradient(135deg,#2a1c3a,#0c1322)} #dt-wardrobe .lane .filled .fn{font-size:13px;color:#fff} #dt-wardrobe .lane .filled .fe{font-family:"DM Mono",monospace;font-size:8px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-top:2px} #dt-wardrobe .swap{display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:22px;flex:none} #dt-wardrobe .trade-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap} #dt-wardrobe .tbtn{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;border-radius:10px;border:1px solid var(--gold-dim);background:rgba(201,168,76,.12);color:var(--gold);cursor:pointer} #dt-wardrobe .tfoot-note{font-size:12px;color:var(--silver);line-height:1.5} /* what lives inside */ #dt-wardrobe .inside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:30px} #dt-wardrobe .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-wardrobe .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-wardrobe .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:760px){ #dt-wardrobe .grid{grid-template-columns:repeat(2,1fr)} #dt-wardrobe .inside{grid-template-columns:1fr} #dt-wardrobe .swap{transform:rotate(90deg)} } /* ───────────────────────────────────────────────────────────────────────── * Vault surface (/me/vault) — UI-only explanatory pass: describes the owned-asset model (it's * yours / you can delete it / you may deploy it — coming). Lead, principle-only "How it builds" * diagram, ownership triad, future-tense deploy-to-earn strip, footnote. No export/delete * buttons (those live on Privacy). Look ported from vault.html, EVERY selector scoped under * #dt-vault. :root tokens scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext * defined here too, scoped under #dt-vault. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-vault{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -10%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.05), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-vault *{box-sizing:border-box} #dt-vault .wrap{max-width:860px;margin:0 auto;padding:34px 26px 60px} #dt-vault .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-vault .back:hover{color:var(--gold)} #dt-vault .head{display:flex;align-items:flex-start;gap:16px} #dt-vault .seal{width:38px;height:38px;flex:none;margin-top:5px;color:var(--gold);font-size:24px;line-height:1} #dt-vault .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-vault .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:540px} #dt-vault .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-vault .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-vault .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-vault .pill.tier{color:var(--silver)} #dt-vault .lead{margin:24px 0 26px;padding:20px 22px;border:1px solid var(--gold-dim);border-radius:16px;background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(0,184,169,.03))} #dt-vault .lead h2{font-family:"Cinzel",serif;font-size:21px;color:#fff;margin:0 0 8px} #dt-vault .lead p{margin:0;font-size:14px;line-height:1.65;color:var(--ink);opacity:.94} #dt-vault .lead p b{color:var(--gold);font-weight:600} #dt-vault .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px;display:flex;align-items:center;gap:10px} #dt-vault .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} /* DIAGRAM — accumulation into owned asset, one direction (principle only) */ #dt-vault .diagram{border:1px solid var(--line);border-radius:16px;padding:26px 22px;background:rgba(15,22,38,.45)} #dt-vault .flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap} #dt-vault .node{border-radius:14px;padding:16px 16px;text-align:center;min-width:140px} #dt-vault .node.you{border:1px solid var(--teal-dim);background:rgba(0,184,169,.06)} #dt-vault .node.you .ni{font-size:21px;color:var(--teal-bright)} #dt-vault .node.vault{border:1.5px solid var(--gold-dim);background:rgba(201,168,76,.1)} #dt-vault .node.vault .ni{font-size:23px;color:var(--gold)} #dt-vault .node.asset{border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-vault .node.asset .ni{font-size:21px;color:var(--gold)} #dt-vault .node .nt{font-family:"Cinzel",serif;font-size:14px;color:#fff;margin-top:8px} #dt-vault .node .nd{font-size:11px;color:var(--silver);margin-top:4px;line-height:1.4} #dt-vault .arrow{display:flex;flex-direction:column;align-items:center;padding:0 14px;color:var(--gold)} #dt-vault .arrow .al{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);margin-bottom:4px;white-space:nowrap} #dt-vault .arrow .ag{font-size:19px} #dt-vault .dnote{text-align:center;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase;margin-top:18px} /* OWNERSHIP triad */ #dt-vault .triad{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} #dt-vault .own{border:1px solid var(--line);border-radius:13px;padding:17px;background:rgba(15,22,38,.5)} #dt-vault .own .oi{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:11px} #dt-vault .own.keep .oi{color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-vault .own.delete .oi{color:var(--silver);background:rgba(168,181,189,.08);border:1px solid var(--line)} #dt-vault .own.deploy .oi{color:var(--gold);background:rgba(201,168,76,.08);border:1px solid var(--gold-dim)} #dt-vault .own .ot{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-vault .own .od{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.5} #dt-vault .own.deploy .soon{display:inline-block;font-family:"DM Mono",monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);padding:2px 7px;border-radius:999px;margin-top:9px} /* deploy-to-earn coming strip */ #dt-vault .deploy-strip{margin-top:14px;border:1px dashed var(--gold-dim);border-radius:13px;padding:17px 19px;display:flex;align-items:center;gap:14px;background:rgba(201,168,76,.04)} #dt-vault .deploy-strip .ic{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);border:1px solid var(--gold-dim)} #dt-vault .deploy-strip .dt{font-size:13px;color:var(--ink);line-height:1.55} #dt-vault .deploy-strip .dt b{color:var(--gold)} #dt-vault .deploy-strip .dt .dt-q{color:var(--silver)} #dt-vault .deploy-strip .soon{margin-left:auto;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-dim);border:1px solid var(--line);padding:4px 9px;border-radius:999px;flex:none} #dt-vault .footnote{font-size:12.5px;color:var(--silver);margin-top:16px;line-height:1.6} #dt-vault .footnote b{color:var(--ink)} @media (max-width:680px){ #dt-vault .triad{grid-template-columns:1fr} #dt-vault .flow{flex-direction:column} #dt-vault .arrow{padding:10px 0} #dt-vault .arrow .ag{transform:rotate(90deg)} } /* ───────────────────────────────────────────────────────────────────────── * Claim Your Pin surface (/business/claim) — the FIRST Business-tab surface. UI-only static * landing: hook, static worked-example concierge conversation (illustration), why-claim cards, * scarcity strip, inert CTA, what's-involved cards. Merit framing (no ads / no bidding / earn * it) — never paid placement. Look ported from claim-your-pin.html, EVERY selector scoped under * #dt-claim. :root tokens scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext/ * .inside/.icard defined here too, scoped under #dt-claim. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-claim{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.1), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-claim *{box-sizing:border-box} #dt-claim .wrap{max-width:880px;margin:0 auto;padding:34px 26px 60px} #dt-claim .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-claim .back:hover{color:var(--gold)} #dt-claim .head{display:flex;align-items:flex-start;gap:16px} #dt-claim .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:24px;line-height:1} #dt-claim .htext .h1{font-family:"Cinzel",serif;font-size:32px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.08} #dt-claim .htext .sub{font-size:15px;color:var(--silver);margin-top:8px;max-width:540px;line-height:1.5} #dt-claim .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-claim .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-claim .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-claim .pill.tier{color:var(--silver)} /* HERO HOOK */ #dt-claim .hook{margin:26px 0 14px;padding:26px;border:1px solid var(--gold-dim);border-radius:18px;background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(0,184,169,.04))} #dt-claim .hook .eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:12px} #dt-claim .hook h2{font-family:"Cinzel",serif;font-size:26px;color:#fff;margin:0 0 12px;line-height:1.2} #dt-claim .hook h2 b{color:var(--gold)} #dt-claim .hook p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink);opacity:.94;max-width:640px} #dt-claim .hook p b{color:var(--gold);font-weight:600} /* WORKED EXAMPLE — the concierge conversation (illustration) */ #dt-claim .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px} #dt-claim .sec-lbl .cexample{color:var(--silver-dim)} #dt-claim .demo{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(15,22,38,.5)} #dt-claim .demo .dtop{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(11,17,30,.5)} #dt-claim .demo .dtop .dot{width:9px;height:9px;border-radius:50%;background:var(--teal)} #dt-claim .demo .dtop .nm{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase} #dt-claim .demo .dconvo{padding:20px;display:flex;flex-direction:column;gap:14px} #dt-claim .bubble{max-width:80%;padding:12px 15px;border-radius:14px;font-size:14px;line-height:1.5} #dt-claim .bubble.ask{align-self:flex-end;background:var(--cosmos-3);border:1px solid var(--line);border-bottom-right-radius:5px;color:#fff} #dt-claim .bubble.ans{align-self:flex-start;background:rgba(0,184,169,.08);border:1px solid var(--teal-dim);border-bottom-left-radius:5px;width:88%;max-width:88%} #dt-claim .bubble .who{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px} #dt-claim .bubble.ask .who{color:var(--silver-dim);text-align:right} #dt-claim .bubble.ans .who{color:var(--teal-bright)} #dt-claim .biz{display:flex;align-items:center;gap:12px;margin-top:11px;padding:12px;border:1px solid var(--gold-dim);border-radius:11px;background:rgba(201,168,76,.07)} #dt-claim .biz .blogo{width:40px;height:40px;border-radius:9px;flex:none;background:linear-gradient(135deg,#2a3550,#0b1325);display:flex;align-items:center;justify-content:center;font-size:18px} #dt-claim .biz .bn{font-size:14px;color:#fff;font-weight:600;display:flex;align-items:center;gap:7px} #dt-claim .biz .bn .chk{font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);padding:2px 6px;border-radius:999px} #dt-claim .biz .bm{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.05em;color:var(--silver);text-transform:uppercase;margin-top:3px} #dt-claim .biz .first{margin-left:auto;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);flex:none} #dt-claim .demo .dcap{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase;text-align:center;padding:0 0 4px} #dt-claim .demo-note{font-size:13px;color:var(--silver);margin-top:14px;line-height:1.6;text-align:center} #dt-claim .demo-note b{color:var(--gold)} /* WHY CLAIM — value rows */ #dt-claim .why{display:grid;grid-template-columns:1fr 1fr;gap:13px} #dt-claim .wcard{display:flex;gap:13px;border:1px solid var(--line);border-radius:13px;padding:17px;background:rgba(15,22,38,.5)} #dt-claim .wcard .wi{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);background:rgba(201,168,76,.08);border:1px solid var(--gold-dim)} #dt-claim .wcard .wt{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-claim .wcard .wd{font-size:12.5px;color:var(--silver);margin-top:4px;line-height:1.5} /* SCARCITY strip */ #dt-claim .scarcity{margin-top:13px;border:1px solid var(--teal-dim);border-radius:12px;padding:15px 18px;display:flex;align-items:center;gap:13px;background:rgba(0,184,169,.05)} #dt-claim .scarcity .si{font-size:17px;color:var(--teal-bright);flex:none} #dt-claim .scarcity .st{font-size:13px;color:var(--ink);line-height:1.55} #dt-claim .scarcity .st b{color:var(--teal-bright)} /* CTA (inert) */ #dt-claim .cta{margin-top:26px;text-align:center;padding:26px;border:1px solid var(--gold-dim);border-radius:18px;background:linear-gradient(135deg,rgba(201,168,76,.1),transparent)} #dt-claim .cta h3{font-family:"Cinzel",serif;font-size:22px;color:#fff;margin:0 0 8px} #dt-claim .cta p{font-size:13.5px;color:var(--silver);margin:0 0 18px;line-height:1.5} #dt-claim .cta .cbtn{display:inline-block;font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 32px;border-radius:12px;border:1px solid var(--gold-dim);background:rgba(201,168,76,.16);color:var(--gold);cursor:pointer} #dt-claim .cta .free{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--silver-dim);text-transform:uppercase;margin-top:12px} /* WHAT'S INVOLVED */ #dt-claim .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-claim .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-claim .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-claim .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:680px){ #dt-claim .why{grid-template-columns:1fr} #dt-claim .inside{grid-template-columns:1fr} #dt-claim .bubble.ask,#dt-claim .bubble.ans{max-width:94%;width:auto} } /* ───────────────────────────────────────────────────────────────────────── * Payouts (Stripe Connect) surface (/business/payouts) — UI-only differentiator explainer. * Contrast hook, legacy-vs-DT two columns, buyer→Stripe→you flow, four safeguards, inert * Connect row, what's-involved cards. Industry critique stays general/unnamed; no overclaim. * Look ported from payouts-stripe.html, EVERY selector scoped under #dt-payouts. :root tokens * scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext/.inside/.icard defined * here too, scoped under #dt-payouts. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-payouts{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-payouts *{box-sizing:border-box} #dt-payouts .wrap{max-width:880px;margin:0 auto;padding:34px 26px 60px} #dt-payouts .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-payouts .back:hover{color:var(--gold)} #dt-payouts .head{display:flex;align-items:flex-start;gap:16px} #dt-payouts .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:23px;line-height:1} #dt-payouts .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-payouts .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:520px;line-height:1.5} #dt-payouts .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-payouts .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-payouts .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-payouts .pill.tier{color:var(--silver)} /* CONTRAST HOOK */ #dt-payouts .hook{margin:26px 0 14px;padding:26px;border:1px solid var(--gold-dim);border-radius:18px;background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(0,184,169,.04))} #dt-payouts .hook .eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:12px} #dt-payouts .hook h2{font-family:"Cinzel",serif;font-size:25px;color:#fff;margin:0 0 12px;line-height:1.22} #dt-payouts .hook h2 b{color:var(--gold)} #dt-payouts .hook p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink);opacity:.94;max-width:660px} #dt-payouts .hook p b{color:var(--gold);font-weight:600} /* THE CONTRAST — two columns */ #dt-payouts .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px} #dt-payouts .vs{display:grid;grid-template-columns:1fr 1fr;gap:14px} #dt-payouts .col{border-radius:15px;padding:20px;border:1px solid var(--line)} #dt-payouts .col.them{background:rgba(15,22,38,.5)} #dt-payouts .col.us{border-color:var(--gold-dim);background:linear-gradient(180deg,rgba(201,168,76,.07),transparent)} #dt-payouts .col .clbl{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px} #dt-payouts .col.them .clbl{color:var(--silver-dim)} #dt-payouts .col.us .clbl{color:var(--gold)} #dt-payouts .cline{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:13.5px;line-height:1.5} #dt-payouts .cline:last-child{margin-bottom:0} #dt-payouts .cline .m{flex:none;font-size:14px;margin-top:1px} #dt-payouts .col.them .cline{color:var(--silver)} #dt-payouts .col.them .m{color:var(--silver-dim)} #dt-payouts .col.us .cline{color:var(--ink)} #dt-payouts .col.us .m{color:var(--teal-bright)} /* FLOW */ #dt-payouts .flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:15px;padding:24px 20px;background:rgba(15,22,38,.45)} #dt-payouts .fnode{text-align:center;min-width:110px} #dt-payouts .fnode .fi{width:48px;height:48px;border-radius:12px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:21px} #dt-payouts .fnode.buyer .fi{background:rgba(168,181,189,.1);border:1px solid var(--line);color:var(--silver)} #dt-payouts .fnode.stripe .fi{background:rgba(0,184,169,.1);border:1px solid var(--teal-dim);color:var(--teal-bright)} #dt-payouts .fnode.you .fi{background:rgba(201,168,76,.12);border:1px solid var(--gold-dim);color:var(--gold)} #dt-payouts .fnode .fn{font-family:"Cinzel",serif;font-size:14px;color:#fff;margin-top:9px} #dt-payouts .fnode .fd{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:4px} #dt-payouts .farrow{padding:0 16px;color:var(--gold);display:flex;flex-direction:column;align-items:center} #dt-payouts .farrow .fl{font-family:"DM Mono",monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-dim);margin-bottom:3px;white-space:nowrap} #dt-payouts .farrow .fg{font-size:18px} #dt-payouts .flow-note{text-align:center;font-size:13px;color:var(--silver);margin-top:14px;line-height:1.6} #dt-payouts .flow-note b{color:var(--gold)} /* SAFEGUARDS */ #dt-payouts .guards{display:grid;grid-template-columns:1fr 1fr;gap:13px} #dt-payouts .guard{display:flex;gap:13px;border:1px solid var(--line);border-radius:13px;padding:17px;background:rgba(15,22,38,.5)} #dt-payouts .guard .gi{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-payouts .guard .gt{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-payouts .guard .gd{font-size:12.5px;color:var(--silver);margin-top:4px;line-height:1.5} /* connect row (inert) */ #dt-payouts .connect{margin-top:26px;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(15,22,38,.5)} #dt-payouts .connect .ct{flex:1;min-width:220px} #dt-payouts .connect .cn{font-size:14px;color:#fff} #dt-payouts .connect .cd{font-size:12.5px;color:var(--silver);margin-top:3px;line-height:1.5} #dt-payouts .connect .cb{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;border-radius:10px;border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);color:var(--teal-bright);cursor:pointer;white-space:nowrap} #dt-payouts .footnote{font-size:12.5px;color:var(--silver);margin-top:18px;line-height:1.6} #dt-payouts .footnote b{color:var(--ink)} #dt-payouts .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-payouts .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-payouts .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-payouts .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:680px){ #dt-payouts .vs{grid-template-columns:1fr} #dt-payouts .guards{grid-template-columns:1fr} #dt-payouts .inside{grid-template-columns:1fr} #dt-payouts .flow{flex-direction:column} #dt-payouts .farrow{padding:10px 0} #dt-payouts .farrow .fg{transform:rotate(90deg)} } /* ───────────────────────────────────────────────────────────────────────── * Comment-to-Pay surface (/business/comment-to-pay) — UI-only worked-loop explainer. How-it- * works + channel chips, the 3-stage loop (post → comment → DM invoice, illustration), the * tracked strip, the sample trigger feed, what's-inside cards. The real CTP engine is untouched. * Look ported from comment-to-pay.html, EVERY selector scoped under #dt-ctp. :root tokens * scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext/.inside/.icard defined * here too, scoped under #dt-ctp. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-ctp{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-ctp *{box-sizing:border-box} #dt-ctp .wrap{max-width:880px;margin:0 auto;padding:34px 26px 60px} #dt-ctp .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-ctp .back:hover{color:var(--gold)} #dt-ctp .head{display:flex;align-items:flex-start;gap:16px} #dt-ctp .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:23px;line-height:1} #dt-ctp .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-ctp .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:530px;line-height:1.5} #dt-ctp .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-ctp .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-ctp .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-ctp .pill.tier{color:var(--silver)} #dt-ctp .howbox{margin:22px 0 8px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-ctp .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-ctp .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-ctp .howbox b{color:var(--gold);font-weight:600} /* CHANNELS */ #dt-ctp .channels{display:flex;gap:9px;align-items:center;margin:14px 0 0 0;flex-wrap:wrap} #dt-ctp .channels .clbl{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin-right:4px} #dt-ctp .chip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(15,22,38,.5)} #dt-ctp .chip .lg{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff} #dt-ctp .chip .ig{background:radial-gradient(circle at 30% 110%,#fdb84b,#fd1d1d 45%,#b330a8 70%,#5b51d8)} #dt-ctp .chip .tt{background:#0a0a0a} #dt-ctp .chip .fb{background:#1877f2} #dt-ctp .chip .cn{font-size:12px;color:var(--ink)} #dt-ctp .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px} /* THE LOOP — worked example, 3 stages */ #dt-ctp .loop{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch} #dt-ctp .stage{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:rgba(15,22,38,.5);display:flex;flex-direction:column} #dt-ctp .stage .stop{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;background:rgba(11,17,30,.5)} #dt-ctp .stage .stop .num{font-family:"DM Mono",monospace;font-size:9px;color:var(--gold);border:1px solid var(--gold-dim);border-radius:6px;padding:2px 6px} #dt-ctp .stage .stop .stt{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver);text-transform:uppercase} #dt-ctp .stage .sin{padding:14px;flex:1} /* stage 1: the post/listing */ #dt-ctp .post .media{height:84px;border-radius:9px;background:linear-gradient(135deg,#1a3a2a,#0c1322);display:flex;align-items:center;justify-content:center;font-size:32px;position:relative} #dt-ctp .post .media .price{position:absolute;bottom:7px;right:7px;font-family:"DM Mono",monospace;font-size:12px;color:var(--gold);background:rgba(8,13,26,.8);padding:3px 8px;border-radius:7px} #dt-ctp .post .cap{font-size:12px;color:var(--ink);margin-top:10px;line-height:1.4} #dt-ctp .post .trig{margin-top:9px;font-family:"DM Mono",monospace;font-size:10px;color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim);border-radius:7px;padding:6px 9px;display:inline-block} /* stage 2: comment */ #dt-ctp .cmt{display:flex;flex-direction:column;gap:9px} #dt-ctp .cline{display:flex;gap:8px;align-items:flex-start} #dt-ctp .cline .av{width:24px;height:24px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#2a3a5a,#0b1325);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--silver)} #dt-ctp .cline .cb{font-size:12px;line-height:1.4} #dt-ctp .cline .cb .u{color:var(--teal-bright);font-weight:500} #dt-ctp .cline .cb .kw{color:var(--gold);font-weight:600} #dt-ctp .cmt .auto{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.08em;color:var(--silver-dim);text-transform:uppercase;margin-top:2px;display:flex;align-items:center;gap:5px} /* stage 3: DM invoice */ #dt-ctp .dm{border:1px solid var(--teal-dim);border-radius:11px;overflow:hidden;background:rgba(0,184,169,.05)} #dt-ctp .dm .dmtop{padding:8px 11px;border-bottom:1px solid var(--teal-dim);font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--teal-bright);text-transform:uppercase;display:flex;align-items:center;gap:6px} #dt-ctp .dm .dmbody{padding:12px} #dt-ctp .dm .dmmsg{font-size:12px;color:var(--ink);line-height:1.45} #dt-ctp .dm .inv{margin-top:10px;border:1px solid var(--line);border-radius:9px;padding:10px;background:rgba(8,13,26,.45)} #dt-ctp .dm .inv .it{display:flex;justify-content:space-between;font-size:12px;color:#fff} #dt-ctp .dm .inv .ip{font-family:"DM Mono",monospace;color:var(--gold)} #dt-ctp .dm .inv .pay{margin-top:9px;text-align:center;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.1);border-radius:7px;padding:8px} #dt-ctp .tracked{margin-top:16px;border:1px solid var(--gold-dim);border-radius:13px;padding:16px 18px;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(201,168,76,.07),transparent)} #dt-ctp .tracked .ti{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.08)} #dt-ctp .tracked .tt{font-size:13.5px;color:var(--ink);line-height:1.55} #dt-ctp .tracked .tt b{color:var(--gold)} /* trigger feed (sample) */ #dt-ctp .feed{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(15,22,38,.45)} #dt-ctp .feed .ftop{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;border-bottom:1px solid var(--line)} #dt-ctp .feed .ftop .fl{font-size:13px;color:#fff} #dt-ctp .feed .ftop .active{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);padding:3px 9px;border-radius:999px} #dt-ctp .frow{display:flex;justify-content:space-between;align-items:center;padding:12px 17px;border-bottom:1px solid rgba(36,49,73,.5);font-size:13px} #dt-ctp .frow:last-child{border-bottom:none} #dt-ctp .frow .fv{color:var(--ink)} #dt-ctp .frow .fv .kw{color:var(--gold);font-family:"DM Mono",monospace;font-size:11px} #dt-ctp .frow .fa{font-family:"DM Mono",monospace;font-size:13px;color:var(--teal-bright)} #dt-ctp .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-ctp .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-ctp .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-ctp .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:740px){ #dt-ctp .loop{grid-template-columns:1fr} #dt-ctp .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * SEND AN INVOICE surface (/business/invoice) — Business-tab surface, id 'invoice'. * UI-only static DISPLAY: header + Coming-soon/Tier/Requires-Stripe pills, How-it-works, the * compose form CENTERPIECE (static mockup, inert Send button), the Stripe-dependency note, the * You send → They pay → You fulfill → Tracked flow, the Shippo + analytics highlight cards, the * one-pipeline footnote, what's-inside cards. The compose form does not submit; the real invoice * backend is untouched. Look ported from modules/businesses/public/invoice.html, EVERY selector * scoped under #dt-invoice. :root tokens scoped onto the root; html/body NOT ported. Shared * .sec-lbl/.htext/.howbox/.inside/.icard/.pill defined here too, scoped under #dt-invoice. * Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-invoice{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-invoice *{box-sizing:border-box} #dt-invoice .wrap{max-width:860px;margin:0 auto;padding:34px 26px 60px} #dt-invoice .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-invoice .back:hover{color:var(--gold)} #dt-invoice .head{display:flex;align-items:flex-start;gap:16px} #dt-invoice .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:22px;line-height:1} #dt-invoice .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-invoice .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:520px;line-height:1.5} #dt-invoice .pills{display:flex;gap:8px;align-items:center;margin:14px 0 0 54px;flex-wrap:wrap} #dt-invoice .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-invoice .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-invoice .pill.tier{color:var(--silver)} #dt-invoice .pill.req{color:var(--silver-dim);border:1px solid var(--line)} #dt-invoice .howbox{margin:22px 0 26px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-invoice .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-invoice .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-invoice .howbox b{color:var(--gold);font-weight:600} #dt-invoice .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px} /* COMPOSE FORM (centerpiece) — static mockup, inert Send */ #dt-invoice .compose{border:1px solid var(--gold-dim);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(201,168,76,.05),transparent)} #dt-invoice .frow{display:flex;align-items:center;gap:14px;padding:17px 20px;border-bottom:1px solid rgba(36,49,73,.6)} #dt-invoice .frow .flbl{font-size:14px;color:#fff;width:90px;flex:none} #dt-invoice .frow .fin{flex:1;text-align:right;font-size:15px;color:var(--silver-dim);font-family:"DM Mono",monospace} #dt-invoice .frow.amount .fin{color:var(--gold);font-size:17px} #dt-invoice .frow .fhint{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.06em;color:var(--silver-dim);text-transform:uppercase} /* disabled / requires-stripe footer */ #dt-invoice .cfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;flex-wrap:wrap} #dt-invoice .cfoot .cmsg{font-size:13px;color:var(--gold);display:flex;align-items:center;gap:8px} #dt-invoice .cfoot .cmsg .lk{color:var(--silver);font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:2px 7px;border-radius:999px} #dt-invoice .cfoot .sendbtn{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:11px 22px;border-radius:10px; border:1px solid var(--line);background:rgba(15,22,38,.6);color:var(--silver-dim);cursor:not-allowed} /* dependency note */ #dt-invoice .dep{margin-top:13px;border:1px dashed var(--gold-dim);border-radius:12px;padding:14px 17px;display:flex;align-items:center;gap:13px;background:rgba(201,168,76,.04)} #dt-invoice .dep .di{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--gold);border:1px solid var(--gold-dim)} #dt-invoice .dep .dt{font-size:13px;color:var(--ink);line-height:1.55} #dt-invoice .dep .dt b{color:var(--gold)} #dt-invoice .dep .soon{margin-left:auto;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-dim);border:1px solid var(--line);padding:4px 9px;border-radius:999px;flex:none} /* FLOW + fulfillment */ #dt-invoice .flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:15px;padding:22px 18px;background:rgba(15,22,38,.45)} #dt-invoice .fn{text-align:center;min-width:96px} #dt-invoice .fn .fi{width:44px;height:44px;border-radius:11px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:19px;border:1px solid var(--line);background:rgba(8,13,26,.4)} #dt-invoice .fn.pay .fi{color:var(--teal-bright);border-color:var(--teal-dim);background:rgba(0,184,169,.08)} #dt-invoice .fn.ship .fi{color:var(--gold);border-color:var(--gold-dim);background:rgba(201,168,76,.08)} #dt-invoice .fn .ft{font-family:"Cinzel",serif;font-size:13px;color:#fff;margin-top:8px} #dt-invoice .fn .fd{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:3px} #dt-invoice .farr{padding:0 12px;color:var(--gold);font-size:16px} /* fulfillment + analytics highlight */ #dt-invoice .rails{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px} #dt-invoice .rail{display:flex;gap:13px;border:1px solid var(--line);border-radius:13px;padding:17px;background:rgba(15,22,38,.5)} #dt-invoice .rail .ri{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px} #dt-invoice .rail.ship .ri{color:var(--gold);background:rgba(201,168,76,.08);border:1px solid var(--gold-dim)} #dt-invoice .rail.track .ri{color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-invoice .rail .rt{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-invoice .rail .rd{font-size:12.5px;color:var(--silver);margin-top:4px;line-height:1.5} #dt-invoice .footnote{font-size:12.5px;color:var(--silver);margin-top:16px;line-height:1.6} #dt-invoice .footnote b{color:var(--ink)} #dt-invoice .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-invoice .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-invoice .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-invoice .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:680px){ #dt-invoice .rails{grid-template-columns:1fr} #dt-invoice .inside{grid-template-columns:1fr} #dt-invoice .flow{flex-direction:column} #dt-invoice .farr{transform:rotate(90deg);padding:8px 0} } /* ───────────────────────────────────────────────────────────────────────── * SALES & ANALYTICS surface (/business/analytics) — Business-tab surface, id 'analytics'. * DISPLAY-ONLY static mockup, HELD as "coming soon" (the unified analytics isn't ready — claims, * Comment-to-Pay, invoices, auctions don't feed one model yet). NO fetch / NO seller gate; all * numbers SAMPLE. Look ported from sales-analytics.html, EVERY selector scoped under * #dt-analytics. :root tokens (incl. the per-source --src-* colors) scoped onto the root; * html/body NOT ported. Shared .howbox/.sec-lbl/.pills/.pill scoped here too. The real seller * dashboard styles live separately in public/me-hub/hub.css (untouched). Fills #panel as a * scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-analytics{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; --src-ctp:#C9A84C; --src-inv:#3fe0d2; --src-auc:#9a7fd8; --src-claim:#00B8A9; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-analytics *{box-sizing:border-box} #dt-analytics .wrap{max-width:900px;margin:0 auto;padding:34px 26px 60px} #dt-analytics .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-analytics .back:hover{color:var(--gold)} #dt-analytics .head{display:flex;align-items:flex-start;gap:16px} #dt-analytics .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:22px;line-height:1} #dt-analytics .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-analytics .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:540px;line-height:1.5} #dt-analytics .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-analytics .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-analytics .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-analytics .pill.tier{color:var(--silver)} #dt-analytics .howbox{margin:22px 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-analytics .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-analytics .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-analytics .howbox b{color:var(--gold);font-weight:600} /* range tabs (inert) */ #dt-analytics .ranges{display:flex;gap:7px;margin-bottom:16px} #dt-analytics .rtab{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:8px;border:1px solid var(--line);color:var(--silver-dim);cursor:pointer} #dt-analytics .rtab.on{border-color:var(--gold-dim);color:var(--gold);background:rgba(201,168,76,.07)} /* KPI cards */ #dt-analytics .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:8px} #dt-analytics .kpi{border:1px solid var(--line);border-radius:14px;padding:16px;background:rgba(15,22,38,.55)} #dt-analytics .kpi .k{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase} #dt-analytics .kpi .v{font-family:"DM Mono",monospace;font-size:24px;color:#fff;margin-top:8px} #dt-analytics .kpi .v.gold{color:var(--gold)} #dt-analytics .kpi .s{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em;color:var(--silver-dim);text-transform:uppercase;margin-top:5px} #dt-analytics .sample-tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase;margin:0 0 14px} #dt-analytics .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:26px 0 13px;display:flex;align-items:center;gap:9px} #dt-analytics .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} /* revenue chart — stacked by source (CSS bars, no lib) */ #dt-analytics .chartcard{border:1px solid var(--line);border-radius:15px;padding:20px;background:rgba(15,22,38,.5)} #dt-analytics .legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px} #dt-analytics .leg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--silver)} #dt-analytics .leg .sw{width:11px;height:11px;border-radius:3px;flex:none} #dt-analytics .sw.ctp{background:var(--src-ctp)} #dt-analytics .sw.inv{background:var(--src-inv)} #dt-analytics .sw.auc{background:var(--src-auc)} #dt-analytics .sw.claim{background:var(--src-claim)} #dt-analytics .chart{display:flex;align-items:flex-end;justify-content:space-between;gap:9px;height:170px} #dt-analytics .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%} #dt-analytics .seg{width:100%;border-radius:2px} #dt-analytics .seg.ctp{background:var(--src-ctp)} #dt-analytics .seg.inv{background:var(--src-inv)} #dt-analytics .seg.auc{background:var(--src-auc)} #dt-analytics .seg.claim{background:var(--src-claim)} #dt-analytics .col .lab{font-family:"DM Mono",monospace;font-size:8px;color:var(--silver-dim);text-align:center;margin-top:6px} /* by-source breakdown */ #dt-analytics .sources{display:grid;grid-template-columns:repeat(4,1fr);gap:13px} #dt-analytics .source{border:1px solid var(--line);border-radius:13px;padding:16px;background:rgba(15,22,38,.5);position:relative;overflow:hidden} #dt-analytics .source::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px} #dt-analytics .source.ctp::before{background:var(--src-ctp)} #dt-analytics .source.inv::before{background:var(--src-inv)} #dt-analytics .source.auc::before{background:var(--src-auc)} #dt-analytics .source.claim::before{background:var(--src-claim)} #dt-analytics .source .sname{display:flex;align-items:center;gap:8px;font-family:"Cinzel",serif;font-size:14px;color:#fff} #dt-analytics .source .sdot{width:9px;height:9px;border-radius:3px;flex:none} #dt-analytics .source .srev{font-family:"DM Mono",monospace;font-size:20px;color:#fff;margin-top:10px} #dt-analytics .source .smeta{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:5px} #dt-analytics .source .sshare{font-size:11px;color:var(--silver-dim);margin-top:7px} /* tables */ #dt-analytics .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px} #dt-analytics .tbl{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(15,22,38,.45)} #dt-analytics .tbl .th{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver);text-transform:uppercase} #dt-analytics .tbl .tr{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid rgba(36,49,73,.5);font-size:13px} #dt-analytics .tbl .tr:last-child{border-bottom:none} #dt-analytics .tbl .tr .nm{color:#fff;display:flex;align-items:center;gap:8px} #dt-analytics .tbl .tr .src-pip{width:7px;height:7px;border-radius:2px;flex:none} #dt-analytics .tbl .tr .num{font-family:"DM Mono",monospace;color:var(--silver)} #dt-analytics .tbl .tr .num.gold{color:var(--gold)} /* status pills */ #dt-analytics .statusrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} #dt-analytics .stat{border:1px solid var(--line);border-radius:11px;padding:12px 16px;background:rgba(15,22,38,.5);min-width:96px} #dt-analytics .stat .sc{font-family:"DM Mono",monospace;font-size:20px;color:#fff} #dt-analytics .stat .sl{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em;color:var(--silver);text-transform:uppercase;margin-top:4px} #dt-analytics .stat.paid .sc{color:var(--teal-bright)} #dt-analytics .stat.shipped .sc{color:var(--gold)} @media (max-width:760px){ #dt-analytics .kpis{grid-template-columns:repeat(2,1fr)} #dt-analytics .sources{grid-template-columns:repeat(2,1fr)} #dt-analytics .two-col{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * ORDERS & FULFILLMENT surface (/business/orders) — Business-tab surface, id 'orders'. * DISPLAY-ONLY static mockup ("coming soon"). References Shippo / claims-handoff / calendar but * wires NONE — all orders/states SAMPLE; row actions inert; only "Open calendar" links out. Look * ported from orders-fulfillment.html, EVERY selector scoped under #dt-orders. :root tokens scoped * onto the root; html/body NOT ported. Shared .howbox/.sec-lbl/.pills/.pill/.inside/.icard scoped * here too. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-orders{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-orders *{box-sizing:border-box} #dt-orders .wrap{max-width:900px;margin:0 auto;padding:34px 26px 60px} #dt-orders .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-orders .back:hover{color:var(--gold)} #dt-orders .head{display:flex;align-items:flex-start;gap:16px} #dt-orders .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:22px;line-height:1} #dt-orders .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-orders .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:540px;line-height:1.5} #dt-orders .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-orders .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-orders .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-orders .pill.tier{color:var(--silver)} #dt-orders .howbox{margin:22px 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-orders .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-orders .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-orders .howbox b{color:var(--gold);font-weight:600} #dt-orders .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:28px 0 13px;display:flex;align-items:center;gap:10px;color:var(--silver)} #dt-orders .sec-lbl.ship{color:var(--teal-bright)} #dt-orders .sec-lbl.local{color:var(--gold)} #dt-orders .sec-lbl.inside-lbl{color:var(--silver)} #dt-orders .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--silver-dim);border:1px solid var(--line);padding:2px 8px;border-radius:999px} #dt-orders .sec-lbl .cnt{margin-left:auto;font-family:"DM Mono",monospace;font-size:9px;color:var(--silver);letter-spacing:.06em} /* order list */ #dt-orders .orders{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(15,22,38,.45)} #dt-orders .orders.ship{border-color:var(--teal-dim)} #dt-orders .orders.local{border-color:var(--gold-dim)} #dt-orders .order{display:flex;align-items:center;gap:14px;padding:15px 17px;border-bottom:1px solid rgba(36,49,73,.5)} #dt-orders .order:last-child{border-bottom:none} #dt-orders .order .thumb{width:42px;height:42px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(135deg,#1a3a2a,#0c1322)} #dt-orders .order .ob{flex:1;min-width:0} #dt-orders .order .on{font-size:14px;color:#fff} #dt-orders .order .om{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.05em;color:var(--silver);text-transform:uppercase;margin-top:3px;display:flex;gap:8px;flex-wrap:wrap} #dt-orders .order .om .buyer{color:var(--silver)} #dt-orders .order .price{font-family:"DM Mono",monospace;font-size:14px;color:var(--gold);flex:none} /* status chip */ #dt-orders .ost{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;flex:none;white-space:nowrap} #dt-orders .ost.paid{color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.07)} #dt-orders .ost.label{color:var(--silver);border:1px solid var(--line)} #dt-orders .ost.transit{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-orders .ost.delivered{color:var(--silver-dim);border:1px solid var(--line)} #dt-orders .ost.pending{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-orders .ost.scheduled{color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.07)} /* row action (inert) */ #dt-orders .oact{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:8px;cursor:pointer;flex:none} #dt-orders .oact.ship{border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);color:var(--teal-bright)} #dt-orders .oact.local{border:1px solid var(--gold-dim);background:rgba(201,168,76,.08);color:var(--gold)} #dt-orders .oact.ghost{border:1px solid var(--line);background:transparent;color:var(--silver-dim)} /* combined-shipping hint */ #dt-orders .combine{display:flex;align-items:center;gap:11px;margin-top:10px;padding:11px 15px;border:1px dashed var(--teal-dim);border-radius:11px;background:rgba(0,184,169,.04);font-size:12.5px;color:var(--silver)} #dt-orders .combine b{color:var(--teal-bright)} /* calendar tie-in (prominent) */ #dt-orders .caltie{margin-top:13px;border:1px solid var(--gold-dim);border-radius:14px;padding:18px 20px;background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(0,184,169,.03))} #dt-orders .caltie .ch{display:flex;align-items:center;gap:11px;margin-bottom:12px} #dt-orders .caltie .ci{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.08)} #dt-orders .caltie .ct{font-family:"Cinzel",serif;font-size:16px;color:#fff} #dt-orders .caltie .cd{font-size:13px;color:var(--ink);opacity:.92;line-height:1.55;margin-bottom:14px} #dt-orders .caltie .cd b{color:var(--gold)} /* mini handoff schedule */ #dt-orders .handoffs{display:flex;gap:10px;flex-wrap:wrap} #dt-orders .hslot{flex:1;min-width:150px;border:1px solid var(--line);border-radius:11px;padding:13px;background:rgba(8,13,26,.4)} #dt-orders .hslot .hday{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.1em;color:var(--teal-bright);text-transform:uppercase} #dt-orders .hslot .hitem{font-size:13px;color:#fff;margin-top:7px} #dt-orders .hslot .hwho{font-family:"DM Mono",monospace;font-size:9px;color:var(--silver);text-transform:uppercase;margin-top:4px} #dt-orders .caltie .calbtn{margin-top:14px;display:inline-block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border-radius:10px;border:1px solid var(--gold-dim);background:rgba(201,168,76,.1);color:var(--gold);cursor:pointer;text-decoration:none} #dt-orders .caltie .calbtn:hover{background:rgba(201,168,76,.16)} #dt-orders .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-orders .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-orders .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-orders .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:680px){ #dt-orders .inside{grid-template-columns:1fr} #dt-orders .order{flex-wrap:wrap} #dt-orders .order .price{margin-left:auto} } /* ───────────────────────────────────────────────────────────────────────── * CUSTOMERS surface (/business/customers) — Business-tab surface, id 'customers'. * DISPLAY-ONLY static mockup ("coming soon"). All customers/orders/notes SAMPLE; toggles + * row-select visual-only. Look ported from customers.html, EVERY selector scoped under * #dt-customers. :root tokens (incl. per-source --src-* pip colors) scoped onto the root; * html/body NOT ported. Shared .howbox/.sec-lbl/.pills/.pill/.inside/.icard scoped here too. * Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-customers{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; --src-ctp:#C9A84C; --src-inv:#3fe0d2; --src-auc:#9a7fd8; --src-claim:#00B8A9; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-customers *{box-sizing:border-box} #dt-customers .wrap{max-width:920px;margin:0 auto;padding:34px 26px 60px} #dt-customers .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-customers .back:hover{color:var(--gold)} #dt-customers .head{display:flex;align-items:flex-start;gap:16px} #dt-customers .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:20px;line-height:1} #dt-customers .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-customers .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:540px;line-height:1.5} #dt-customers .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-customers .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-customers .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-customers .pill.tier{color:var(--silver)} #dt-customers .howbox{margin:22px 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-customers .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-customers .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-customers .howbox b{color:var(--gold);font-weight:600} #dt-customers .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:26px 0 13px;display:flex;align-items:center;gap:10px} #dt-customers .sec-lbl.inside-lbl{margin-top:30px} #dt-customers .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} /* split: list + detail */ #dt-customers .split{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start} /* customer list */ #dt-customers .clist{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(15,22,38,.45)} #dt-customers .clist .lhead{padding:11px 15px;border-bottom:1px solid var(--line);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--silver);text-transform:uppercase;display:flex;justify-content:space-between} #dt-customers .crow{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid rgba(36,49,73,.5);cursor:pointer;transition:background .14s} #dt-customers .crow:last-child{border-bottom:none} #dt-customers .crow.active{background:rgba(201,168,76,.07)} #dt-customers .crow:hover{background:rgba(255,255,255,.02)} #dt-customers .crow .av{width:32px;height:32px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#2a3a5a,#0b1325);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--silver)} #dt-customers .crow .cb{flex:1;min-width:0} #dt-customers .crow .cn{font-size:13px;color:#fff;display:flex;align-items:center;gap:6px} #dt-customers .crow .cn .reg{font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);padding:1px 5px;border-radius:999px} #dt-customers .crow .cm{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.04em;color:var(--silver-dim);text-transform:uppercase;margin-top:3px} #dt-customers .crow .csp{font-family:"DM Mono",monospace;font-size:12px;color:var(--gold);flex:none} /* detail panel */ #dt-customers .detail{border:1px solid var(--gold-dim);border-radius:14px;padding:20px;background:linear-gradient(180deg,rgba(201,168,76,.05),transparent)} #dt-customers .dhead{display:flex;align-items:center;gap:13px;margin-bottom:16px} #dt-customers .dhead .dav{width:48px;height:48px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#2a3a5a,#0b1325);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--silver)} #dt-customers .dhead .dn{font-family:"Cinzel",serif;font-size:19px;color:#fff;display:flex;align-items:center;gap:9px} #dt-customers .dhead .dn .chk{font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);padding:2px 6px;border-radius:999px} #dt-customers .dhead .dmeta{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.05em;color:var(--silver);text-transform:uppercase;margin-top:4px} /* stat strip */ #dt-customers .dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px} #dt-customers .dstat{border:1px solid var(--line);border-radius:11px;padding:13px;background:rgba(8,13,26,.4);text-align:center} #dt-customers .dstat .dv{font-family:"DM Mono",monospace;font-size:18px;color:#fff} #dt-customers .dstat .dl{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em;color:var(--silver);text-transform:uppercase;margin-top:4px} /* unified history */ #dt-customers .dsub{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin:0 0 10px} #dt-customers .hist{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} #dt-customers .hrow{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(8,13,26,.35)} #dt-customers .hrow .pip{width:8px;height:8px;border-radius:2px;flex:none} #dt-customers .pip.ctp{background:var(--src-ctp)} #dt-customers .pip.inv{background:var(--src-inv)} #dt-customers .pip.auc{background:var(--src-auc)} #dt-customers .pip.claim{background:var(--src-claim)} #dt-customers .hrow .hn{flex:1;font-size:13px;color:#fff} #dt-customers .hrow .hsrc{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.06em;color:var(--silver-dim);text-transform:uppercase} #dt-customers .hrow .hp{font-family:"DM Mono",monospace;font-size:12px;color:var(--gold)} /* notes */ #dt-customers .notes{border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:rgba(8,13,26,.35);font-size:13px;color:var(--silver);line-height:1.5;margin-bottom:18px} #dt-customers .notes .npen{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:var(--silver-dim);text-transform:uppercase;float:right} /* CONCIERGE CONTROLS */ #dt-customers .concierge{border:1px solid var(--teal-dim);border-radius:13px;padding:17px;background:rgba(0,184,169,.04)} #dt-customers .concierge .ch{display:flex;align-items:center;gap:9px;margin-bottom:6px} #dt-customers .concierge .ci{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-customers .concierge .ct{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-customers .concierge .cdesc{font-size:12px;color:var(--silver);line-height:1.5;margin-bottom:14px} #dt-customers .ctog{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(36,49,73,.4)} #dt-customers .ctog:last-child{border-bottom:none} #dt-customers .ctog .ctt{flex:1} #dt-customers .ctog .ctn{font-size:13px;color:#fff} #dt-customers .ctog .ctd{font-size:11.5px;color:var(--silver-dim);margin-top:2px;line-height:1.4} #dt-customers .tog{width:40px;height:23px;border-radius:999px;flex:none;position:relative;cursor:pointer;transition:background .15s;background:var(--cosmos-3);border:1px solid var(--line)} #dt-customers .tog.on{background:rgba(0,184,169,.25);border-color:var(--teal-dim)} #dt-customers .tog .knob{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--silver);transition:all .15s} #dt-customers .tog.on .knob{left:19px;background:var(--teal-bright)} #dt-customers .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-customers .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-customers .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-customers .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:760px){ #dt-customers .split{grid-template-columns:1fr} #dt-customers .inside{grid-template-columns:1fr} #dt-customers .dstats{grid-template-columns:1fr 1fr} } /* ───────────────────────────────────────────────────────────────────────── * REPUTATION & RATINGS surface (/business/ratings) — Business-tab surface, id 'ratings'. * DISPLAY-ONLY static mockup ("coming soon"). All scores/counts SAMPLE; nothing aggregated/computed. * Look ported from reputation-ratings.html, EVERY selector scoped under #dt-ratings. :root tokens * scoped onto the root; html/body NOT ported. Shared .sec-lbl/.htext/.pills/.pill/.inside/.icard * scoped here too. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-ratings{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.1), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-ratings *{box-sizing:border-box} #dt-ratings .wrap{max-width:880px;margin:0 auto;padding:34px 26px 60px} #dt-ratings .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-ratings .back:hover{color:var(--gold)} #dt-ratings .head{display:flex;align-items:flex-start;gap:16px} #dt-ratings .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:23px;line-height:1} #dt-ratings .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-ratings .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:540px;line-height:1.5} #dt-ratings .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-ratings .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-ratings .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-ratings .pill.tier{color:var(--silver)} #dt-ratings .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:26px 0 14px;display:flex;align-items:center;gap:10px} #dt-ratings .sec-lbl.inside-lbl{margin-top:30px} #dt-ratings .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} /* HERO — side by side */ #dt-ratings .rep{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;border:1px solid var(--gold-dim);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(0,184,169,.03))} #dt-ratings .repcol{padding:24px 22px} #dt-ratings .repcol .rlbl{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px} #dt-ratings .repcol.agg .rlbl{color:var(--silver)} #dt-ratings .repcol.dt .rlbl{color:var(--teal-bright)} #dt-ratings .repcol .score{display:flex;align-items:baseline;gap:8px} #dt-ratings .repcol .num{font-family:"DM Mono",monospace;font-size:42px;line-height:1;color:#fff} #dt-ratings .repcol .of5{font-family:"DM Mono",monospace;font-size:14px;color:var(--silver-dim)} #dt-ratings .stars{color:var(--gold);font-size:16px;letter-spacing:2px;margin-top:9px} #dt-ratings .repcol .count{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;margin-top:10px} #dt-ratings .repcol.dt{background:rgba(0,184,169,.04)} #dt-ratings .repcol.dt .vh{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08);padding:4px 9px;border-radius:999px} #dt-ratings .repdiv{width:1px;background:var(--gold-dim);position:relative} #dt-ratings .repdiv::after{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--cosmos-2);color:var(--gold);font-family:"DM Mono",monospace;font-size:14px;width:26px;height:26px;border:1px solid var(--gold-dim);border-radius:50%;display:flex;align-items:center;justify-content:center} /* sources feeding the aggregate */ #dt-ratings .feeds{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} #dt-ratings .feed{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.04em;color:var(--silver);text-transform:uppercase;border:1px solid var(--line);background:rgba(8,13,26,.4);padding:5px 9px;border-radius:7px;display:flex;align-items:center;gap:6px} #dt-ratings .feed .fd{width:6px;height:6px;border-radius:50%;background:var(--silver-dim)} #dt-ratings .totalbar{margin-top:14px;border:1px solid var(--gold-dim);border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:rgba(201,168,76,.06)} #dt-ratings .totalbar .tlbl{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase} #dt-ratings .totalbar .tscore{font-family:"DM Mono",monospace;font-size:30px;color:#fff;display:flex;align-items:baseline;gap:7px} #dt-ratings .totalbar .tscore .of5{font-size:13px;color:var(--silver-dim)} #dt-ratings .totalbar .tstars{color:var(--gold);font-size:17px;letter-spacing:2px} #dt-ratings .totalbar .tcount{margin-left:auto;font-family:"DM Mono",monospace;font-size:10px;color:var(--silver);text-transform:uppercase;letter-spacing:.06em} /* CTA / pain block */ #dt-ratings .why{margin-top:26px;padding:24px;border:1px solid var(--gold-dim);border-radius:16px;background:linear-gradient(135deg,rgba(201,168,76,.1),transparent)} #dt-ratings .why .eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:11px} #dt-ratings .why h2{font-family:"Cinzel",serif;font-size:22px;color:#fff;margin:0 0 12px;line-height:1.25} #dt-ratings .why h2 b{color:var(--gold)} #dt-ratings .why p{margin:0;font-size:14px;line-height:1.65;color:var(--ink);opacity:.94;max-width:660px} #dt-ratings .why p b{color:var(--gold);font-weight:600} /* verified-human anchor */ #dt-ratings .anchor{margin-top:14px;border:1px solid var(--teal-dim);border-radius:16px;padding:22px;background:rgba(0,184,169,.05)} #dt-ratings .anchor .ah{display:flex;align-items:center;gap:11px;margin-bottom:10px} #dt-ratings .anchor .ai{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-ratings .anchor .at{font-family:"Cinzel",serif;font-size:18px;color:#fff} #dt-ratings .anchor .ad{font-size:13.5px;color:var(--ink);opacity:.92;line-height:1.6;margin-bottom:16px} #dt-ratings .anchor .ad b{color:var(--teal-bright)} #dt-ratings .compare{display:grid;grid-template-columns:1fr 1fr;gap:12px} #dt-ratings .ccol{border:1px solid var(--line);border-radius:12px;padding:16px;background:rgba(8,13,26,.4)} #dt-ratings .ccol .cl{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px} #dt-ratings .ccol.them .cl{color:var(--silver-dim)} #dt-ratings .ccol.us .cl{color:var(--teal-bright)} #dt-ratings .ccol .ci{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;margin-bottom:9px} #dt-ratings .ccol .ci:last-child{margin-bottom:0} #dt-ratings .ccol.them .ci{color:var(--silver)} #dt-ratings .ccol.us .ci{color:var(--ink)} #dt-ratings .ccol .m{flex:none;margin-top:1px} #dt-ratings .ccol.them .m{color:var(--silver-dim)} #dt-ratings .ccol.us .m{color:var(--teal-bright)} #dt-ratings .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-ratings .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-ratings .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-ratings .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:680px){ #dt-ratings .rep{grid-template-columns:1fr} #dt-ratings .repdiv{width:auto;height:1px} #dt-ratings .compare{grid-template-columns:1fr} #dt-ratings .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * LISTINGS & CATALOG surface (/business/listings) — Business-tab surface, id 'listings'. * DISPLAY-ONLY static mockup ("coming soon"). All listings/previews SAMPLE; create/import/vibe/ * preview actions inert. Look ported from listings-catalog.html, EVERY selector scoped under * #dt-listings. :root tokens scoped onto the root; html/body NOT ported. Shared .howbox/.sec-lbl/ * .pills/.pill/.inside/.icard scoped here too. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-listings{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-listings *{box-sizing:border-box} #dt-listings .wrap{max-width:920px;margin:0 auto;padding:34px 26px 60px} #dt-listings .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-listings .back:hover{color:var(--gold)} #dt-listings .head{display:flex;align-items:flex-start;gap:16px} #dt-listings .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:21px;line-height:1} #dt-listings .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-listings .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:540px;line-height:1.5} #dt-listings .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-listings .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-listings .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-listings .pill.tier{color:var(--silver)} #dt-listings .howbox{margin:22px 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-listings .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-listings .howbox p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);opacity:.95} #dt-listings .howbox b{color:var(--gold);font-weight:600} #dt-listings .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:28px 0 13px;display:flex;align-items:center;gap:10px} #dt-listings .sec-lbl.inside-lbl{margin-top:30px} #dt-listings .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} /* CREATE PATHS */ #dt-listings .create{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:13px} #dt-listings .cpath{border:1px solid var(--line);border-radius:15px;padding:18px;background:rgba(15,22,38,.5);position:relative} #dt-listings .cpath.voice{border-color:var(--gold-dim);background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(0,184,169,.03))} #dt-listings .cpath .new{position:absolute;top:14px;right:14px;font-family:"DM Mono",monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.08);padding:2px 7px;border-radius:999px} #dt-listings .cpath .cpi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px} #dt-listings .cpath.voice .cpi{color:var(--gold);background:rgba(201,168,76,.12);border:1px solid var(--gold-dim)} #dt-listings .cpath.manual .cpi{color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-listings .cpath.ingest .cpi{color:var(--silver);background:rgba(168,181,189,.08);border:1px solid var(--line)} #dt-listings .cpath .cpt{font-family:"Cinzel",serif;font-size:16px;color:#fff} #dt-listings .cpath .cpd{font-size:12.5px;color:var(--silver);margin-top:6px;line-height:1.5} #dt-listings .vsteps{display:flex;align-items:center;gap:7px;margin-top:14px;flex-wrap:wrap} #dt-listings .vstep{display:flex;align-items:center;gap:6px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.04em;color:var(--ink);text-transform:uppercase;border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);border-radius:8px;padding:7px 10px} #dt-listings .vstep .vn{color:var(--gold)} #dt-listings .varrow{color:var(--gold);font-size:12px} #dt-listings .cpbtn{margin-top:14px;display:inline-block;font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:9px;cursor:pointer} #dt-listings .cpath.voice .cpbtn{border:1px solid var(--gold-dim);background:rgba(201,168,76,.14);color:var(--gold)} #dt-listings .cpath.manual .cpbtn,#dt-listings .cpath.ingest .cpbtn{border:1px solid var(--line);background:transparent;color:var(--silver)} /* CATALOG */ #dt-listings .cat-tabs{display:flex;gap:8px;margin-bottom:14px} #dt-listings .ctab{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:8px;border:1px solid var(--line);color:var(--silver-dim);cursor:pointer} #dt-listings .ctab.on{border-color:var(--gold-dim);color:var(--gold);background:rgba(201,168,76,.07)} #dt-listings .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px} #dt-listings .item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(15,22,38,.55);transition:border-color .15s} #dt-listings .item:hover{border-color:var(--gold-dim)} #dt-listings .item .pic{height:96px;position:relative;background:linear-gradient(135deg, rgba(36,49,73,.5), rgba(11,17,30,.8));border-bottom:1px solid var(--line)} #dt-listings .item .pic::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border:1.5px solid rgba(168,181,189,.25);border-radius:6px} #dt-listings .item .pic.svc::after{border-radius:50%} #dt-listings .item .st{position:absolute;top:9px;left:9px;font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px} #dt-listings .st.live{background:rgba(0,184,169,.14);color:var(--teal-bright);border:1px solid var(--teal-dim)} #dt-listings .st.draft{background:rgba(168,181,189,.1);color:var(--silver);border:1px solid var(--line)} #dt-listings .item .ib{padding:12px 13px} #dt-listings .item .inm{font-size:13px;color:#fff;line-height:1.3;font-weight:500} #dt-listings .item .irow{display:flex;justify-content:space-between;align-items:center;margin-top:8px} #dt-listings .item .imeta{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.05em;color:var(--silver-dim);text-transform:uppercase} #dt-listings .item .iprice{font-family:"DM Mono",monospace;font-size:13px;color:var(--gold)} /* SHOP VIBE editor */ #dt-listings .vibe{border:1px solid var(--teal-dim);border-radius:16px;padding:20px;background:rgba(0,184,169,.04)} #dt-listings .vibe .vh{display:flex;align-items:center;gap:11px;margin-bottom:6px} #dt-listings .vibe .vi{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-listings .vibe .vt{font-family:"Cinzel",serif;font-size:17px;color:#fff} #dt-listings .vibe .vd{font-size:13px;color:var(--silver);line-height:1.55;margin-bottom:16px} #dt-listings .vibe-paths{display:grid;grid-template-columns:1fr 1fr;gap:13px} #dt-listings .vpath{border:1px solid var(--line);border-radius:12px;padding:16px;background:rgba(8,13,26,.4)} #dt-listings .vpath .vph{display:flex;align-items:center;gap:9px;margin-bottom:9px} #dt-listings .vpath .vpi{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-listings .vpath .vpt{font-family:"Cinzel",serif;font-size:14px;color:#fff} #dt-listings .vpath .vpd{font-size:12px;color:var(--silver);line-height:1.5} #dt-listings .vpath .vpd b{color:var(--ink)} #dt-listings .vpath .vp-or{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.06em;color:var(--silver-dim);text-transform:uppercase;margin-top:10px;text-align:center} #dt-listings .mfield{margin-top:12px;border:1px dashed var(--line);border-radius:9px;padding:11px 13px;font-family:"DM Mono",monospace;font-size:11px;color:var(--silver-dim);display:flex;align-items:center;gap:8px} #dt-listings .mfield .ph{color:var(--silver-dim)} #dt-listings .preview-row{display:flex;gap:9px;margin-top:12px} #dt-listings .pv{flex:1;border:1px solid var(--line);border-radius:9px;padding:8px;background:rgba(15,22,38,.6);cursor:pointer;transition:border-color .14s} #dt-listings .pv.on{border-color:var(--gold-dim);background:rgba(201,168,76,.06)} #dt-listings .pv .pv-bar{height:7px;border-radius:3px;background:var(--gold);margin-bottom:6px;opacity:.7} #dt-listings .pv .pv-bar.alt{background:var(--teal)} #dt-listings .pv .pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px} #dt-listings .pv .pv-grid span{height:11px;border-radius:2px;background:rgba(168,181,189,.2)} #dt-listings .pv .pv-gallery{height:25px;border-radius:2px;background:rgba(168,181,189,.2)} #dt-listings .pv .pv-list{display:flex;flex-direction:column;gap:3px} #dt-listings .pv .pv-list span{height:6px;border-radius:2px;background:rgba(168,181,189,.2)} #dt-listings .pv .pv-lbl{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;text-align:center;margin-top:7px} #dt-listings .vibe-foot{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(36,49,73,.5);flex-wrap:wrap} #dt-listings .vibe-foot .vfnote{font-size:12.5px;color:var(--silver)} #dt-listings .vibe-foot .vfnote b{color:var(--ink)} #dt-listings .vibe-foot .vfbtn{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--silver);cursor:pointer} /* PROJECT tie-in */ #dt-listings .project{margin-top:14px;border:1px dashed var(--gold-dim);border-radius:13px;padding:17px 19px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(201,168,76,.04)} #dt-listings .project .pi{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);border:1px solid var(--gold-dim)} #dt-listings .project .pt{flex:1;min-width:240px;font-size:13px;color:var(--ink);line-height:1.55} #dt-listings .project .pt b{color:var(--gold)} #dt-listings .project .pbtn{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:9px;border:1px solid var(--gold-dim);background:rgba(201,168,76,.1);color:var(--gold);cursor:pointer} #dt-listings .inside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:30px} #dt-listings .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-listings .icard .t{font-family:"Cinzel",serif;font-size:14px;color:#fff} #dt-listings .icard .d{font-size:12px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:760px){ #dt-listings .create{grid-template-columns:1fr} #dt-listings .grid{grid-template-columns:repeat(2,1fr)} #dt-listings .vibe-paths{grid-template-columns:1fr} #dt-listings .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * AUTO-INGEST LISTINGS surface (/business/auto-ingest) — Business-tab surface, id 'ingest'. * DISPLAY-ONLY static mockup ("coming soon"). Inert affordances; nothing wired. Look ported from * auto-ingest.html, EVERY selector scoped under #dt-ingest. :root tokens scoped onto the root; * html/body NOT ported. Shared .sec-lbl/.pills/.pill/.inside/.icard scoped here too. Fills #panel * as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-ingest{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-ingest *{box-sizing:border-box} #dt-ingest .wrap{max-width:880px;margin:0 auto;padding:34px 26px 60px} #dt-ingest .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-ingest .back:hover{color:var(--gold)} #dt-ingest .head{display:flex;align-items:flex-start;gap:16px} #dt-ingest .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:22px;line-height:1} #dt-ingest .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-ingest .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:540px;line-height:1.5} #dt-ingest .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-ingest .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-ingest .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-ingest .pill.tier{color:var(--silver)} /* WHY hook */ #dt-ingest .hook{margin:26px 0 14px;padding:24px;border:1px solid var(--gold-dim);border-radius:18px;background:linear-gradient(135deg,rgba(201,168,76,.11),rgba(0,184,169,.04))} #dt-ingest .hook .eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:11px} #dt-ingest .hook h2{font-family:"Cinzel",serif;font-size:24px;color:#fff;margin:0 0 12px;line-height:1.25} #dt-ingest .hook h2 b{color:var(--gold)} #dt-ingest .hook p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink);opacity:.94;max-width:660px} #dt-ingest .hook p b{color:var(--gold);font-weight:600} #dt-ingest .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:28px 0 13px} #dt-ingest .sec-lbl.inside-lbl{margin-top:30px} /* TWO INPUT METHODS */ #dt-ingest .methods{display:grid;grid-template-columns:1fr 1fr;gap:14px} #dt-ingest .method{border:1px solid var(--line);border-radius:15px;padding:20px;background:rgba(15,22,38,.5)} #dt-ingest .method .mi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:13px;color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-ingest .method .mt{font-family:"Cinzel",serif;font-size:17px;color:#fff} #dt-ingest .method .md{font-size:13px;color:var(--silver);margin-top:6px;line-height:1.55} #dt-ingest .method .md b{color:var(--ink)} #dt-ingest .mfield{margin-top:14px;border:1px dashed var(--line);border-radius:10px;padding:13px 15px;font-family:"DM Mono",monospace;font-size:11px;color:var(--silver-dim);display:flex;align-items:center;gap:9px} #dt-ingest .mfield .ph{color:var(--silver-dim)} #dt-ingest .dropzone{margin-top:14px;border:1px dashed var(--gold-dim);border-radius:10px;padding:18px;text-align:center;color:var(--silver);font-size:12px;background:rgba(201,168,76,.03)} #dt-ingest .dropzone .dz{font-size:20px;color:var(--gold);margin-bottom:6px} /* AGENT DOES THE REST flow */ #dt-ingest .flow{border:1px solid var(--gold-dim);border-radius:16px;padding:22px;background:linear-gradient(135deg,rgba(201,168,76,.07),transparent)} #dt-ingest .flow .fh{display:flex;align-items:center;gap:11px;margin-bottom:16px} #dt-ingest .flow .fi{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.08)} #dt-ingest .flow .ft{font-family:"Cinzel",serif;font-size:17px;color:#fff} #dt-ingest .fsteps{display:flex;align-items:stretch;gap:11px;flex-wrap:wrap} #dt-ingest .fstep{flex:1;min-width:130px;border:1px solid var(--line);border-radius:12px;padding:15px;background:rgba(8,13,26,.4)} #dt-ingest .fstep .fn{font-family:"DM Mono",monospace;font-size:9px;color:var(--gold);border:1px solid var(--gold-dim);border-radius:6px;padding:2px 7px;display:inline-block;margin-bottom:9px} #dt-ingest .fstep .fst{font-size:13px;color:#fff;font-weight:500} #dt-ingest .fstep .fsd{font-size:12px;color:var(--silver);margin-top:5px;line-height:1.45} #dt-ingest .fnote{text-align:center;font-size:13px;color:var(--silver);margin-top:16px;line-height:1.55} #dt-ingest .fnote b{color:var(--gold)} /* sources strip */ #dt-ingest .sources{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} #dt-ingest .src{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.04em;color:var(--silver);text-transform:uppercase;border:1px solid var(--line);background:rgba(15,22,38,.5);padding:7px 12px;border-radius:8px} #dt-ingest .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-ingest .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-ingest .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-ingest .icard .d{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.45} @media (max-width:680px){ #dt-ingest .methods{grid-template-columns:1fr} #dt-ingest .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * WALKABLE STOREFRONT surface (/business/storefront) — Business-tab surface, id 'storefront'. * DISPLAY-ONLY static CONCEPT page ("coming soon"): describes a future navigable-3D build. The * before→after visual is PURE CSS (no images/canvas/WebGL); nothing wired. Look ported from * walkable-storefront.html, EVERY selector scoped under #dt-storefront. :root tokens scoped onto * the root; html/body NOT ported. Shared .sec-lbl/.pills/.pill scoped here too. Fills #panel as a * scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-storefront{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#B8C4CC; --silver-dim:#8a96a0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.1), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.07), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-storefront *{box-sizing:border-box} #dt-storefront .wrap{max-width:900px;margin:0 auto;padding:34px 26px 60px} #dt-storefront .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-storefront .back:hover{color:var(--gold)} #dt-storefront .head{display:flex;align-items:flex-start;gap:16px} #dt-storefront .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:21px;line-height:1} #dt-storefront .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-storefront .htext .sub{font-size:14px;color:var(--silver);margin-top:7px;max-width:560px;line-height:1.5} #dt-storefront .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-storefront .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-storefront .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-storefront .pill.tier{color:var(--silver)} /* HERO conversion pitch */ #dt-storefront .hero{margin:24px 0 16px;padding:28px 26px;border:1px solid var(--gold-dim);border-radius:18px;background:linear-gradient(135deg,rgba(201,168,76,.11),rgba(0,184,169,.04))} #dt-storefront .hero .eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:12px} #dt-storefront .hero h2{font-family:"Cinzel",serif;font-size:25px;color:#fff;margin:0 0 13px;line-height:1.25} #dt-storefront .hero h2 b{color:var(--gold)} #dt-storefront .hero p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink);opacity:.95;max-width:680px} #dt-storefront .hero p b{color:var(--gold);font-weight:600} /* visual concept strip: flat grid -> walkable space (PURE CSS) */ #dt-storefront .transform{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap} #dt-storefront .tcard{flex:1;min-width:200px;border:1px solid var(--line);border-radius:13px;padding:15px;background:rgba(8,13,26,.4)} #dt-storefront .tcard .tl{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:11px} #dt-storefront .tcard.before .tl{color:var(--silver-dim)} #dt-storefront .tcard.after .tl{color:var(--gold)} #dt-storefront .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px} #dt-storefront .thumbs span{aspect-ratio:1;border-radius:4px;background:rgba(168,181,189,.16)} #dt-storefront .room{position:relative;height:96px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#0c1820,#0a1310)} #dt-storefront .room .fl{position:absolute;left:50%;bottom:-10%;width:150%;height:62%;transform:translateX(-50%) rotateX(60deg);transform-origin:bottom;background:repeating-linear-gradient(90deg, rgba(0,184,169,.16) 0 1px, transparent 1px 22px),repeating-linear-gradient(0deg, rgba(0,184,169,.16) 0 1px, transparent 1px 22px)} #dt-storefront .room .disp{position:absolute;border-radius:3px;background:rgba(201,168,76,.5);box-shadow:0 0 10px rgba(201,168,76,.4)} #dt-storefront .room .av{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:9px;height:26px;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#cdd6dc,#7f8b95)} #dt-storefront .arrowx{flex:none;font-size:20px;color:var(--gold);opacity:.8} #dt-storefront .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px} /* CONVERSION SOURCES */ #dt-storefront .sources{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px} #dt-storefront .source{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(15,22,38,.5)} #dt-storefront .source .si{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px;color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-storefront .source .stt{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-storefront .source .sd{font-size:12.5px;color:var(--silver);margin-top:5px;line-height:1.5} #dt-storefront .source .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px} #dt-storefront .source .chip{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.04em;color:var(--silver);text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:4px 7px} #dt-storefront .source.cat{border-color:var(--gold-dim)} #dt-storefront .source.cat .si{color:var(--gold);background:rgba(201,168,76,.1);border-color:var(--gold-dim)} #dt-storefront .source.cat .stt .badge{font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.1em;color:var(--gold);border:1px solid var(--gold-dim);border-radius:999px;padding:2px 6px;margin-left:6px;vertical-align:middle} /* STEP FLOW */ #dt-storefront .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(15,22,38,.4)} #dt-storefront .step{padding:20px 17px;border-right:1px solid var(--line);position:relative} #dt-storefront .step:last-child{border-right:none} #dt-storefront .step .sn{font-family:"DM Mono",monospace;font-size:9px;color:var(--gold);border:1px solid var(--gold-dim);border-radius:6px;padding:2px 7px;display:inline-block;margin-bottom:11px} #dt-storefront .step .stt{font-family:"Cinzel",serif;font-size:15px;color:#fff;line-height:1.2} #dt-storefront .step .sd{font-size:12px;color:var(--silver);margin-top:6px;line-height:1.5} #dt-storefront .step .si{font-size:17px;color:var(--teal-bright);margin-bottom:9px;display:block} /* FEATURE TILES */ #dt-storefront .feats{display:grid;grid-template-columns:1fr 1fr;gap:13px} #dt-storefront .feat{border:1px solid var(--line);border-radius:13px;padding:16px;background:rgba(15,22,38,.5);display:flex;gap:13px;align-items:flex-start} #dt-storefront .feat .fi{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--gold);background:rgba(201,168,76,.08);border:1px solid var(--gold-dim)} #dt-storefront .feat .ft{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-storefront .feat .fd{font-size:12.5px;color:var(--silver);margin-top:4px;line-height:1.5} #dt-storefront .feat.teal .fi{color:var(--teal-bright);background:rgba(0,184,169,.08);border-color:var(--teal-dim)} #dt-storefront .note{margin-top:20px;font-size:11.5px;color:var(--silver-dim);line-height:1.55;text-align:center;font-style:italic} @media (max-width:760px){ #dt-storefront .flow{grid-template-columns:1fr 1fr} #dt-storefront .step{border-bottom:1px solid var(--line)} #dt-storefront .step:nth-child(2){border-right:none} } @media (max-width:680px){ #dt-storefront .sources{grid-template-columns:1fr} #dt-storefront .feats{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * BUSINESS BRAIN VAULT surface (/business/brain) — Business-tab surface, id 'brain'. * DISPLAY-ONLY static CONCEPT page ("coming soon"): describes a future brain/vault architecture. * The sealed-vault diagram is pure CSS + inline SVG (no images/canvas/WebGL); nothing wired. Look * ported from business-brain.html, EVERY selector scoped under #dt-brain. :root tokens scoped onto * the root; html/body NOT ported. Shared .sec-lbl/.pills/.pill/.inside/.icard scoped here too. * (The three former inline styles — two sec-lbl margins + a gold word — are now .loop-lbl/ * .does-lbl/.goldword classes; copy text unchanged.) Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-brain{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#C5D0D8; --silver-dim:#aab6c0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.1), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.07), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-brain *{box-sizing:border-box} #dt-brain .wrap{max-width:900px;margin:0 auto;padding:34px 26px 60px} #dt-brain .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-brain .back:hover{color:var(--gold)} #dt-brain .head{display:flex;align-items:flex-start;gap:16px} #dt-brain .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:21px;line-height:1} #dt-brain .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-brain .htext .sub{font-size:14.5px;color:var(--silver);margin-top:7px;max-width:560px;line-height:1.5} #dt-brain .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-brain .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-brain .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-brain .pill.tier{color:var(--silver)} /* HERO trust line */ #dt-brain .hero{margin:24px 0 18px;padding:26px;border:1px solid var(--gold-dim);border-radius:18px;background:linear-gradient(135deg,rgba(201,168,76,.11),rgba(0,184,169,.04))} #dt-brain .hero .eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:12px} #dt-brain .hero h2{font-family:"Cinzel",serif;font-size:25px;color:#fff;margin:0 0 13px;line-height:1.28} #dt-brain .hero h2 b{color:var(--gold)} #dt-brain .hero p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink);max-width:680px} #dt-brain .hero p b{color:var(--gold);font-weight:600} #dt-brain .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:30px 0 14px} #dt-brain .sec-lbl.loop-lbl, #dt-brain .sec-lbl.does-lbl{margin-top:30px} #dt-brain .sec-lbl .goldword{color:var(--gold)} /* SEALED-VAULT-CORE DIAGRAM */ #dt-brain .diagram{border:1px solid var(--line);border-radius:18px;padding:30px 24px;background:radial-gradient(70% 90% at 50% 45%, rgba(0,184,169,.06), transparent 70%),rgba(10,16,26,.6);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px} #dt-brain .feedcol{display:flex;flex-direction:column;gap:10px} #dt-brain .feed{display:flex;align-items:center;gap:10px;justify-content:flex-end;text-align:right} #dt-brain .feed .fl{font-size:14px;color:var(--ink)} #dt-brain .feed .fi{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--line);background:rgba(15,22,38,.7);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--silver)} #dt-brain .feedcol .feedhdr{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;text-align:right;margin-bottom:4px} #dt-brain .corewrap{position:relative;width:170px;height:200px;display:flex;align-items:center;justify-content:center} #dt-brain .corewrap svg{position:absolute;inset:0} #dt-brain .core{position:relative;width:128px;height:128px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%, rgba(201,168,76,.22), rgba(8,13,26,.9) 72%);border:1.5px solid var(--gold-dim);box-shadow:0 0 40px rgba(201,168,76,.22), inset 0 0 30px rgba(0,0,0,.5);z-index:3} #dt-brain .core .glyph{font-size:30px;color:var(--gold);line-height:1} #dt-brain .core .clabel{font-family:"Cinzel",serif;font-size:13.5px;color:#fff;margin-top:8px;text-align:center;letter-spacing:.02em} #dt-brain .core .clock{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--teal-bright);text-transform:uppercase;margin-top:6px;display:flex;align-items:center;gap:4px} #dt-brain .ring{position:absolute;border:1px solid rgba(201,168,76,.25);border-radius:50%} #dt-brain .ring.r1{inset:6px} #dt-brain .ring.r2{inset:-10px;border-color:rgba(0,184,169,.16)} #dt-brain .projcol{display:flex;flex-direction:column;gap:9px} #dt-brain .projcol .projhdr{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--silver);text-transform:uppercase;margin-bottom:4px} #dt-brain .tool{display:flex;align-items:center;gap:10px} #dt-brain .tool .ti{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--teal-dim);background:rgba(0,184,169,.07);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--teal-bright)} #dt-brain .tool .tl{font-size:14px;color:var(--ink)} #dt-brain .diagram-cap{grid-column:1/-1;text-align:center;margin-top:14px;font-size:13.5px;color:var(--ink);line-height:1.55} #dt-brain .diagram-cap b{color:var(--gold)} #dt-brain .diagram-cap .em{color:var(--teal-bright)} /* OWNERSHIP COMMITMENTS */ #dt-brain .own{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} #dt-brain .ocard{border:1px solid var(--line);border-radius:13px;padding:17px 15px;background:rgba(15,22,38,.5);text-align:center} #dt-brain .ocard .oi{font-size:18px;color:var(--gold);margin-bottom:9px} #dt-brain .ocard.teal .oi{color:var(--teal-bright)} #dt-brain .ocard .ot{font-family:"Cinzel",serif;font-size:15px;color:#fff} #dt-brain .ocard .od{font-size:13px;color:var(--ink);margin-top:6px;line-height:1.5} /* governing line */ #dt-brain .govern{margin-top:22px;padding:20px 24px;border:1px solid var(--teal-dim);border-radius:14px;background:rgba(0,184,169,.05);text-align:center} #dt-brain .govern .g1{font-family:"Cinzel",serif;font-size:18px;color:#fff;line-height:1.45} #dt-brain .govern .g1 .a{color:var(--silver)} #dt-brain .govern .g1 .b{color:var(--gold)} /* LEARNING LOOP */ #dt-brain .loopbox{border:1px solid var(--gold-dim);border-radius:16px;padding:24px;background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(0,184,169,.03))} #dt-brain .loopintro{font-size:15px;line-height:1.6;color:var(--ink);max-width:700px;margin:0 auto 20px;text-align:center} #dt-brain .loopintro b{color:var(--gold);font-weight:600} #dt-brain .loopring{display:flex;align-items:stretch;justify-content:center;gap:12px;flex-wrap:wrap} #dt-brain .lstep{flex:1;min-width:170px;border:1px solid var(--line);border-radius:13px;padding:17px;background:rgba(8,13,26,.45)} #dt-brain .lstep .ln{width:26px;height:26px;border-radius:50%;background:rgba(201,168,76,.14);border:1px solid var(--gold-dim);color:var(--gold);font-family:"DM Mono",monospace;font-size:12px;display:flex;align-items:center;justify-content:center;margin-bottom:11px} #dt-brain .lstep .lt{font-family:"Cinzel",serif;font-size:15px;color:#fff;line-height:1.2} #dt-brain .lstep .ld{font-size:13px;color:var(--ink);margin-top:6px;line-height:1.5} #dt-brain .larrow{display:flex;align-items:center;font-size:20px;color:var(--gold)} #dt-brain .larrow.loop{color:var(--teal-bright)} #dt-brain .loopcap{text-align:center;margin-top:18px;font-size:14px;color:var(--ink);line-height:1.5} #dt-brain .loopcap .em{color:var(--teal-bright);font-weight:600} #dt-brain .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-brain .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-brain .icard .t{font-family:"Cinzel",serif;font-size:15.5px;color:#fff} #dt-brain .icard .d{font-size:13.5px;color:var(--ink);margin-top:6px;line-height:1.5} #dt-brain .note{margin-top:20px;font-size:13px;color:var(--silver);line-height:1.6;text-align:center;font-style:italic} @media (max-width:720px){ #dt-brain .diagram{grid-template-columns:1fr;gap:24px;justify-items:center} #dt-brain .feed{justify-content:flex-start;text-align:left} #dt-brain .feedcol .feedhdr,#dt-brain .projcol .projhdr{text-align:center} #dt-brain .larrow{transform:rotate(90deg)} #dt-brain .loopring{flex-direction:column;align-items:center} #dt-brain .lstep{width:100%} } @media (max-width:680px){ #dt-brain .own{grid-template-columns:1fr 1fr} #dt-brain .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * WEARABLE DESIGNER surface (/make/wearable) — the FIRST Make/Creator-tab surface, id 'wearable'. * DISPLAY-ONLY static CONCEPT page ("coming soon"): describes a future build. Pure CSS/markup; * dropzones inert. Look ported from wearable-designer.html, EVERY selector scoped under * #dt-wearable. :root tokens scoped onto the root; html/body NOT ported. Shared .howbox/.sec-lbl/ * .pills/.pill/.inside/.icard scoped here too. (The one former inline sec-lbl margin is now * .inside-lbl; copy text unchanged.) Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-wearable{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#C5D0D8; --silver-dim:#aab6c0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.1), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.07), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-wearable *{box-sizing:border-box} #dt-wearable .wrap{max-width:920px;margin:0 auto;padding:34px 26px 60px} #dt-wearable .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:18px;text-decoration:none} #dt-wearable .back:hover{color:var(--gold)} #dt-wearable .head{display:flex;align-items:flex-start;gap:16px} #dt-wearable .seal{width:38px;height:38px;flex:none;margin-top:6px;color:var(--gold);font-size:21px;line-height:1} #dt-wearable .htext .h1{font-family:"Cinzel",serif;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.1} #dt-wearable .htext .sub{font-size:14.5px;color:var(--silver);margin-top:7px;max-width:560px;line-height:1.5} #dt-wearable .pills{display:flex;gap:10px;align-items:center;margin:14px 0 0 54px} #dt-wearable .pill{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px} #dt-wearable .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} #dt-wearable .pill.tier{color:var(--silver)} #dt-wearable .howbox{margin:22px 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(15,22,38,.5)} #dt-wearable .howbox .lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:9px} #dt-wearable .howbox p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)} #dt-wearable .howbox b{color:var(--gold);font-weight:600} #dt-wearable .sec-lbl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin:28px 0 14px;display:flex;align-items:center;gap:10px} #dt-wearable .sec-lbl.inside-lbl{margin-top:30px} #dt-wearable .sec-lbl .tag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);padding:2px 8px;border-radius:999px} /* TWO ENTRY PATHS */ #dt-wearable .paths{display:grid;grid-template-columns:1fr 1fr;gap:14px} #dt-wearable .path{border:1px solid var(--line);border-radius:16px;padding:20px;background:rgba(15,22,38,.5)} #dt-wearable .path .pi{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:13px} #dt-wearable .path.design{border-color:var(--gold-dim)} #dt-wearable .path.design .pi{color:var(--gold);background:rgba(201,168,76,.1);border:1px solid var(--gold-dim)} #dt-wearable .path.drop{border-color:var(--teal-dim)} #dt-wearable .path.drop .pi{color:var(--teal-bright);background:rgba(0,184,169,.08);border:1px solid var(--teal-dim)} #dt-wearable .path .pt{font-family:"Cinzel",serif;font-size:18px;color:#fff} #dt-wearable .path .pd{font-size:13.5px;color:var(--ink);margin-top:7px;line-height:1.55} #dt-wearable .path .pd b{color:var(--gold)} #dt-wearable .dropz{margin-top:14px;border:1.5px dashed var(--gold-dim);border-radius:11px;padding:18px;text-align:center;color:var(--silver);font-size:13px;background:rgba(201,168,76,.03)} #dt-wearable .dropz .dzi{font-size:20px;color:var(--gold);margin-bottom:6px} #dt-wearable .designz{margin-top:14px;border:1px solid var(--line);border-radius:11px;padding:18px;text-align:center;color:var(--silver);font-size:13px;background:rgba(8,13,26,.4)} #dt-wearable .designz .dzi{font-size:20px;color:var(--teal-bright);margin-bottom:6px} /* CONVERT → LINK DESTINATIONS */ #dt-wearable .convert{border:1px solid var(--teal-dim);border-radius:16px;padding:22px;background:rgba(0,184,169,.05)} #dt-wearable .convert .ch{display:flex;align-items:center;gap:11px;margin-bottom:8px} #dt-wearable .convert .ci{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--teal-bright);border:1px solid var(--teal-dim);background:rgba(0,184,169,.08)} #dt-wearable .convert .ct{font-family:"Cinzel",serif;font-size:17px;color:#fff} #dt-wearable .convert .cd{font-size:14px;color:var(--ink);line-height:1.6;margin-bottom:16px} #dt-wearable .convert .cd b{color:var(--gold)} #dt-wearable .dests{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} #dt-wearable .dest{border:1px solid var(--line);border-radius:12px;padding:16px;background:rgba(8,13,26,.45)} #dt-wearable .dest .di{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:10px;color:var(--gold);background:rgba(201,168,76,.08);border:1px solid var(--gold-dim)} #dt-wearable .dest .dt{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-wearable .dest .dd{font-size:12.5px;color:var(--ink);margin-top:5px;line-height:1.5} /* LIFECYCLE: wear → trade → sell */ #dt-wearable .life{display:flex;align-items:stretch;gap:11px;flex-wrap:wrap} #dt-wearable .lcard{flex:1;min-width:150px;border:1px solid var(--line);border-radius:13px;padding:17px;background:rgba(15,22,38,.5)} #dt-wearable .lcard .li{font-size:18px;margin-bottom:9px} #dt-wearable .lcard.wear .li{color:var(--teal-bright)} #dt-wearable .lcard.trade .li{color:var(--gold)} #dt-wearable .lcard.sell .li{color:var(--gold)} #dt-wearable .lcard .lt{font-family:"Cinzel",serif;font-size:15.5px;color:#fff} #dt-wearable .lcard .ld{font-size:13px;color:var(--ink);margin-top:6px;line-height:1.5} #dt-wearable .lcard.feat{border-color:var(--gold-dim);background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(0,184,169,.02))} /* player economy highlight */ #dt-wearable .econ{margin-top:14px;border:1px solid var(--gold-dim);border-radius:14px;padding:20px 22px;background:linear-gradient(135deg,rgba(201,168,76,.09),rgba(0,184,169,.03))} #dt-wearable .econ .et{font-family:"Cinzel",serif;font-size:17px;color:#fff;margin-bottom:8px} #dt-wearable .econ .ed{font-size:14px;color:var(--ink);line-height:1.6} #dt-wearable .econ .ed b{color:var(--gold)} #dt-wearable .econ .chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px} #dt-wearable .echip{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:8px 13px;border-radius:8px;border:1px solid var(--line);color:var(--ink);background:rgba(8,13,26,.4);display:flex;align-items:center;gap:7px} #dt-wearable .echip .ed2{width:8px;height:8px;border-radius:50%;background:var(--gold)} #dt-wearable .echip .ed2.t{background:var(--teal-bright)} /* shoppable-avatar tie-in */ #dt-wearable .shop{margin-top:14px;border:1px dashed var(--gold-dim);border-radius:13px;padding:17px 19px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(201,168,76,.04)} #dt-wearable .shop .si{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);border:1px solid var(--gold-dim)} #dt-wearable .shop .st{flex:1;min-width:240px;font-size:13.5px;color:var(--ink);line-height:1.55} #dt-wearable .shop .st b{color:var(--gold)} #dt-wearable .inside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:30px} #dt-wearable .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-wearable .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-wearable .icard .d{font-size:12.5px;color:var(--ink);margin-top:5px;line-height:1.45} @media (max-width:680px){ #dt-wearable .paths{grid-template-columns:1fr} #dt-wearable .dests{grid-template-columns:1fr} #dt-wearable .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * SHOP surface (/shop) — a top-nav DTShell surface (NOT a toolset), id 'shop'. * DISPLAY-ONLY static mockup (My Shop + Marketplace, sample listings). Look ported from shop-tab.html, * EVERY selector scoped under #dt-shop. :root tokens scoped onto the root; html/body NOT ported. The * switcher/view classes are renamed shop-unique (.shopswitch/.sst/.shview) so they do NOT inherit the * global .toggle (the live Me/Sell/Make tab bar in concierge.html). Shared .inside/.icard scoped here * too. Marketplace items filter by data-kind via /js/shop-surface.js. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-shop{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#C5D0D8; --silver-dim:#aab6c0; --ink:#EEF2F4; --violet:#9a7fd8; --violet-dim:#6a55a0; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.06), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-shop *{box-sizing:border-box} #dt-shop .wrap{max-width:960px;margin:0 auto;padding:30px 26px 60px} #dt-shop .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:16px;text-decoration:none} #dt-shop .back:hover{color:var(--gold)} #dt-shop .toolset-lbl{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.22em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:8px} #dt-shop .h1{font-family:"Cinzel",serif;font-size:32px;font-weight:700;letter-spacing:.02em;color:var(--gold);line-height:1;margin:0} #dt-shop .intro{font-size:14.5px;color:var(--silver);margin-top:10px;max-width:580px;line-height:1.5} /* Coming-soon pill — honest "preview" framing for the Shop surface (sample listings, not wired to the live marketplace yet). Mirrors the canonical #dt-calendar .pill.soon. */ #dt-shop .pill{display:inline-block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-top:12px} #dt-shop .pill.soon{color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06)} /* MY SHOP / MARKETPLACE SWITCHER (shop-unique names — NOT the global .toggle tab bar) */ #dt-shop .shopswitch{display:inline-flex;margin:22px 0 24px;border:1px solid var(--line);border-radius:12px;padding:4px;background:rgba(8,13,26,.5)} #dt-shop .sst{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;border-radius:9px;cursor:pointer;color:var(--silver);transition:all .15s;border:1px solid transparent} #dt-shop .sst.on{color:var(--gold);background:rgba(201,168,76,.1);border-color:var(--gold-dim)} #dt-shop .shview{display:none} #dt-shop .shview.on{display:block} /* MY SHOP — brand header */ #dt-shop .shopbrand{position:relative;border:1px solid var(--gold-dim);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(0,184,169,.03))} #dt-shop .shopbrand .banner{height:96px;background:linear-gradient(120deg, rgba(36,49,73,.6), rgba(11,17,30,.85));position:relative} #dt-shop .shopbrand .banner::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 25% 20%, rgba(201,168,76,.18), transparent 60%)} #dt-shop .shopbrand .bbody{padding:0 22px 20px;display:flex;align-items:flex-end;gap:16px;margin-top:-34px;position:relative} #dt-shop .shopbrand .logo{width:72px;height:72px;border-radius:16px;flex:none;background:radial-gradient(circle at 38% 30%, #2a3a5a, #0b1325);border:2px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--gold)} #dt-shop .shopbrand .bmeta{flex:1;padding-bottom:4px} #dt-shop .shopbrand .sn{font-family:"Cinzel",serif;font-size:23px;color:#fff;line-height:1.1} #dt-shop .shopbrand .stags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} #dt-shop .stag{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--silver);border:1px solid var(--line);border-radius:7px;padding:4px 9px;display:flex;align-items:center;gap:5px} #dt-shop .stag .v{color:var(--teal-bright)} #dt-shop .stag .g{color:var(--gold)} #dt-shop .stag.rating{color:var(--gold);border-color:var(--gold-dim)} #dt-shop .shopbar{display:flex;gap:18px;flex-wrap:wrap;margin:16px 2px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #dt-shop .sbit{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)} #dt-shop .sbit .si{color:var(--teal-bright);font-size:14px} #dt-shop .sbit b{color:var(--gold)} #dt-shop .gridhdr{display:flex;align-items:center;justify-content:space-between;margin:24px 0 13px} #dt-shop .gridhdr .gl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase} #dt-shop .filters{display:flex;gap:7px} #dt-shop .filt{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:7px;border:1px solid var(--line);color:var(--silver);cursor:pointer} #dt-shop .filt.on{border-color:var(--gold-dim);color:var(--gold);background:rgba(201,168,76,.07)} /* item grid (shared between My Shop + Marketplace) */ #dt-shop .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px} #dt-shop .item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(15,22,38,.55);transition:border-color .15s} #dt-shop .item:hover{border-color:var(--gold-dim)} #dt-shop .item .pic{height:104px;position:relative;background:linear-gradient(135deg, rgba(36,49,73,.5), rgba(11,17,30,.8));border-bottom:1px solid var(--line)} #dt-shop .item .pic::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border:1.5px solid rgba(170,182,192,.28);border-radius:6px} #dt-shop .item .pic.svc::after{border-radius:50%} #dt-shop .item .pic.dig::after{border-radius:3px;transform:translate(-50%,-50%) rotate(45deg)} #dt-shop .item .badge{position:absolute;top:8px;left:8px;font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:5px} #dt-shop .badge.prod{background:rgba(201,168,76,.16);color:var(--gold);border:1px solid var(--gold-dim)} #dt-shop .badge.svc{background:rgba(0,184,169,.14);color:var(--teal-bright);border:1px solid var(--teal-dim)} #dt-shop .badge.digital{background:rgba(154,127,216,.16);color:var(--violet);border:1px solid var(--violet-dim)} #dt-shop .item .ib{padding:11px 12px} #dt-shop .item .inm{font-size:13px;color:#fff;line-height:1.3;font-weight:500} #dt-shop .item .irow{display:flex;justify-content:space-between;align-items:center;margin-top:8px} #dt-shop .item .imeta{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.05em;color:var(--silver);text-transform:uppercase} #dt-shop .item .iprice{font-family:"DM Mono",monospace;font-size:13px;color:var(--gold)} /* MARKETPLACE — search + location + sub-tabs */ #dt-shop .searchbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap} #dt-shop .search{flex:1;min-width:240px;border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:rgba(8,13,26,.5);font-family:"DM Mono",monospace;font-size:12px;color:var(--silver);display:flex;align-items:center;gap:9px} #dt-shop .loc{border:1px solid var(--teal-dim);border-radius:11px;padding:13px 15px;background:rgba(0,184,169,.06);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--teal-bright);text-transform:uppercase;display:flex;align-items:center;gap:7px;white-space:nowrap} #dt-shop .cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} #dt-shop .cat{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;border-radius:9px;border:1px solid var(--line);color:var(--silver);cursor:pointer;transition:all .15s} #dt-shop .cat.on{border-color:var(--gold-dim);color:var(--gold);background:rgba(201,168,76,.08)} #dt-shop .cat.svc.on{color:var(--teal-bright);border-color:var(--teal-dim);background:rgba(0,184,169,.08)} #dt-shop .cat.dig.on{color:var(--violet);border-color:var(--violet-dim);background:rgba(154,127,216,.1)} #dt-shop .mitem .seller{display:flex;align-items:center;gap:6px;padding:9px 12px 0;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.04em;color:var(--silver);text-transform:uppercase} #dt-shop .mitem .seller .sd{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a3a5a,#0b1325);flex:none} #dt-shop .mitem .seller .chk{color:var(--teal-bright)} #dt-shop .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-shop .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-shop .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-shop .icard .d{font-size:12.5px;color:var(--ink);margin-top:5px;line-height:1.45} @media (max-width:760px){ #dt-shop .grid{grid-template-columns:repeat(2,1fr)} #dt-shop .inside{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────── * PLAY surface (/play) — a top-nav DTShell surface (NOT a toolset), id 'play'. * Re-homes the live arcade by containment: the Arcade sub-tab shows the 12-game grid with READ-ONLY * best scores (play-surface.js fetches GET /api/arcade/leaderboards). Look ported from play-tab.html, * EVERY selector scoped under #dt-play. :root tokens scoped onto the root; html/body NOT ported. The * Arcade/Digital-Leagues switcher classes are renamed play-unique (.playswitch/.pst/.plview) so they * do NOT inherit the global .toggle (the live Me/Sell/Make tab bar). The 12 screen gradients become 3 * shared classes (.s-gold/.s-blue/.s-teal). Shared .inside/.icard scoped here too. Cards are * links to /arcade/.html. Fills #panel as a scroll column. * ───────────────────────────────────────────────────────────────────────── */ #dt-play{ --cosmos:#080D1A; --cosmos-2:#0F1626; --cosmos-3:#141E33; --line:#243149; --gold:#C9A84C; --gold-dim:#8A7430; --teal:#00B8A9; --teal-bright:#3fe0d2; --teal-dim:#0d7068; --silver:#C5D0D8; --silver-dim:#aab6c0; --ink:#EEF2F4; flex:1; min-height:0; overflow-y:auto; color:var(--ink); font-family:"Exo 2",system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1100px 580px at 50% -8%, rgba(201,168,76,.09), transparent 60%), radial-gradient(900px 500px at 85% 100%, rgba(0,184,169,.07), transparent 60%), linear-gradient(180deg, var(--cosmos) 0%, #060914 100%); } #dt-play *{box-sizing:border-box} #dt-play .wrap{max-width:960px;margin:0 auto;padding:30px 26px 60px} #dt-play .back{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-bottom:16px;text-decoration:none} #dt-play .back:hover{color:var(--gold)} #dt-play .toolset-lbl{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.22em;color:var(--teal-bright);text-transform:uppercase;margin-bottom:8px} #dt-play .h1{font-family:"Cinzel",serif;font-size:32px;font-weight:700;letter-spacing:.02em;color:var(--gold);line-height:1;margin:0} #dt-play .intro{font-size:14.5px;color:var(--silver);margin-top:10px;max-width:580px;line-height:1.5} /* ARCADE / DIGITAL LEAGUES SWITCHER (play-unique — NOT the global .toggle tab bar) */ #dt-play .playswitch{display:inline-flex;margin:22px 0 24px;border:1px solid var(--line);border-radius:12px;padding:4px;background:rgba(8,13,26,.5)} #dt-play .pst{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;border-radius:9px;cursor:pointer;color:var(--silver);transition:all .15s;border:1px solid transparent;display:flex;align-items:center;gap:8px} #dt-play .pst.on{color:var(--gold);background:rgba(201,168,76,.1);border-color:var(--gold-dim)} #dt-play .pst .soonmark{font-size:8px;letter-spacing:.06em;color:var(--silver);border:1px solid var(--line);border-radius:999px;padding:2px 6px} #dt-play .plview{display:none} #dt-play .plview.on{display:block} /* ARCADE */ #dt-play .arcade-head{text-align:center;margin-bottom:22px} #dt-play .arcade-head .ah-t{font-family:"Cinzel",serif;font-size:22px;color:var(--gold);letter-spacing:.04em} #dt-play .arcade-head .ah-d{font-size:13px;color:var(--ink);margin-top:8px;line-height:1.55;max-width:560px;margin-left:auto;margin-right:auto} #dt-play .games{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} #dt-play .game{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:rgba(15,22,38,.55);transition:border-color .15s;cursor:pointer;text-decoration:none;display:block} #dt-play .game:hover{border-color:var(--gold-dim)} #dt-play .game .screen{height:84px;position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)} #dt-play .game .screen .seal{width:56px;height:56px} #dt-play .screen.s-gold{background:linear-gradient(135deg,#3b2f0d,#0a1310)} #dt-play .screen.s-blue{background:linear-gradient(135deg,#16294d,#0a1310)} #dt-play .screen.s-teal{background:linear-gradient(135deg,#0d3b38,#0a1310)} #dt-play .game .gb{padding:12px 13px} #dt-play .game .gn{font-family:"Cinzel",serif;font-size:14.5px;color:#fff;line-height:1.2} #dt-play .game .lead{display:flex;align-items:center;margin-top:10px;padding-top:9px;border-top:1px solid rgba(36,49,73,.6)} #dt-play .game .lead .lv{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--gold);text-transform:uppercase} /* DIGITAL LEAGUES (coming soon) */ #dt-play .leagues-soon{border:1px solid var(--line);border-radius:18px;padding:48px 30px;text-align:center;background:radial-gradient(70% 90% at 50% 30%, rgba(201,168,76,.06), transparent 70%),rgba(10,16,26,.5)} #dt-play .leagues-soon .lsi{font-size:42px;color:var(--gold);margin-bottom:16px} #dt-play .leagues-soon .lst{font-family:"Cinzel",serif;font-size:24px;color:#fff;margin-bottom:10px} #dt-play .leagues-soon .lspill{display:inline-block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);background:rgba(201,168,76,.06);border-radius:999px;padding:6px 16px;margin-bottom:18px} #dt-play .leagues-soon .lsd{font-size:14.5px;color:var(--ink);line-height:1.65;max-width:520px;margin:0 auto} #dt-play .leagues-soon .lsd b{color:var(--gold)} #dt-play .inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #dt-play .icard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(15,22,38,.45)} #dt-play .icard .t{font-family:"Cinzel",serif;font-size:14.5px;color:#fff} #dt-play .icard .d{font-size:12.5px;color:var(--ink);margin-top:5px;line-height:1.45} @media (max-width:760px){ #dt-play .games{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ #dt-play .inside{grid-template-columns:1fr} } @media (max-width:480px){ #dt-play .games{grid-template-columns:1fr} }