/* DJYTL Capital — interface system v3 (tokens, shell, components). Loaded on every page. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap'); :root{ color-scheme:dark; /* surfaces: green-black "vault" */ --bg:#090d0b; --bg-1:#0d1310; --bg-2:#111915; --bg-3:#16201b; --line:#1e2a24; --line-2:#29372f; --line-gold:rgba(214,178,74,.38); /* text */ --tx:#e9ede9; --tx-2:#b3bdb6; --tx-3:#8b978f; /* identity */ --gold:#d6b24a; --gold-hi:#ecca63; --gold-lo:#9c7f2c; --gold-tint:rgba(214,178,74,.10); --brand-green:#2f9e4a; --green-tint:rgba(47,158,74,.12); /* market */ --up:#3cc48c; --down:#f0646a; --warn:#e3a33b; --up-tint:rgba(60,196,140,.12); --down-tint:rgba(240,100,106,.12); /* type */ --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --serif:"Fraunces",Georgia,serif; --r:6px; --r-lg:10px; --hdr-h:60px; --ticker-h:34px; --wrap:1320px; /* aliases consumed by page-level styles (legacy names) */ --bg2:var(--bg-1); --panel:var(--bg-2); --panel2:var(--bg-3); --panel-high:var(--bg-3); --bg-raised:var(--bg-1); --line-soft:#18221d; --txt:var(--tx); --txt2:var(--tx-2); --txt3:var(--tx-3); --txt-2:var(--tx-2); --txt-3:var(--tx-3); --gold-b:var(--gold-hi); --gold-bright:var(--gold-hi); --pos:var(--up); --neg:var(--down); --green:var(--brand-green); --green-b:#3fb55c; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--tx);font:400 14px/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column} body>main{flex:1 0 auto} a{color:inherit;text-decoration:none} a.link,.prose a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} img{max-width:100%} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px} ::selection{background:rgba(214,178,74,.3);color:#fff} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:12px;top:-40px;z-index:200;background:var(--gold);color:#111;padding:8px 12px;border-radius:var(--r)} .skip:focus{top:8px} .wrap,.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px} .num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .muted{color:var(--tx-3)} .up,.pos{color:var(--up)} .down,.neg{color:var(--down)} .gold{color:var(--gold-hi)} .hidden{display:none!important} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:60;background:rgba(9,13,11,.92);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;gap:28px;height:var(--hdr-h);max-width:var(--wrap);margin:0 auto;padding:0 24px} .logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .logo img{width:28px;height:28px;object-fit:contain} .logo b{font-weight:700;font-size:15px;letter-spacing:-.01em} .logo b span{color:var(--gold-hi);font-weight:600} .nav{display:flex;align-items:center;gap:2px} .nav a{padding:7px 11px;border-radius:var(--r);color:var(--tx-2);font-weight:500;font-size:13.5px;white-space:nowrap} .nav a:hover{color:var(--tx);background:var(--bg-2)} .nav a[aria-current="page"]{color:var(--gold-hi)} .hdr-actions{margin-left:auto;display:flex;align-items:center;gap:8px} #account-slot:empty{display:none} /* account-state.js hook: set when signed in */ html[data-auth="user"] [data-auth="guest"]{display:none!important} html:not([data-auth="user"]) [data-auth="user"]{display:none!important} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line-2);background:transparent;color:var(--tx);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s} .btn:hover{border-color:var(--tx-3);background:var(--bg-2)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn-primary{background:var(--gold);border-color:var(--gold);color:#16130a} .btn-primary:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:#16130a} .btn-quiet{border-color:transparent;color:var(--tx-2)} .btn-quiet:hover{color:var(--tx);background:var(--bg-2);border-color:transparent} .btn-lg{min-height:44px;padding:0 20px;font-size:14px} .btn-block{width:100%} .btn-buy{background:var(--up);border-color:var(--up);color:#04140c} .btn-sell{background:var(--down);border-color:var(--down);color:#1a0506} .hydra-connect{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line-gold);color:var(--gold-hi);font-weight:600;font-size:13px;white-space:nowrap} .hydra-connect:hover{background:var(--gold-tint)} .hydra-connect img{width:16px;height:16px;object-fit:contain} .menu-toggle{display:none;width:38px;height:36px;border-radius:var(--r);border:1px solid var(--line-2);background:transparent;cursor:pointer;align-items:center;justify-content:center} .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:16px;height:1.5px;background:var(--tx);position:relative;content:""} .menu-toggle span::before{position:absolute;top:-5px}.menu-toggle span::after{position:absolute;top:5px} .drawer{display:none} @media (max-width:1180px){.nav a{padding:7px 8px}.hdr-in{gap:18px}} @media (max-width:1080px){ .nav{display:none}.menu-toggle{display:inline-flex} .drawer{position:fixed;inset:var(--hdr-h) 0 0 0;background:var(--bg);z-index:59;padding:12px 16px 32px;overflow-y:auto;border-top:1px solid var(--line)} .drawer.open{display:block} .drawer a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:16px;font-weight:500;color:var(--tx)} .drawer a[aria-current="page"]{color:var(--gold-hi)} .drawer .drawer-auth{display:flex;gap:10px;margin-top:18px} .drawer .drawer-auth .btn{flex:1;min-height:44px} .drawer h2{margin:22px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);font-weight:600} } @media (max-width:620px){ .hdr-in{padding:0 16px;gap:10px} .hdr-actions .auth-login{display:none} .hydra-connect span{display:none} .hydra-connect{padding:0 10px} .logo b{font-size:14px} .wrap,.container{padding-inline:16px} } /* ---------- ticker ---------- */ .ticker{height:var(--ticker-h);border-bottom:1px solid var(--line);background:var(--bg-1);overflow:hidden;position:relative;contain:paint;max-width:100%} .ticker-track{display:flex;align-items:center;height:100%;width:max-content;animation:tick 70s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} .tk{display:inline-flex;align-items:center;gap:8px;padding:0 18px;height:100%;border-right:1px solid var(--line);font-size:12px;white-space:nowrap;color:var(--tx-2)} .tk img{width:16px;height:16px} .tk b{color:var(--tx);font-weight:600} .tk .num{color:var(--tx)} .tk-empty{padding:0 24px;color:var(--tx-3);font-size:12px;line-height:var(--ticker-h)} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.ticker{overflow-x:auto}} /* ---------- page scaffolding ---------- */ .page-head{padding-block:32px 20px} .page-head h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2} .page-head p{margin:6px 0 0;color:var(--tx-2);max-width:70ch} .page-head .crumbs{font-size:12px;color:var(--tx-3);margin-bottom:8px} .page-head .crumbs a:hover{color:var(--tx)} .section{padding-block:28px} .section-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px} .section-h h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em} .section-h a{color:var(--gold-hi);font-size:13px;font-weight:500} .panel,.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg)} .panel-pad{padding:20px} .panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--tx-2)} .notice{display:flex;gap:10px;padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);background:var(--bg-1);color:var(--tx-2);font-size:13px} .notice b{color:var(--tx)} .empty{padding:36px 16px;text-align:center;color:var(--tx-3)} /* tables */ .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)} table.tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{padding:10px 14px;text-align:left;font-size:11.5px;font-weight:500;color:var(--tx-3);border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg-1)} .tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap} .tbl tr:last-child td{border-bottom:0} .tbl .r{text-align:right} .tbl tbody tr.click{cursor:pointer} .tbl tbody tr:hover td{background:rgba(255,255,255,.018)} .asset{display:flex;align-items:center;gap:10px} .asset img{width:24px;height:24px;flex-shrink:0} .asset b{font-weight:600;color:var(--tx)} .asset small{display:block;color:var(--tx-3);font-size:11.5px} /* tags */ .tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:500;border:1px solid var(--line-2);color:var(--tx-2);white-space:nowrap} .tag-up{color:var(--up);border-color:rgba(60,196,140,.35);background:var(--up-tint)} .tag-down{color:var(--down);border-color:rgba(240,100,106,.35);background:var(--down-tint)} .tag-warn{color:var(--warn);border-color:rgba(227,163,59,.35);background:rgba(227,163,59,.1)} .tag-gold{color:var(--gold-hi);border-color:var(--line-gold);background:var(--gold-tint)} .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block} /* segmented + chips */ .tabs-bar{display:flex;gap:4px;flex-wrap:wrap} .tabs-bar a,.tabs-bar button,.fchip{padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--tx-2);font-size:12.5px;font-weight:500;cursor:pointer} .tabs-bar a[aria-current="page"],.tabs-bar .on,.fchip.active,.fchip[aria-pressed="true"]{background:var(--gold-tint);border-color:var(--line-gold);color:var(--gold-hi)} /* forms */ .field{display:block;margin-bottom:12px} .field>span,label.lbl{display:block;margin-bottom:5px;font-size:12px;font-weight:500;color:var(--tx-2)} .input,.field input,.field select,.field textarea{width:100%;min-height:40px;padding:8px 11px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font-size:14px} .input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)} .msg{margin-top:10px;padding:9px 11px;border-radius:var(--r);font-size:13px} .msg.ok{background:var(--up-tint);color:var(--up)} .msg.err{background:var(--down-tint);color:var(--down)} /* key-value */ .kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .kvs>div{background:var(--bg-1);padding:14px 16px} .kvs .k{font-size:12px;color:var(--tx-3)} .kvs .v{margin-top:4px;font-family:var(--mono);font-size:15px;color:var(--tx)} /* prose (legal/support) */ .prose{max-width:760px;color:var(--tx-2);font-size:15px;line-height:1.7} .prose h2{color:var(--tx);font-size:18px;margin:32px 0 8px;font-weight:600} .prose h3{color:var(--tx);font-size:15px;margin:22px 0 6px;font-weight:600} .prose ul{padding-left:20px} .prose li{margin:4px 0} .slot{background:rgba(227,163,59,.14);color:var(--warn);border:1px dashed rgba(227,163,59,.5);padding:0 5px;border-radius:4px;font-size:.92em} .draft-banner{margin:0 0 20px;padding:10px 14px;border-radius:var(--r);border:1px solid rgba(227,163,59,.4);background:rgba(227,163,59,.08);color:var(--warn);font-size:13px} /* ---------- footer ---------- */ .ftr{margin-top:64px;border-top:1px solid var(--line);background:var(--bg-1);color:var(--tx-3);font-size:13px} .ftr-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding:40px 24px 28px;max-width:var(--wrap);margin:0 auto} .ftr h2{margin:0 0 12px;font-size:12px;font-weight:600;color:var(--tx);letter-spacing:.02em} .ftr ul{list-style:none;margin:0;padding:0} .ftr li{margin:7px 0} .ftr a:hover{color:var(--tx)} .ftr-brand p{margin:10px 0 0;max-width:34ch;line-height:1.5} .ftr-legal{max-width:var(--wrap);margin:0 auto;padding:18px 24px 28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:12px;line-height:1.6} .ftr-legal p{margin:0;max-width:92ch} @media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}} @media (max-width:620px){.ftr-grid,.ftr-legal{padding-inline:16px}} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}