:root{
  --serobase-navy:#07111f;
  --serobase-navy-2:#0b1727;
  --serobase-orange:#ff5b35;
  --serobase-ink:#0b1320;
  --serobase-muted:#667386;
  --serobase-soft:#f4f6f8;
  --serobase-line:#e3e8ee;
}

html{background:var(--serobase-soft);color:var(--serobase-ink);font-family:Raleway,Arial,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:radial-gradient(circle at 88% 3%,rgba(255,91,53,.07),transparent 24%),var(--serobase-soft);min-height:100vh;-webkit-font-smoothing:antialiased}

.portal-topbar{min-height:82px;background:rgba(7,17,31,.97);border-bottom:1px solid rgba(255,255,255,.08);padding:0 max(24px,calc((100vw - 1240px)/2));box-shadow:0 10px 35px rgba(3,14,28,.08)}
.portal-brand{display:flex;align-items:center;gap:10px;font-size:1rem;letter-spacing:.09em;font-weight:900}
.portal-brand:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--serobase-orange);box-shadow:0 0 0 6px rgba(255,91,53,.10)}
.portal-brand span{font-size:.66rem;font-weight:800;color:#8292a5;text-transform:uppercase;letter-spacing:.1em;border-left:1px solid rgba(255,255,255,.12);padding-left:12px;margin-left:2px}
.portal-user{font-size:.78rem;color:#c8d1dc}
.portal-user button{border-radius:999px;border-color:rgba(255,255,255,.15);padding:9px 14px;font-weight:800}

.portal-shell{width:min(1240px,calc(100% - 48px));margin:48px auto 88px}
.portal-page-head{align-items:flex-end;margin-bottom:32px}
.portal-page-head h1,.portal-login-card h1{font-size:clamp(2.8rem,5vw,5.2rem);line-height:.93;letter-spacing:-.055em;font-weight:620;color:var(--serobase-ink);margin:9px 0 14px}
.portal-page-head p,.portal-login-card p{color:var(--serobase-muted);line-height:1.72;max-width:720px}
.portal-kicker,.portal-section-head span{font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--serobase-orange)}
.portal-kicker:before,.portal-section-head span:before{content:"";display:inline-block;width:24px;height:2px;background:var(--serobase-orange);vertical-align:middle;margin-right:9px}

.portal-card,.portal-section,.portal-login-card{border:1px solid var(--serobase-line);border-radius:22px;box-shadow:0 18px 52px rgba(7,17,31,.055);background:#fff}
.portal-card{padding:28px;min-height:180px}
.portal-card h2{font-size:1.45rem;letter-spacing:-.035em;margin:12px 0 8px;color:var(--serobase-ink)}
.portal-card p{color:var(--serobase-muted)}
.portal-status{font-size:.65rem;letter-spacing:.1em;color:#7c8998}
.portal-section{padding:30px;margin-bottom:20px}
.portal-section-head{margin-bottom:26px}
.portal-section-head h2{font-size:1.8rem;letter-spacing:-.035em;color:var(--serobase-ink)}
.portal-section-head small{color:var(--serobase-muted)}

.portal-button,button{border-radius:999px;min-height:43px;padding:10px 17px;font-size:.78rem;font-weight:850;transition:.18s ease}
.portal-button:hover,button:hover{transform:translateY(-1px)}
.portal-button.primary,.portal-savebar button,.portal-login-card button,.portal-section form>button{background:var(--serobase-orange);color:#fff;border-color:var(--serobase-orange);box-shadow:0 12px 30px rgba(255,91,53,.18)}
.portal-button:not(.primary){background:#fff;border-color:#dfe5eb;color:var(--serobase-ink)}

label{font-size:.76rem;color:#46566a;font-weight:850}
input,textarea{border:1px solid #d9e0e7;border-radius:12px;padding:13px 14px;background:#fbfcfd;color:var(--serobase-ink)}
input:focus,textarea:focus{outline:none;border-color:var(--serobase-orange);box-shadow:0 0 0 3px rgba(255,91,53,.10);background:#fff}
.image-preview{border-color:var(--serobase-line);border-radius:16px;background:#f8fafc}
.image-preview.hero img{border-radius:13px}

.portal-savebar{background:linear-gradient(135deg,#07111f,#0b1727);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:17px 20px;box-shadow:0 24px 60px rgba(7,17,31,.24)}
.portal-savebar span{color:#aeb9c6}
.portal-savebar button{background:var(--serobase-orange);color:#fff}

.portal-login-card{width:min(500px,calc(100% - 32px));padding:38px 40px;margin:10vh auto 0}
.portal-login-card:before{content:"SEROBASE";display:block;font-size:.9rem;letter-spacing:.11em;font-weight:900;color:var(--serobase-ink);margin-bottom:34px}
.portal-login-card:after{content:"";position:absolute}
.portal-login-card button{min-height:48px}
.portal-alert{border-radius:14px}
.portal-empty{border-radius:20px;background:#fff;color:var(--serobase-muted)}

@media(max-width:850px){
  .portal-topbar{padding:0 18px}
  .portal-shell{width:min(100% - 28px,1240px);margin-top:30px}
  .portal-page-head h1,.portal-login-card h1{font-size:2.65rem}
  .portal-card,.portal-section{padding:22px}
  .portal-login-card{padding:30px 24px}
}