:root{
    --portal-bg-1:#06111f;
    --portal-bg-2:#0b1f39;
    --portal-bg-3:#12365e;
    --portal-card:rgba(8,18,36,0.82);
    --portal-card-2:rgba(255,255,255,0.04);
    --portal-line:rgba(255,255,255,0.10);
    --portal-line-2:rgba(255,255,255,0.08);
    --portal-text:#eef4ff;
    --portal-muted:#b7c6de;
    --portal-soft:#8ea7ca;
    --portal-primary:#4f8dff;
    --portal-primary-2:#78c3ff;
    --portal-success:#3dc76b;
    --portal-danger:#ff7b7b;
    --portal-gold:#d2b48c;
    --portal-shadow:0 22px 60px rgba(0,0,0,.28);
    --portal-radius-xl:28px;
    --portal-radius-lg:22px;
    --portal-radius-md:18px;
    --portal-radius-sm:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--portal-text);
    background:
        radial-gradient(circle at top right, rgba(120,195,255,.13), transparent 28%),
        radial-gradient(circle at 20% 80%, rgba(79,141,255,.12), transparent 25%),
        linear-gradient(180deg, var(--portal-bg-1) 0%, var(--portal-bg-2) 46%, var(--portal-bg-3) 100%);
}
a{color:inherit}
img{max-width:100%;height:auto}
.portal-shell{position:relative;min-height:100vh;overflow-x:hidden}
.portal-glow{position:fixed;border-radius:999px;pointer-events:none;filter:blur(90px);opacity:.22;z-index:0}
.portal-glow-a{width:320px;height:320px;top:90px;left:-80px;background:rgba(79,141,255,.32)}
.portal-glow-b{width:360px;height:360px;right:-100px;bottom:80px;background:rgba(120,195,255,.24)}
.btn,.btn:link,.btn:visited,.btn--primary,.btn--secondary,.btn--block,.portal-btn,.portal-btn--ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 16px;
    border-radius:14px;border:1px solid rgba(255,255,255,.10);text-decoration:none;font-size:14px;font-weight:800;line-height:1;
    cursor:pointer;transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover,.btn--primary:hover,.btn--secondary:hover,.portal-btn:hover,.portal-btn--ghost:hover{transform:translateY(-1px)}
.btn--primary,.portal-btn{
    background:linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-2) 100%);
    border-color:transparent;color:#fff;box-shadow:0 14px 34px rgba(79,141,255,.22)
}
.btn--secondary,.portal-btn--ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:#eef4ff}
.btn--block{width:100%}
.portal-form{display:flex;flex-direction:column;gap:16px}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field span{font-size:13px;font-weight:800;color:#dce7f8}
.form-field input,.form-field select,.form-field textarea{
    width:100%;min-height:50px;padding:14px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);color:#fff;font-size:15px;outline:none
}
.form-field textarea{min-height:120px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:#9db2d2}
.alert{padding:14px 16px;border-radius:14px;line-height:1.6;font-size:14px}
.alert--error{background:rgba(255,123,123,.14);border:1px solid rgba(255,123,123,.35);color:#ffd5d5}
.alert--warning{background:rgba(255,194,92,.12);border:1px solid rgba(255,194,92,.28);color:#ffe3b1}
html[data-theme="light"] body,body.light{
    color:#17365a;
    background:
      radial-gradient(circle at top right, rgba(120,195,255,.12), transparent 28%),
      radial-gradient(circle at 20% 80%, rgba(79,141,255,.10), transparent 24%),
      linear-gradient(180deg, #edf5ff 0%, #dbeafe 44%, #cfe0f6 100%);
}
html[data-theme="light"] .btn--secondary,
html[data-theme="light"] .form-field input,
html[data-theme="light"] .form-field select,
html[data-theme="light"] .form-field textarea,
html[data-theme="light"] .portal-btn--ghost,
body.light .btn--secondary,
body.light .form-field input,
body.light .form-field select,
body.light .form-field textarea,
body.light .portal-btn--ghost{
    background:rgba(255,255,255,.88);border-color:rgba(69,120,188,.12);color:#294c73
}
html[data-theme="light"] .form-field span, body.light .form-field span{color:#294c73}
html[data-theme="light"] .form-field input::placeholder, html[data-theme="light"] .form-field textarea::placeholder,
body.light .form-field input::placeholder, body.light .form-field textarea::placeholder{color:#6f88a8}
@media (max-width:700px){
  .premium-login{width:min(100% - 16px, 680px);margin-top:18px}
}