:root{font-family:'Clash Regular',sans-serif;color:#e8f0eb;background:#071b15;font-synthesis:none;text-rendering:optimizeLegibility;--bg:#071b15;--panel:#0d241c;--panel2:#102a20;--line:rgba(196,230,207,.1);--muted:#8ca398;--green:#80e5a4;--green2:#36c878;--mint:#c9f5d4;--cream:#f0edda;--gold:#e4cc7b;--font-head:'Clash Bold',sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 73% -15%,rgba(44,105,70,.18),transparent 52%),var(--bg)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.boot-screen{position:fixed;inset:0;z-index:20;background:#071b15;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s ease}.boot-screen.done{opacity:0;visibility:hidden}.boot-mark,.brand-mark{display:grid;place-content:center;width:52px;height:52px;border-radius:17px;background:linear-gradient(135deg,#95f0ae,#45c782);color:#0a2619;font:800 25px var(--font-head);letter-spacing:-4px;padding-right:4px;box-shadow:0 9px 30px #43bd7733}.boot-mark span,.brand-mark span{color:#f0f9e7}.boot-word{margin-top:14px;font:800 23px var(--font-head);letter-spacing:-1.5px}.boot-track{width:140px;height:3px;background:#1b3729;border-radius:4px;margin-top:27px;overflow:hidden}.boot-track i{display:block;height:100%;width:45%;background:#7ee4a2;border-radius:4px;animation:load 1s ease-in-out infinite alternate}@keyframes load{to{transform:translateX(120%)}}.boot-screen p{color:#789182;font-size:12px;margin:12px 0}.app-shell{min-height:100vh;display:grid;grid-template-columns:244px 1fr}.app-shell[hidden]{display:none}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:rgba(8,29,21,.85);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:27px 17px 18px;z-index:5}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#e6f1e9;font:800 18px var(--font-head);letter-spacing:-.9px;padding:0 9px}.brand-mark{width:34px;height:34px;border-radius:11px;font-size:16px;letter-spacing:-3px;box-shadow:none}.brand-dot{color:var(--green)}.workspace-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#617b6c;margin:43px 10px 13px}.side-nav{display:grid;gap:5px}.nav-link{height:42px;display:flex;align-items:center;gap:11px;padding:0 11px;border-radius:8px;color:#91a69a;text-decoration:none;font-size:12px;transition:.2s}.nav-link:hover,.nav-link.active{color:#d5f2dc;background:#132d20}.nav-link.active{box-shadow:inset 2px 0 0 var(--green)}.nav-icon{width:19px;font-size:17px;color:#8fe6aa;text-align:center}.nav-count{margin-left:auto;font-size:10px;border-radius:9px;padding:2px 7px;background:#1b3d2a;color:#9ddcad}.sidebar-bottom{margin-top:auto}.sidebar-note{position:relative;padding:16px 13px 14px;border:1px solid #294332;border-radius:10px;background:linear-gradient(145deg,#122c20,#10241b);overflow:hidden}.note-spark{color:var(--green);font-size:17px}.sidebar-note strong{display:block;font:600 11px var(--font-head);margin-top:12px;color:#d3e8d8}.sidebar-note p{color:#82998b;font-size:10px;margin:5px 0 0}.sidebar-footer{padding:19px 7px 0;font-size:10px;color:#768c7e}.status-dot,.stat-live{display:inline-block;width:6px;height:6px;border-radius:10px;background:#73d990;margin-right:6px;box-shadow:0 0 10px #5fdb83}.main-content{grid-column:2;min-width:0;padding:0 5.3%;max-width:1560px;width:100%;margin:0 auto}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.breadcrumb{font-size:11px;color:#789083}.breadcrumb span{margin:0 8px;color:#496353}.breadcrumb strong{color:#c5d8cb;font-weight:500}.top-actions{display:flex;align-items:center;gap:18px}.top-date{font-size:10px;color:#71887b}.account-button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#0d241c;color:#becfc3;border-radius:24px;padding:4px 10px 4px 5px;font-size:10px;cursor:pointer}.account-avatar{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#234a35;color:#a7efbb;font-size:11px}.chevron{color:#789182}.view{padding-top:37px;animation:appear .4s ease}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.view[hidden]{display:none}.welcome-row{position:relative;min-height:203px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.eyebrow,.card-kicker{font-size:9px;letter-spacing:1.45px;color:#8ea998;font-weight:700}.eyebrow{display:flex;align-items:center;gap:8px}.eyebrow-line{display:inline-block;width:15px;height:1px;background:var(--green)}h1,h2,h3,p{margin-top:0}.welcome-row h1,.inner-hero h1{font:700 clamp(36px,4vw,52px)/1.08 var(--font-head);letter-spacing:-2.8px;margin:14px 0 10px;color:#e6f1e8}.welcome-row h1 em,.inner-hero h1 em{font-style:normal;color:var(--green)}.lead{font-size:12px;color:#98aea0;margin:0;line-height:1.7}.welcome-orbit{width:207px;height:190px;position:relative;margin-right:7%;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #4c805b38;border-radius:50%;transform:rotate(-26deg)}.orbit-one{width:166px;height:100px}.orbit-two{width:120px;height:168px;transform:rotate(38deg)}.orbit-core{width:69px;height:69px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#d4f5c8,#75d991 68%,#3d9b64);color:#133d25;font-size:25px;box-shadow:0 0 45px #6ae5902c}.orbit-tag{position:absolute;right:0;bottom:20px;color:#80bd91;font-size:9px;letter-spacing:.8px;transform:rotate(-5deg)}.connect-card{min-height:231px;display:grid;grid-template-columns:200px 1fr;align-items:center;border:1px solid #254331;border-radius:13px;background:linear-gradient(115deg,#102b20,#0c2119 66%);overflow:hidden;position:relative}.connect-card:after{content:'';position:absolute;right:-49px;top:-145px;width:300px;height:300px;border-radius:50%;border:1px solid #9be8ad0d;box-shadow:0 0 0 35px #9be8ad07,0 0 0 70px #9be8ad04;pointer-events:none}.connect-art{height:100%;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse,#63cd8a18,transparent 70%)}.connect-play{width:60px;height:60px;border:1px solid #60cd866b;border-radius:21px;display:grid;place-items:center;background:#76db9816;color:#88e9a5;font-size:18px;transform:rotate(-8deg);box-shadow:0 0 38px #60cd8615}.spark{font-style:normal;position:absolute;color:#8fe5a4}.spark-a{top:57px;left:44px;font-size:13px}.spark-b{right:34px;bottom:57px;font-size:20px}.spark-c{right:54px;top:47px;font-size:25px}.connect-copy{padding:24px 30px 23px 0;position:relative;z-index:1}.connect-copy h2,.channel-heading h2,.empty-milestones h2{font:600 19px var(--font-head);letter-spacing:-.5px;margin:9px 0 7px;color:#e4f1e7}.connect-copy>p:not(.privacy-note){font-size:11px;line-height:1.75;color:#96ab9d;max-width:560px;margin:0 0 15px}.button{cursor:pointer;border:0;border-radius:7px;font:600 11px 'Clash Regular';display:inline-flex;align-items:center;gap:10px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-1px)}.button-primary{padding:11px 15px;background:var(--green);color:#0a2417;box-shadow:0 5px 17px #62dc8c24}.button-primary:hover{background:#a0efb3}.button-primary svg{width:15px;height:15px}.button-primary span{margin-left:12px;font-size:14px}.privacy-note{font-size:9px;color:#728b7c;margin:12px 0 0}.privacy-note span{color:#86d9a0;margin-right:4px}.channel-panel{border:1px solid var(--line);border-radius:12px;background:#0c221a;padding:20px 21px 18px}.channel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.channel-identity{display:flex;gap:12px;align-items:center}.channel-identity img{width:43px;height:43px;border-radius:50%;border:1px solid #365641;object-fit:cover}.channel-heading h2{font-size:16px;margin:4px 0}.channel-handle{font-size:10px;color:#799182}.button-soft{padding:9px 12px;border:1px solid #365340;background:#122b20;color:#c1d8c8}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-card{border:1px solid var(--line);border-radius:9px;padding:13px 14px 12px;background:#0b1e17}.stat-top{display:flex;justify-content:space-between;align-items:center;color:#92a99a;font-size:10px}.stat-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;font-size:12px;color:#91e4a8;background:#183625}.stat-card>strong{display:block;font:700 26px var(--font-head);letter-spacing:-1px;color:#e3eee5;margin:11px 0}.stat-foot{font-size:9px;color:#748b7c}.stat-live{width:5px;height:5px}.stat-label{float:right;color:#576f60}.stat-views .stat-icon{color:#decf8b;background:#352e19}.stat-milestones .stat-icon{color:#80d5a0;background:#173a26}.milestone-section{margin-top:39px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.section-heading h2{font:600 20px var(--font-head);letter-spacing:-.6px;margin:8px 0 5px}.section-heading p{font-size:10px;color:#859b8e;margin:0}.text-link{font-size:10px;color:#91dda5;text-decoration:none}.text-link span{margin-left:6px}.milestone-list{display:grid;gap:8px}.milestone-item{display:grid;grid-template-columns:37px 1fr auto;align-items:center;gap:12px;background:#0d241c;border:1px solid var(--line);border-radius:9px;padding:11px 14px}.milestone-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#1b5231;background:linear-gradient(140deg,#d2eea6,#70d791);font-size:14px}.milestone-info strong{display:block;font:600 11px var(--font-head);color:#dcece0}.milestone-info span{display:block;font-size:9px;color:#83998c;margin-top:4px}.milestone-date{font-size:9px;color:#728a7c}.empty-milestones{margin-top:35px;padding:23px;border:1px solid var(--line);border-radius:11px;background:#0c2119;display:flex;gap:16px;align-items:center}.empty-seal{width:51px;height:51px;border-radius:50%;background:#183c27;color:#87e1a0;display:grid;place-items:center;font-size:21px}.empty-milestones h2{font-size:16px;margin:6px 0}.empty-milestones p{font-size:10px;color:#8ea396;margin:0;max-width:550px}.ad-row{position:relative;display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center;margin-top:41px;padding:22px 20px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(110deg,#0d2119,#10261c)}.ad-label{position:absolute;right:12px;top:11px;font-size:8px;letter-spacing:1px;color:#647d6d}.banner-slot{min-height:125px;display:flex;justify-content:center;align-items:center}.slot-placeholder{width:160px;height:88px;border:1px dashed #33533d;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#718878;font-size:9px;position:relative}.slot-placeholder>span{color:#6d9879;border:1px solid #32533c;border-radius:3px;font-size:8px;padding:2px 5px}.slot-placeholder small{font-size:8px;color:#52705e}.native-slot{min-height:112px;border-left:1px solid var(--line);padding:5px 0 5px 22px;display:flex;justify-content:space-between;align-items:center;gap:10px}.native-copy h3{font:600 13px var(--font-head);margin:8px 0 4px}.native-copy p{font-size:9px;color:#809788;margin:0}.native-ad-container{font-size:8px;color:#718878;max-width:190px}.page-footer{display:flex;align-items:center;gap:18px;margin:29px 0 22px;padding-top:14px;border-top:1px solid var(--line);font-size:9px;color:#61786a}.footer-brand{font:800 13px var(--font-head);color:#b8d4c0;text-decoration:none}.footer-brand span{color:#81e5a1}.footer-links{margin-left:auto;display:flex;gap:15px}.footer-links a{color:#728a7c;text-decoration:none}.inner-hero{padding:16px 0 25px}.inner-hero h1{font-size:45px}.library-toolbar{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#799183;font-size:10px}.library-toolbar strong{color:#cfe2d4;font-weight:600}.library-filter{padding:7px 10px;border:1px solid var(--line);border-radius:6px;display:flex;gap:8px;align-items:center}.certificate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px 0 20px}.certificate-card{border:1px solid var(--line);border-radius:10px;background:#0d241c;overflow:hidden}.certificate-preview{height:139px;margin:11px;background:radial-gradient(circle at 50% 20%,#214934,#122d20 72%);border:1px solid #466544;border-radius:5px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#e3e8d3;overflow:hidden}.certificate-preview:before,.certificate-preview:after{content:'';position:absolute;inset:9px;border:1px solid #d5ca7c5c;pointer-events:none}.certificate-preview:after{inset:14px;border-color:#d5ca7c24}.preview-crown{font-size:18px;color:#e5cf77}.preview-title{font:700 13px var(--font-head);margin:8px 0 5px}.preview-subtitle{font-size:7px;color:#c0cfad;letter-spacing:1px;text-transform:uppercase}.preview-channel{font:600 8px var(--font-head);color:#8fe0a2;margin-top:8px}.preview-brand{position:absolute;bottom:14px;font:700 7px var(--font-head);letter-spacing:.7px;color:#b0c8ae}.certificate-card-info{padding:0 13px 12px}.certificate-card-info h3{font:600 12px var(--font-head);margin:0 0 5px}.certificate-card-info p{font-size:9px;color:#84998c;margin:0 0 10px}.certificate-card-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:9px}.badge{font-size:8px;padding:4px 7px;border-radius:20px;background:#183525;color:#91e3a7}.badge.locked{background:#242c20;color:#c2b777}.card-action{border:0;background:transparent;color:#92e1a5;font-size:9px;cursor:pointer}.library-empty{text-align:center;padding:55px 15px;color:#87d99e}.library-empty>span{font-size:25px}.library-empty h2{font:600 18px var(--font-head);margin:10px 0 6px;color:#dcebe0}.library-empty p{font-size:11px;color:#82988b}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.step-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:18px 16px 17px;background:linear-gradient(145deg,#10271c,#0d2018)}.step-number{font:700 10px var(--font-head);color:#77d795}.step-icon{float:right;font-size:17px;color:#9be4aa}.step-card h2{font:600 13px var(--font-head);margin:21px 0 8px}.step-card p{font-size:10px;line-height:1.7;color:#8da395;margin:0}.about-note{display:flex;gap:11px;align-items:center;margin-top:16px;border:1px solid #2c4733;background:#11261c;border-radius:9px;padding:13px 15px;color:#8cdb9e}.about-note p{margin:0;font-size:10px;line-height:1.6;color:#91a597}.about-note strong{color:#d8eadc}.toast{position:fixed;z-index:25;left:50%;bottom:24px;transform:translate(-50%,15px);opacity:0;pointer-events:none;transition:.2s;background:#e7f3e9;color:#153a25;border-radius:8px;padding:11px 16px;font-size:11px;box-shadow:0 8px 30px #0006}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;z-index:30;background:#020a07bf;display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}.modal-backdrop[hidden]{display:none}.modal-card{width:min(100%,570px);max-height:90vh;overflow:auto;background:#0e261d;border:1px solid #375641;border-radius:13px;padding:25px;position:relative;box-shadow:0 25px 100px #0008}.modal-close{position:absolute;right:16px;top:13px;border:0;background:transparent;color:#9ab0a0;font-size:22px;cursor:pointer}.modal-card h2{font:600 21px var(--font-head);letter-spacing:-.6px;margin:9px 0 6px}.modal-card p{font-size:11px;line-height:1.7;color:#93a899}.watch-list{display:grid;gap:9px;margin:16px 0}.watch-row{border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px}.watch-check{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#1d3927;color:#7be096}.watch-row strong{font-size:10px}.watch-row span{font-size:9px;color:#7e9586}.watch-clock{font:600 10px var(--font-head);color:#a6d8ae}.modal-cta{width:100%;justify-content:center;margin-top:8px}.modal-cta:disabled{opacity:.45;cursor:not-allowed;transform:none}.cert-canvas-wrap{padding:11px;border-radius:9px;background:#091910;border:1px solid var(--line);margin:17px 0}.cert-canvas-wrap canvas{display:block;width:100%;height:auto;border-radius:4px}.cert-actions{display:flex;gap:9px}.cert-actions .button{flex:1;justify-content:center}.modal-footnote{font-size:9px!important;color:#72897b!important;margin:9px 0 0}@media(max-width:950px){.app-shell{grid-template-columns:208px 1fr}.sidebar{width:208px}.main-content{padding:0 4%}.welcome-orbit{margin-right:1%}.certificate-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.app-shell{display:block;padding-bottom:62px}.sidebar{inset:auto 0 0;width:100%;height:62px;padding:6px 8px;background:#0a2018ee;border:0;border-top:1px solid var(--line);backdrop-filter:blur(14px)}.brand,.workspace-label,.sidebar-bottom{display:none}.side-nav{display:flex;justify-content:space-around;height:100%;gap:2px}.nav-link{height:48px;min-width:60px;flex-direction:column;justify-content:center;gap:2px;padding:3px 7px;font-size:8px}.nav-link.active{box-shadow:inset 0 2px 0 var(--green)}.nav-icon{font-size:15px}.nav-count{position:absolute;margin-left:24px;margin-top:-27px;padding:1px 4px}.main-content{padding:0 17px}.topbar{height:60px}.top-date{display:none}.top-actions{gap:0}.view{padding-top:27px}.welcome-row{min-height:176px}.welcome-row h1{font-size:40px}.welcome-orbit{width:115px;height:145px;margin-right:0}.orbit-one{width:113px;height:72px}.orbit-two{width:83px;height:119px}.orbit-core{width:53px;height:53px}.orbit-tag{font-size:7px;right:-3px}.connect-card{grid-template-columns:95px 1fr;min-height:0}.connect-copy{padding:21px 15px 19px 0}.connect-art{min-width:95px}.connect-play{width:48px;height:48px}.spark-a{left:14px}.spark-b{right:10px}.connect-copy h2{font-size:16px}.connect-copy>p:not(.privacy-note){font-size:10px}.privacy-note{font-size:8px}.button-primary{padding:10px 11px;font-size:10px}.stats-grid{grid-template-columns:1fr 1fr}.stat-card:last-child{grid-column:span 2}.section-heading{align-items:start;gap:12px}.section-heading .text-link{max-width:106px;line-height:1.6;text-align:right}.section-heading h2{font-size:18px}.milestone-item{grid-template-columns:35px 1fr auto;padding:10px}.milestone-date{max-width:64px;text-align:right;line-height:1.5}.ad-row{grid-template-columns:1fr;gap:10px;padding:18px 12px}.banner-slot{min-height:100px}.native-slot{border-left:0;border-top:1px solid var(--line);padding:15px 0 4px}.page-footer{flex-wrap:wrap;gap:8px 14px;font-size:8px}.page-footer>span:nth-child(2){order:3;width:100%}.certificate-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.certificate-preview{height:125px;margin:7px}.certificate-card-info{padding:0 9px 10px}.certificate-card-info h3{font-size:10px}.certificate-card-info p{font-size:8px}.card-action{font-size:8px}.inner-hero h1{font-size:39px}.library-toolbar{font-size:9px}.library-filter{gap:5px}.steps-grid{grid-template-columns:1fr}.step-card{padding:15px}.step-card h2{margin-top:13px}.channel-panel{padding:15px 12px}.channel-heading{align-items:flex-start}.button-soft{font-size:0;padding:9px}.button-soft span{display:none}.stat-card{padding:11px}.stat-card>strong{font-size:23px}.empty-milestones{align-items:flex-start;padding:17px}.empty-seal{flex:0 0 45px;width:45px;height:45px}.modal-card{padding:21px 16px}.cert-actions{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ShortFQ black theme: restrained surfaces, clear type, no decorative glow. */
:root {
  color-scheme: dark;
  --bg: #08090a;
  --panel: #111214;
  --panel2: #151618;
  --line: #292b2e;
  --muted: #96999e;
  --green: #b5d276;
  --green2: #8ba94a;
  --mint: #e5e8e1;
  --cream: #f0f0eb;
  --gold: #c9ba79;
}
body { background: #08090a; color: #e6e7e4; }
.boot-screen, .sidebar { background: #08090a; }
.boot-mark, .brand-mark { background: #b5d276; box-shadow: none; }
.boot-track { background: #242628; }
.boot-track i { background: #b5d276; }
.main-content { max-width: 1440px; }
.welcome-orbit, .connect-art .spark, .connect-card:after { display: none; }
.welcome-row { min-height: 170px; }
.welcome-row h1 em, .inner-hero h1 em { color: #b5d276; }
.connect-card, .channel-panel, .stat-card, .milestone-item, .empty-milestones,
.ad-row, .certificate-card, .step-card, .about-note, .sidebar-note {
  background: #111214;
  border-color: #292b2e;
  box-shadow: none;
}
.connect-card { grid-template-columns: 1fr; }
.connect-copy { padding: 25px; }
.button-primary { background: #b5d276; color: #10110e; box-shadow: none; }
.button-primary:hover { background: #c2de8c; }
.button-soft { background: #171819; border-color: #343639; color: #e1e2df; }
.button-soft:hover { background: #202123; }
.nav-link:hover, .nav-link.active { background: #171819; color: #e9eae7; }
.nav-link.active { box-shadow: inset 2px 0 0 #b5d276; }
.nav-count, .stat-icon, .empty-seal { background: #20231c; color: #c0d892; }
.stat-card > strong { color: #f0f1ed; }
.certificate-preview {
  background: #111214;
  border-color: #6b704f;
}
.certificate-preview:before { border-color: #a09a6b66; }
.certificate-preview:after { border-color: #a09a6b22; }
.preview-crown, .preview-channel { color: #c0d892; }
.preview-title { color: #f0f1ed; }
.preview-brand { color: #a7aaa3; }
.badge { background: #20231c; color: #c0d892; }
.badge.locked { background: #242527; color: #aaa99e; }
.security-note {
  max-width: 620px;
  margin: 12px 0 0;
  color: #c4c6c0;
  font-size: 10px;
  line-height: 1.65;
}
.privacy-note { margin-top: 8px; }
.load-more { margin: 14px auto 0; justify-content: center; }
.certificate-grid { align-items: start; }
@media (max-width: 720px) {
  .connect-card { grid-template-columns: 1fr; }
  .connect-copy { padding: 20px 16px; }
}

/* Simpler, larger monochrome layout with an offline profile and channel card. */
@font-face {
  font-family: 'Clash Regular';
  src: url('/Clash_regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Bold';
  src: url('/Clash_bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --bg: #050505;
  --panel: #101010;
  --panel2: #171717;
  --line: #303030;
  --muted: #b0b0b0;
  --green: #f2f2f2;
  --green2: #d0d0d0;
  --mint: #fff;
  --cream: #fff;
  --gold: #dedede;
  --font-head: 'Clash Bold', 'Clash Regular', sans-serif;
  font-family: 'Clash Regular', 'Clash Bold', sans-serif;
  color-scheme: dark;
}
body, .boot-screen { background: #050505; color: #f5f5f5; }
body, button, .button, .account-button, .nav-link, input, select, textarea {
  font-family: 'Clash Regular', 'Clash Bold', sans-serif;
}
.app-shell { grid-template-columns: 270px 1fr; }
.sidebar { width: 270px; background: #080808; }
.main-content { max-width: 1540px; }
.workspace-label { color: #aaa; font-size: 11px; }
.nav-link { min-height: 52px; height: auto; color: #c4c4c4; font-size: 15px; }
.nav-link:hover, .nav-link.active { color: #fff; background: #1c1c1c; box-shadow: inset 3px 0 0 #fff; }
.nav-icon, .nav-count, .brand-dot, .status-dot, .stat-live { color: #fff; }
.nav-count { background: #292929; }
.brand { color: #fff; font-size: 23px; }
.brand-mark { background: #fff; color: #050505; }
.brand-mark span { color: #555; }
.main-content { padding-inline: clamp(24px, 6vw, 96px); }
.topbar { min-height: 82px; height: auto; }
.breadcrumb, .top-date, .connection-state, .account-button { font-size: 14px; }
.account-button { background: #151515; color: #f1f1f1; padding: 6px 13px 6px 6px; }
.connection-state { display: inline-flex; align-items: center; gap: 8px; color: #ddd; }
.connection-state i { width: 9px; height: 9px; border-radius: 99px; background: #fff; }
.connection-state.offline i { background: #8f8f8f; }
.view { padding-top: 50px; }
.welcome-row { min-height: 224px; }
.welcome-row h1, .inner-hero h1 { font-size: clamp(48px, 5vw, 68px); line-height: 1.05; letter-spacing: -1.8px; color: #fff; }
.welcome-row h1 em, .inner-hero h1 em { color: #d0d0d0; }
.eyebrow, .card-kicker { color: #c0c0c0; font-size: 12px; letter-spacing: 1.3px; }
.eyebrow-line { background: #fff; width: 24px; }
.lead { max-width: 740px; font-size: 18px; line-height: 1.6; color: #bfbfbf; }
.connect-card, .channel-panel, .stat-card, .milestone-item, .empty-milestones, .ad-row,
.certificate-card, .step-card, .about-note, .sidebar-note, .profile-card, .profile-stats article,
.credits-list article { background: #111; border: 1px solid #303030; border-radius: 14px; box-shadow: none; }
.connect-copy { padding: 36px; }
.connect-copy h2, .channel-heading h2, .empty-milestones h2 { color: #fff; font-size: 26px; }
.connect-copy > p:not(.privacy-note), .security-note, .privacy-note,
.stat-foot, .channel-handle, .empty-milestones p { color: #b6b6b6; font-size: 14px; line-height: 1.6; }
.security-note { max-width: 760px; }
.button { font-size: 16px; }
.button-primary { background: #fff; color: #050505; padding: 15px 20px; }
.button-primary:hover { background: #ddd; }
.button-soft { padding: 12px 16px; background: #1b1b1b; border: 1px solid #494949; color: #fff; }
.channel-panel { padding: 28px; }
.channel-heading { margin-bottom: 25px; }
.channel-heading h2 { font-size: 24px; }
.channel-identity img { width: 58px; height: 58px; }
.stats-grid { gap: 14px; }
.stat-card { padding: 20px; }
.stat-top, .stat-foot { font-size: 14px; color: #c8c8c8; }
.stat-icon, .empty-seal { background: #252525; color: #fff; }
.stat-card > strong { font-size: 34px; color: #fff; }
.stat-live { background: #fff; box-shadow: none; }
.stat-label { color: #aaa; }
.milestone-section { margin-top: 54px; }
.section-heading h2 { font-size: 28px; }
.section-heading p, .text-link { font-size: 14px; color: #ccc; }
.milestone-item { grid-template-columns: 48px 1fr auto; padding: 16px 18px; }
.milestone-icon { width: 46px; height: 46px; background: #f2f2f2; color: #111; }
.milestone-info strong { color: #fff; font-size: 17px; }
.milestone-info span, .milestone-date { color: #bbb; font-size: 13px; }
.certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.certificate-card-info h3 { font-size: 17px; }
.certificate-card-info p, .card-action, .badge { font-size: 13px; }
.certificate-preview { background: #141414; border-color: #777; }
.preview-crown, .preview-channel { color: #fff; }
.badge, .nav-count { background: #262626; color: #fff; }
.badge.locked { background: #222; color: #bbb; }
.inner-hero h1 { font-size: clamp(46px, 5vw, 66px); }
.profile-card { display: flex; align-items: center; gap: 20px; padding: 26px; }
.profile-card > img { width: 82px; height: 82px; border: 1px solid #555; border-radius: 50%; object-fit: cover; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy h2 { margin: 7px 0; overflow-wrap: anywhere; font-size: 27px; }
.profile-copy p, .profile-hint { color: #bbb; font-size: 15px; }
.profile-cache-state { border: 1px solid #444; border-radius: 99px; padding: 8px 12px; color: #ddd; font-size: 13px; white-space: nowrap; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.profile-stats article { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.profile-stats article > span, .credits-list article > span { color: #bbb; font-size: 12px; letter-spacing: 1px; }
.profile-stats strong { font-size: 23px; overflow-wrap: anywhere; }
.profile-stats small { color: #aaa; font-size: 13px; }
.profile-hint { margin-top: 20px; }
.credits-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.credits-list article { padding: 26px; }
.credits-list strong { display: block; margin-top: 18px; font-size: 23px; }
.credits-list a { color: #fff; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.credits-list p, .credits-note { margin: 10px 0 0; color: #bbb; font-size: 15px; line-height: 1.6; }
.credits-note { margin-top: 20px; }
.channel-3d { margin-top: 24px; padding: 12px 20px 8px; perspective: 900px; text-align: center; }
.channel-3d-face { position: relative; display: grid; justify-items: center; gap: 8px; max-width: 520px; margin: 0 auto; padding: 25px; border: 1px solid #626262; border-radius: 18px; background: linear-gradient(135deg, #222, #0b0b0b 72%); box-shadow: 0 28px 0 -13px #252525, 0 44px 0 -21px #191919, 0 55px 34px #000; transform: rotateX(7deg) rotateY(-8deg); transform-style: preserve-3d; transition: transform .35s ease; }
.channel-3d-face:hover { transform: rotateX(0) rotateY(0) translateY(-5px); }
.channel-3d-face > img { width: 70px; height: 70px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.visual-play { position: absolute; top: 53px; left: calc(50% + 31px); display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #111; border-radius: 50%; background: #fff; color: #111; font-size: 9px; }
.channel-3d-face > strong { font-size: 24px; overflow-wrap: anywhere; }
.visual-caption { color: #aaa; font-size: 11px; letter-spacing: 1.4px; }
.visual-figures { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 5px; color: #bbb; font-size: 13px; }
.visual-figures b { display: block; color: #fff; font-size: 20px; }
.channel-3d > p { margin: 20px 0 0; color: #bbb; font-size: 13px; }
.page-footer, .footer-links a { color: #aaa; }
@media (max-width: 950px) {
  .app-shell { grid-template-columns: 225px 1fr; }
  .sidebar { width: 225px; }
}
@media (max-width: 720px) {
  .app-shell { padding-bottom: 78px; }
  .sidebar { height: 78px; padding: 7px 4px; background: #080808; border-top: 1px solid #333; }
  .nav-link { min-width: 0; height: 62px; min-height: 62px; gap: 4px; padding: 5px; font-size: 11px; }
  .nav-link.active { box-shadow: inset 0 3px 0 #fff; }
  .nav-icon { font-size: 19px; }
  .nav-count { display: none; }
  .main-content { padding-inline: 18px; }
  .view { padding-top: 30px; }
  .welcome-row { min-height: 185px; }
  .welcome-row h1, .inner-hero h1 { font-size: 44px; }
  .lead { font-size: 16px; }
  .connect-copy { padding: 24px 18px; }
  .connect-copy h2 { font-size: 22px; }
  .channel-panel { padding: 17px 13px; }
  .channel-heading h2 { font-size: 19px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card:last-child { grid-column: span 2; }
  .stat-card { padding: 14px; }
  .stat-card > strong { font-size: 27px; }
  .stat-top, .stat-foot { font-size: 12px; }
  .certificate-grid, .profile-stats, .credits-list { grid-template-columns: 1fr; }
  .profile-card { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
  .profile-card > img { width: 62px; height: 62px; }
  .profile-copy h2 { font-size: 21px; }
  .profile-cache-state { margin-left: 80px; }
  .profile-stats article { padding: 18px; }
  .channel-3d-face { transform: rotateX(4deg) rotateY(-4deg); }
  .top-actions { gap: 8px; }
  .connection-state { font-size: 11px; }
  .breadcrumb { font-size: 12px; }
  .account-button { font-size: 0; padding: 3px; }
  .account-avatar { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .channel-3d-face, .channel-3d-face:hover { transform: none; }
}

/* A slightly tighter scale keeps the same layout and type while reducing the oversized feel. */
.app-shell { grid-template-columns: 244px 1fr; }
.sidebar { width: 244px; }
.brand { font-size: 21px; }
.nav-link { min-height: 47px; font-size: 14px; }
.main-content { max-width: 1480px; padding-inline: clamp(22px, 5vw, 76px); }
.topbar { min-height: 74px; }
.breadcrumb, .top-date, .connection-state, .account-button { font-size: 13px; }
.view { padding-top: 39px; }
.welcome-row { min-height: 202px; }
.welcome-row h1, .inner-hero h1 { font-size: clamp(42px, 4.5vw, 59px); }
.lead { font-size: 16px; }
.connect-copy { padding: 30px; }
.connect-copy h2, .channel-heading h2, .empty-milestones h2 { font-size: 23px; }
.connect-copy > p:not(.privacy-note), .security-note, .privacy-note { font-size: 12px; }
.button { font-size: 14px; }
.button-primary { padding: 13px 17px; }
.channel-panel { padding: 24px; }
.channel-heading { margin-bottom: 20px; }
.channel-heading h2 { font-size: 22px; }
.channel-identity img { width: 52px; height: 52px; }
.stat-card { padding: 17px; }
.stat-top, .stat-foot, .channel-handle { font-size: 12px; }
.stat-card > strong { font-size: 30px; }
.milestone-section { margin-top: 42px; }
.section-heading h2 { font-size: 25px; }
.milestone-item { grid-template-columns: 43px 1fr auto; padding: 14px 16px; }
.milestone-icon { width: 41px; height: 41px; }
.milestone-info strong { font-size: 15px; }
.certificate-grid { gap: 16px; }
.certificate-card-info h3 { font-size: 15px; }
.certificate-card-info p, .card-action, .badge { font-size: 11px; }
.profile-card { gap: 16px; padding: 22px; }
.profile-card > img { width: 72px; height: 72px; }
.profile-copy h2 { font-size: 24px; }
.profile-copy p { font-size: 13px; }
.profile-stats { gap: 13px; }
.profile-stats article { padding: 19px; }
.profile-stats strong { font-size: 21px; }
.credits-list { gap: 13px; }
.credits-list article { padding: 22px; }
.credits-list strong { font-size: 21px; }
.credits-list p, .credits-note { font-size: 13px; }
.connect-status { margin: 9px 0 12px; color: #e1e1e1; font-size: 12px; line-height: 1.5; }
#connect-button:disabled { opacity: .72; cursor: wait; }

@media (max-width: 950px) {
  .app-shell { grid-template-columns: 210px 1fr; }
  .sidebar { width: 210px; }
  .main-content { padding-inline: 28px; }
  .welcome-row h1, .inner-hero h1 { font-size: clamp(40px, 5vw, 54px); }
}
@media (max-width: 720px) {
  .app-shell { padding-bottom: 70px; }
  .sidebar { height: 70px; }
  .nav-link { height: 55px; min-height: 55px; font-size: 10px; }
  .nav-icon { font-size: 17px; }
  .main-content { padding-inline: 16px; }
  .topbar { min-height: 64px; }
  .view { padding-top: 26px; }
  .welcome-row { min-height: 167px; }
  .welcome-row h1, .inner-hero h1 { font-size: 40px; }
  .lead { font-size: 14px; }
  .connect-copy { padding: 20px 16px; }
  .connect-copy h2 { font-size: 20px; }
  .connect-copy > p:not(.privacy-note), .security-note, .privacy-note { font-size: 10px; }
  .connect-status { font-size: 10px; }
  .button { font-size: 12px; }
  .channel-panel { padding: 15px 12px; }
  .channel-heading h2 { font-size: 18px; }
  .stat-card { padding: 12px; }
  .stat-card > strong { font-size: 24px; }
  .stat-top, .stat-foot { font-size: 10px; }
  .section-heading h2 { font-size: 19px; }
  .milestone-item { grid-template-columns: 36px 1fr auto; padding: 10px; }
  .milestone-icon { width: 34px; height: 34px; }
  .milestone-info strong { font-size: 12px; }
  .profile-card { padding: 16px; }
  .profile-card > img { width: 58px; height: 58px; }
  .profile-copy h2 { font-size: 20px; }
  .profile-copy p { font-size: 12px; }
}