/* CodeVerse developer portal — same identity as the marketing landing page. */
:root{
  /* palette mirrors the CodeVerse app icon: navy badge, VS-blue accent, teal chevrons */
  --bg:#FFFFFF; --bg-soft:#F3F8FC; --bg-band:#E9F2FA;
  --line:#DBE7F1; --line2:#C4DAEA;
  --ink:#0B1E30; --ink2:#4A5C6C; --ink3:#7C8D9B;
  --violet:#0A6FB5; --violet-deep:#0F325A; --violet-soft:#E1EFFA;
  --plum:#081C38; --teal:#0D9488; --red:#C23A3A;
  --grad-cta:linear-gradient(115deg,#0F325A 0%,#0A6FB5 55%,#2AA9C4 100%);
  --sans:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Cascadia Code','Consolas',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg-soft); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--violet-deep)}
h1,h2,h3{margin:0; letter-spacing:-.015em; color:var(--ink)}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px; width:100%}

/* ---- nav ---- */
.topnav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
        backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:26px; height:66px}
.logo{display:flex; align-items:center; gap:12px; font-size:1.2rem; text-decoration:none;
      font-weight:700; color:var(--ink); letter-spacing:-.015em; white-space:nowrap; flex-shrink:0}
.logo-mark{width:34px;height:34px;border-radius:9px;
           background:linear-gradient(160deg,#0F325A 0%,#081C38 100%);
           display:grid; place-items:center; overflow:hidden;
           outline:1px solid rgba(255,255,255,.06); outline-offset:-1px;
           box-shadow:0 4px 12px -4px rgba(8,28,56,.55)}
.logo-mark svg{width:100%; height:100%; display:block}
.nav-links{display:flex; align-items:center; gap:20px; margin-left:auto}
.nav-links a{text-decoration:none; color:var(--ink2); font-size:.92rem; font-weight:500; white-space:nowrap}
.nav-links a:hover{color:var(--violet-deep)}
/* hamburger — hidden on desktop, shown on mobile */
.nav-toggle{display:none; margin-left:auto; width:42px; height:38px; flex-shrink:0;
  align-items:center; justify-content:center; cursor:pointer;
  background:#fff; border:1px solid var(--line2); border-radius:9px; color:var(--ink)}
.nav-toggle:hover{border-color:var(--violet); color:var(--violet-deep)}
.nav-toggle svg{width:22px; height:22px}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav-in{gap:14px}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.98); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 44px -22px rgba(15,50,90,.4);
    max-height:calc(100vh - 66px); overflow-y:auto; display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a,.nav-links .inline-form{display:block; width:100%; padding:14px 28px; border-top:1px solid var(--bg-soft); font-size:1rem}
  .nav-links a:first-child{border-top:none}
  .nav-links .nav-cta{background:none; color:var(--violet-deep) !important; text-align:left; border-radius:0}
  .nav-links .linkbtn{font-size:1rem}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .page-main{padding:28px 18px 48px}
}
.nav-cta{background:var(--violet); color:#fff !important; padding:7px 16px; border-radius:7px;
         font-weight:600; text-decoration:none; font-size:.9rem}
.nav-cta:hover{background:var(--violet-deep)}
.inline-form{display:inline; margin:0}
.linkbtn{background:none; border:none; padding:0; color:var(--ink2); font:inherit;
         font-size:.92rem; font-weight:500; cursor:pointer}
.linkbtn:hover{color:var(--violet-deep)}

/* ---- page scaffold ---- */
.page-main{flex:1; padding:44px 28px 64px}
.page-head{margin-bottom:26px}
.page-head h1{font-size:1.7rem; font-weight:700}
.page-head p{color:var(--ink2); margin:6px 0 0}
.eyebrow{font-family:var(--mono); font-size:.76rem; color:var(--violet);
         letter-spacing:.06em; text-transform:uppercase; font-weight:600}

/* ---- cards ---- */
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 28px;
      box-shadow:0 10px 30px -18px rgba(15,50,90,.18)}
