:root{
  --cj-ink:#10233a;--cj-ink-2:#183a5a;--cj-blue-950:#0b1f33;--cj-blue-900:#123a5a;--cj-blue-800:#155d7a;--cj-blue-700:#197fa2;--cj-blue-600:#24a8c8;--cj-aqua:#66d4df;--cj-aqua-soft:#e6f8fa;--cj-coral:#ff7a59;--cj-coral-soft:#fff0ea;--cj-sand:#fff8ed;--cj-sand-2:#f5ead8;--cj-gold:#e9bd62;--cj-success:#2f9e72;--cj-muted:#637487;--cj-line:rgba(16,35,58,.14);--cj-panel:rgba(255,255,255,.93);--cj-shadow:0 28px 80px rgba(16,35,58,.15);--cj-soft:0 14px 36px rgba(16,35,58,.10);--cj-radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--cj-ink);line-height:1.55;background:radial-gradient(circle at 7% 0%,rgba(102,212,223,.38),transparent 32rem),radial-gradient(circle at 90% 3%,rgba(255,122,89,.18),transparent 28rem),linear-gradient(180deg,var(--cj-sand),#f6fbfc 52%,#fff)}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,rgba(16,35,58,.028) 1px,transparent 1px),linear-gradient(rgba(16,35,58,.026) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 62%)}
a{color:var(--cj-blue-800);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}
.shell{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
.topbar{position:relative;z-index:5;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--cj-line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--cj-ink);font-weight:950;text-decoration:none!important;white-space:nowrap}
.mark{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cj-blue-900),var(--cj-blue-600));color:#fff;box-shadow:var(--cj-soft);font-weight:950;font-size:1.15rem;letter-spacing:-.05em}
.brand span:last-child{font-size:1.5rem;letter-spacing:-.06em}
.navlinks{display:flex;gap:.45rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.navlinks a{font-weight:850;color:var(--cj-ink-2);padding:.62rem .76rem;border-radius:999px}
.navlinks a:hover{background:var(--cj-aqua-soft);text-decoration:none}
.navlinks a.cta,.btn,button,input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:999px;padding:.9rem 1.18rem;min-height:44px;background:linear-gradient(135deg,var(--cj-blue-900),var(--cj-blue-600));color:#fff!important;font-weight:900;box-shadow:0 14px 30px rgba(25,127,162,.25);cursor:pointer;text-decoration:none!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.navlinks a.cta:hover,.btn:hover,button:hover,input[type=submit]:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(25,127,162,.31);filter:saturate(1.03)}
.btn.light,button.light,.navlinks a.light{background:rgba(255,255,255,.94);color:var(--cj-ink)!important;border:1px solid var(--cj-line);box-shadow:var(--cj-soft)}
.btn.coral,button.coral{background:linear-gradient(135deg,#df5e43,var(--cj-coral))}
.btn.gold,button.gold{background:linear-gradient(135deg,#c9932d,var(--cj-gold));color:var(--cj-blue-950)!important}
h1,h2,h3{color:var(--cj-blue-950);line-height:1.05;letter-spacing:-.035em}
h1{font-size:clamp(2.35rem,5.7vw,5.45rem);margin:.8rem 0 1rem}h2{font-size:clamp(1.7rem,3.4vw,3.05rem);margin:0 0 1rem}h3{font-size:1.24rem;margin:.2rem 0 .55rem}
p{color:var(--cj-muted)}strong{color:var(--cj-blue-950)}
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(320px,.94fr);gap:clamp(1.25rem,4vw,3rem);align-items:center;margin:1.35rem 0 2rem;padding:clamp(1.25rem,4vw,3.8rem);border:1px solid var(--cj-line);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(230,248,250,.88)),radial-gradient(circle at 88% 10%,rgba(255,122,89,.16),transparent 22rem);box-shadow:var(--cj-shadow)}
.kicker{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(16,35,58,.13);background:#fff;border-radius:999px;padding:.45rem .75rem;color:var(--cj-blue-800);font-weight:950;box-shadow:var(--cj-soft)}
.kicker:before{content:"✦";color:var(--cj-coral)}
.lede{font-size:clamp(1.06rem,1.45vw,1.26rem);max-width:68ch}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.25rem}
.art{min-height:390px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.42);background:linear-gradient(145deg,var(--cj-blue-950),var(--cj-blue-700));box-shadow:0 30px 80px rgba(16,35,58,.24);position:relative}
.art svg,.art img{width:100%;height:100%;min-height:390px;object-fit:cover;display:block}
.overlay{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(255,255,255,.93);border-radius:20px;padding:1rem;border:1px solid rgba(255,255,255,.7);box-shadow:var(--cj-soft)}
.overlay strong{display:block;color:var(--cj-blue-950)}
.grid{display:grid;gap:1rem}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--cj-panel);border:1px solid var(--cj-line);border-radius:24px;padding:1.15rem;box-shadow:var(--cj-soft);position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--cj-blue-900),var(--cj-aqua),var(--cj-coral),var(--cj-gold))}
.icon{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cj-aqua-soft),#fff);color:var(--cj-blue-900);font-weight:950;margin-bottom:.85rem;border:1px solid var(--cj-line)}
.band{margin:2rem 0;padding:clamp(1.4rem,4vw,3rem);border-radius:34px;color:#fff;background:linear-gradient(135deg,var(--cj-blue-950),var(--cj-blue-800)),radial-gradient(circle at 80% 20%,rgba(255,122,89,.22),transparent 18rem);box-shadow:var(--cj-shadow);position:relative;overflow:hidden}
.band h2,.band h3,.band strong{color:#fff}.band p{color:rgba(255,255,255,.78)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-top:1rem}
.step{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:1rem}
.step b{display:flex;align-items:center;gap:.45rem;color:#fff}.step b:before{content:"✓";width:1.4rem;height:1.4rem;border-radius:999px;background:var(--cj-aqua);display:grid;place-items:center;color:var(--cj-blue-950);font-size:.8rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.48rem .68rem;border-radius:999px;background:var(--cj-aqua-soft);border:1px solid var(--cj-line);color:var(--cj-blue-900);font-weight:850}.chip.coral{background:var(--cj-coral-soft);color:#9f3f29}.chip:before{content:"";width:.42rem;height:.42rem;border-radius:99px;background:var(--cj-blue-600)}.chip.coral:before{background:var(--cj-coral)}
.notice{padding:1rem;border:1px solid rgba(233,189,98,.48);background:#fff8df;border-radius:18px;color:#5e4610}.notice.blue{border-color:rgba(102,212,223,.52);background:var(--cj-aqua-soft);color:var(--cj-blue-900)}.notice.coral{border-color:rgba(255,122,89,.36);background:var(--cj-coral-soft);color:#81371f}
form{background:var(--cj-panel);border:1px solid var(--cj-line);border-radius:26px;padding:1.15rem;box-shadow:var(--cj-soft)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:900;color:var(--cj-blue-950);margin:.85rem 0 .35rem}
input,select,textarea{width:100%;border:1px solid rgba(16,35,58,.17);border-radius:16px;padding:.9rem 1rem;background:#fff;color:var(--cj-ink);font:inherit}textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(102,212,223,.32);border-color:var(--cj-blue-600)}
.status{margin-top:1rem;padding:1rem;border-radius:16px;background:var(--cj-aqua-soft);color:var(--cj-blue-900);font-weight:850;display:none;white-space:pre-wrap}.status.err{background:#ffe8e3;color:#8f2f20}.status.ok{background:#e8f9ef;color:#166443}
.table-wrap{overflow:auto}table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--cj-line);border-radius:18px;overflow:hidden;box-shadow:var(--cj-soft)}th,td{padding:.8rem .9rem;border-bottom:1px solid rgba(16,35,58,.08);text-align:left;vertical-align:top}th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;background:#f1fbfd;color:var(--cj-blue-900)}tr:last-child td{border-bottom:0}
.badge{display:inline-flex;border-radius:999px;padding:.3rem .55rem;font-weight:900;background:var(--cj-aqua-soft);color:var(--cj-blue-900)}
pre{background:var(--cj-blue-950);color:#e8fbff;border-radius:18px;padding:1rem;overflow:auto;box-shadow:var(--cj-soft)}
.footer{padding:2rem 0;margin-top:3rem;border-top:1px solid var(--cj-line);color:var(--cj-muted)}.small{font-size:.92rem}.muted{color:var(--cj-muted)}
.split-clean{display:grid;grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr);gap:clamp(1rem,3vw,2rem);align-items:start}
.search-controls{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:.8rem;align-items:end}.search-result{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.auth-shell{max-width:920px;margin:1.35rem auto 2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}.auth-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.auth-tabs button{box-shadow:none}.auth-tabs button:not(.active){background:rgba(255,255,255,.94)!important;color:var(--cj-ink)!important;border:1px solid var(--cj-line)}
.account-panel{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:980px){.hero,.grid-2,.grid-3,.grid-4,.steps,.split-clean,.search-controls,.search-result,.auth-shell,.account-panel{grid-template-columns:1fr}.nav{align-items:flex-start;flex-direction:column}.navlinks{width:100%;justify-content:flex-start}.art{min-height:280px}.art svg,.art img{min-height:280px}}
@media(max-width:620px){.shell{padding:0 .9rem}.navlinks a{padding:.52rem .62rem;font-size:.92rem}.brand span:last-child{font-size:1.28rem}.mark{width:42px;height:42px}h1{font-size:2.3rem}.hero{padding:1rem;border-radius:24px}.form-grid{grid-template-columns:1fr}.card,form{border-radius:20px}}