.card + .card{margin-top:18px}
.card h2{font-size:1.05rem; font-weight:650; margin-bottom:14px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
@media (max-width:860px){ .grid-2{grid-template-columns:1fr} }

/* ---- forms ---- */
.auth-card{max-width:430px; margin:36px auto 0}
.auth-card .sub{color:var(--ink2); font-size:.93rem; margin:4px 0 20px}
.field{margin-bottom:15px}
.field label{display:block; font-size:.86rem; font-weight:600; color:var(--ink2); margin-bottom:5px}
.field input{width:100%; padding:11px 13px; border:1.5px solid var(--line2); border-radius:8px;
             font-size:.96rem; font-family:inherit; background:#fff; color:var(--ink)}
.field input:focus{outline:none; border-color:var(--violet)}
.btn{display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
     font-size:.96rem; font-weight:600; padding:12px 24px; border-radius:8px; font-family:inherit}
.btn-solid{background:var(--violet); color:#fff; box-shadow:0 8px 22px -8px rgba(15,50,90,.55)}
.btn-solid:hover{background:var(--violet-deep)}
.btn-line{border:1.5px solid var(--line2); color:var(--ink); background:#fff}
.btn-line:hover{border-color:var(--violet); color:var(--violet-deep)}
.btn-wide{width:100%}
.form-error{background:#FBEDED; border:1px solid #EFC9C9; color:var(--red); border-radius:8px;
            padding:10px 14px; font-size:.9rem; margin-bottom:15px}
.form-foot{margin-top:16px; font-size:.9rem; color:var(--ink2); text-align:center}
.validation-msg{color:var(--red); font-size:.82rem; margin-top:3px; display:block}

/* ---- license card ---- */
.license-box{display:flex; align-items:center; gap:12px; background:var(--plum); color:#D6E6F5;
             border-radius:10px; padding:16px 18px; font-family:var(--mono); font-size:1.05rem;
             letter-spacing:.04em; justify-content:space-between; flex-wrap:wrap}
.license-box .key{word-break:break-all; color:#fff; font-weight:600}
.copy-btn{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25);
          border-radius:7px; padding:7px 14px; font-size:.82rem; font-family:var(--sans);
          font-weight:600; cursor:pointer}
.copy-btn:hover{background:rgba(255,255,255,.24)}
.plan-chip{display:inline-block; background:var(--violet-soft); color:var(--violet-deep);
           border-radius:99px; padding:3px 13px; font-size:.8rem; font-weight:700}
/* Remove-machine: small outline-danger button on light cards (copy-btn is for the dark license box) */
.machine-remove{background:transparent; color:var(--red); border:1px solid var(--red);
                border-radius:7px; padding:4px 12px; font-size:.78rem; font-family:var(--sans);
                font-weight:600; cursor:pointer}
.machine-remove:hover{background:var(--red); color:#fff}
.kv{display:grid; grid-template-columns:170px 1fr; row-gap:9px; font-size:.93rem}
.kv dt{color:var(--ink3)} .kv dd{margin:0; color:var(--ink); font-weight:500}
.hint{color:var(--ink3); font-size:.85rem; margin-top:14px; line-height:1.55}
.hint code{font-family:var(--mono); background:var(--bg-band); border-radius:5px; padding:1px 6px; font-size:.8rem; color:var(--violet-deep)}

/* ---- os brand logos (Apple / Windows) ---- */
.os-ico{width:1.05em; height:1.05em; display:inline-block; vertical-align:-0.14em; margin-right:.15em}

/* ---- downloads ---- */
.rec-card{background:var(--grad-cta); color:#fff; border-radius:16px; padding:26px 30px;
          display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
          margin-bottom:24px; box-shadow:0 16px 36px -16px rgba(15,50,90,.5)}
.rec-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85}
.rec-card h2{color:#fff; font-size:1.28rem; margin-top:4px; display:flex; align-items:center; gap:10px}
.rec-platform{font-size:.72rem; font-weight:600; color:rgba(255,255,255,.85); background:rgba(255,255,255,.16);
              border-radius:99px; padding:2px 10px; letter-spacing:.02em}
.rec-meta{color:rgba(255,255,255,.82); font-size:.86rem; margin-top:5px}
.rec-card .btn-white{background:#fff; color:var(--violet-deep); white-space:nowrap}
.rec-card .btn-white:hover{background:#F3F1F9}
.rel{display:flex; gap:22px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap}
.rel-info h2{display:flex; align-items:center; gap:10px}
.rel-latest{background:var(--teal); color:#fff; font-size:.72rem; font-weight:700; border-radius:99px;
            padding:2px 10px; letter-spacing:.04em; text-transform:uppercase}
.rel-meta{color:var(--ink3); font-family:var(--mono); font-size:.8rem; margin-top:4px}
.rel-notes{margin:12px 0 0; padding-left:20px; color:var(--ink2); font-size:.92rem}
.rel-notes li{margin-bottom:4px}
.empty{color:var(--ink3); text-align:center; padding:36px 0}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line); background:#fff; padding:20px 0; font-size:.85rem; color:var(--ink3)}
.site-foot .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.site-foot .flag{color:var(--teal); font-weight:600}
/* ---- admin forms & tables ---- */
.field select,.field textarea{width:100%; padding:11px 13px; border:1.5px solid var(--line2); border-radius:8px; font:inherit; background:#fff}
.field select:focus,.field textarea:focus{outline:none; border-color:var(--violet)}
.table{width:100%; border-collapse:collapse; font-size:.9rem}
.table th{text-align:left; color:var(--ink3); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line)}
.table td{padding:8px 10px; border-bottom:1px solid var(--line)}

/* ---- community feedback board ---- */
.fb-compose h2{margin-bottom:10px}
.fb-compose-row{display:flex; gap:14px}
.fb-compose-row .fb-type{flex:0 0 150px}
.fb-compose-row .fb-title{flex:1}
@media (max-width:640px){ .fb-compose-row{flex-direction:column; gap:0} .fb-compose-row .fb-type{flex:auto} }
.fb-signin{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.fb-signin p{color:var(--ink2); margin:6px 0 0}
.fb-signin-cta{display:flex; gap:10px}
.fb-toolbar{display:flex; justify-content:space-between; align-items:center; gap:14px;
            flex-wrap:wrap; margin:26px 0 14px}
.fb-tabs, .fb-sort{display:flex; gap:6px; flex-wrap:wrap}
.fb-tabs a, .fb-sort a{text-decoration:none; color:var(--ink2); font-size:.87rem; font-weight:600;
                       padding:5px 13px; border-radius:99px; border:1px solid transparent}
.fb-tabs a:hover, .fb-sort a:hover{color:var(--violet-deep)}
.fb-tabs a.on, .fb-sort a.on{background:var(--violet-soft); color:var(--violet-deep); border-color:var(--line2)}
.fb-post{display:flex; gap:18px; align-items:flex-start; padding:20px 24px}
.fb-post + .fb-post{margin-top:12px}
.fb-vote{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:52px;
         background:#fff; border:1.5px solid var(--line2); border-radius:10px; padding:8px 10px;
         color:var(--ink2); font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit}
.fb-vote span{font-size:.95rem; color:var(--ink)}
.fb-vote:hover{border-color:var(--violet); color:var(--violet-deep)}
.fb-vote.voted{background:var(--violet-soft); border-color:var(--violet); color:var(--violet-deep)}
.fb-vote.voted span{color:var(--violet-deep)}
.fb-body{flex:1; min-width:0}
.fb-post-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fb-post-head h2{font-size:1.02rem; font-weight:650; margin:0}
.fb-badge{font-size:.72rem; font-weight:700; border-radius:99px; padding:2px 10px; letter-spacing:.02em}
.fb-bug{background:#FBEDED; color:var(--red)}
.fb-feature{background:var(--violet-soft); color:var(--violet-deep)}
.fb-question{background:#E8F0FB; color:#2456A8}
.fb-praise{background:#E7F6F2; color:var(--teal)}
.fb-status{font-size:.72rem; font-weight:700; border-radius:99px; padding:2px 10px; letter-spacing:.02em}
.st-planned{background:#E8F0FB; color:#2456A8}
.st-in-progress{background:#FBF3E3; color:#9A6A0B}
.st-done{background:var(--teal); color:#fff}
.st-declined{background:#F1EFF5; color:var(--ink3)}
.fb-msg{color:var(--ink2); font-size:.93rem; margin:7px 0 0; white-space:pre-line; overflow-wrap:break-word}
.fb-meta{color:var(--ink3); font-family:var(--mono); font-size:.78rem; margin-top:9px}
.fb-reply{background:var(--bg-band); border-left:3px solid var(--violet); border-radius:0 9px 9px 0;
          padding:11px 15px; margin-top:12px; font-size:.9rem; color:var(--ink2); white-space:pre-line}
.fb-reply-head{font-size:.75rem; font-weight:700; color:var(--violet-deep);
               text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px}
.fb-admin{margin-top:12px}
.fb-admin summary{cursor:pointer; color:var(--ink3); font-size:.82rem; font-weight:600}
.fb-admin-form{display:flex; gap:10px; margin-top:10px; align-items:flex-start; flex-wrap:wrap}
.fb-admin-form select{padding:9px 12px; border:1.5px solid var(--line2); border-radius:8px; font:inherit; background:#fff}
.fb-admin-form textarea{flex:1; min-width:220px; padding:9px 12px; border:1.5px solid var(--line2);
                        border-radius:8px; font:inherit}
.fb-admin-form .btn{padding:9px 18px}

/* ---- social sign-in ---- */
.oauth-divider{display:flex; align-items:center; gap:12px; color:var(--ink3); font-size:.8rem; margin-top:18px}
.oauth-divider::before,.oauth-divider::after{content:""; flex:1; height:1px; background:var(--line)}
.oauth-row{display:flex; gap:10px; margin-top:14px}
.oauth-row form{flex:1}
.btn-oauth{width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:#fff; border:1.5px solid var(--line2); color:var(--ink); font-weight:600}
.btn-oauth:hover{border-color:var(--violet); color:var(--violet-deep)}

/* ---- billing: notices, coupons, live pricing ---- */
.notice{border-radius:8px; padding:12px 16px; font-size:.92rem; margin-bottom:15px}
.notice-ok{background:#E9F8F2; border:1px solid #B8E6D5; color:var(--teal)}
.btn-ghost{background:none; border:1.5px solid transparent; color:var(--ink2)}
.btn-ghost:hover{color:var(--violet-deep)}

.coupon-box{margin-top:18px}
.coupon-label{display:block; font-weight:650; margin-bottom:10px}
.coupon-row{display:flex; gap:10px; flex-wrap:wrap}
.coupon-row input{flex:1; min-width:180px; padding:11px 13px; border:1.5px solid var(--line2);
                  border-radius:8px; font:inherit; letter-spacing:.06em; text-transform:uppercase}
.coupon-row input:focus{outline:none; border-color:var(--violet)}
.coupon-row .btn{padding:11px 20px}
.coupon-msg{margin:10px 0 0; font-size:.9rem; min-height:1.1em}
.coupon-msg.ok{color:var(--teal); font-weight:600}
.coupon-msg.err{color:var(--red)}

.price-live{font-size:1.9rem; font-weight:700; margin:12px 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price-was{font-size:1.15rem; font-weight:600; color:var(--ink3); text-decoration:line-through}
.price-now{color:var(--ink)}
.price-per{font-size:.95rem; font-weight:500; color:var(--ink2)}
.price-card-live.has-discount .price-now{color:var(--teal)}
.price-card-live.coupon-na{opacity:.62}
.featured-card{border-color:var(--violet); box-shadow:0 14px 34px -18px rgba(15,50,90,.45)}

.pill{display:inline-block; border-radius:99px; padding:2px 11px; font-size:.74rem; font-weight:700; letter-spacing:.02em}
.pill-on{background:#E9F8F2; color:var(--teal)}
.pill-off{background:var(--bg-band); color:var(--ink3)}
.row-actions{display:flex; gap:14px; white-space:nowrap}
.linkbtn.danger{color:var(--red)}
.linkbtn.danger:hover{color:#8f2020}

/* ---- runtimes & SDKs ---- */
.sdk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:18px}
.sdk-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px 24px;
          display:flex; flex-direction:column}
.sdk-card-latest{border-color:var(--violet); box-shadow:0 14px 34px -18px rgba(15,50,90,.4)}
.sdk-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sdk-head h3{font-size:1.15rem; font-weight:700}
.sdk-badge{background:var(--bg-band); color:var(--ink2); font-size:.7rem; font-weight:700; letter-spacing:.03em;
           border-radius:99px; padding:3px 11px; text-transform:uppercase; white-space:nowrap}
.sdk-badge-lts{background:var(--violet-soft); color:var(--violet-deep)}
.sdk-meta{margin:16px 0 18px; display:grid; row-gap:7px; font-size:.86rem}
.sdk-meta > div{display:flex; justify-content:space-between; gap:12px}
.sdk-meta dt{color:var(--ink3); margin:0} .sdk-meta dd{margin:0; color:var(--ink); font-weight:600; font-family:var(--mono); font-size:.82rem}
.sdk-dl{margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:9px}
.sdk-dl .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px}
.sdk-alt{font-size:.83rem; color:var(--ink2); text-decoration:none}
.sdk-alt:hover{color:var(--violet-deep)}
.sdk-alt-all{margin-top:2px; font-weight:600}
.sdk-preview-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px}
.sdk-preview{display:flex; align-items:center; gap:12px; background:var(--bg-soft); border:1px solid var(--line);
             border-radius:10px; padding:10px 14px; font-size:.86rem}
.sdk-preview-ver{color:var(--ink2); font-family:var(--mono); font-size:.8rem}
.sdk-preview a{font-weight:600; text-decoration:none}

/* ---- Contact us ---- */
.form-ok{background:#E4F5EF; border:1px solid #B7E3D6; color:#0B7A6F; border-radius:10px;
         padding:13px 16px; font-size:.92rem; font-weight:600; margin-bottom:20px}
.btn-sm{padding:6px 13px; font-size:.82rem}
.contact-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:22px; align-items:start}
.contact-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.contact-side{display:grid; gap:22px}
.contact-card .eyebrow, .contact-faq .eyebrow{margin-bottom:14px; display:block}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.contact-list li{display:flex; gap:12px; align-items:flex-start}
.contact-list .ci{font-size:1.15rem; line-height:1.3; flex-shrink:0}
.contact-list b{display:block; font-size:.9rem; color:var(--ink)}
.contact-list a{color:var(--violet-deep); text-decoration:none; font-size:.9rem; font-weight:600; word-break:break-word}
.contact-list a:hover{text-decoration:underline}
.contact-list .ci-sub{font-size:.85rem; color:var(--ink2)}
.contact-links{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.contact-links a{color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:600}
.contact-links a:hover{color:var(--violet-deep)}
.contact-msg{margin-top:14px}
.contact-msg.done{opacity:.72}
.contact-msg-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.contact-msg-head h3{font-size:1.02rem; font-weight:700}
.contact-msg-when{margin-left:auto; color:var(--ink3); font-family:var(--mono); font-size:.78rem}
.contact-msg-body{color:var(--ink2); font-size:.93rem; margin:10px 0 0; white-space:pre-wrap}
.contact-msg-meta{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:.86rem; color:var(--ink2)}
.contact-msg-meta a{color:var(--violet-deep); text-decoration:none; font-weight:600}
@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr}
  .contact-row{grid-template-columns:1fr}
}