@import url('/static/vendor/css/fonts.css');

:root {
    --bg:#ffffff;
    --text:#0b1020;
    --muted:#687386;
    --faint:#9aa5b5;
    --line:#e8edf4;
    --soft:#f7f9fc;
    --accent:#0ea5e9;
    --accent-2:#22d3ee;
    --danger:#dc2626;
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
    margin:0;
    background:#fff;
    color:var(--text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}

button, input { font:inherit; }
button:disabled {
    opacity:.55;
    cursor:wait;
}

.auth-body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(14,165,233,.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(14,165,233,.036) 1px, transparent 1px),
        radial-gradient(circle at 50% 44%, rgba(34,211,238,.16), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
    background-size:52px 52px, 52px 52px, auto, auto;
}

.auth-body::after {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.52;
    background:
        linear-gradient(180deg, transparent 0 9%, rgba(56,189,248,.32) 9.2%, transparent 9.6%) 12% 0 / 1px 280px no-repeat,
        linear-gradient(180deg, transparent 0 18%, rgba(56,189,248,.24) 18.2%, transparent 18.6%) 36% 0 / 1px 340px no-repeat,
        linear-gradient(180deg, transparent 0 11%, rgba(56,189,248,.28) 11.2%, transparent 11.6%) 70% 0 / 1px 300px no-repeat,
        radial-gradient(circle, rgba(34,211,238,.55) 0 2px, transparent 2.5px) 8% 12% / 100% 100% no-repeat,
        radial-gradient(circle, rgba(34,211,238,.5) 0 2px, transparent 2.5px) 82% 16% / 100% 100% no-repeat,
        radial-gradient(circle, rgba(34,211,238,.38) 0 2px, transparent 2.5px) 58% 27% / 100% 100% no-repeat;
}

.login-shell {
    position:relative;
    z-index:1;
    min-height:100vh;
    width:min(432px, calc(100% - 48px));
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:clamp(80px, 15.5vh, 104px) 0 26px;
}

.login-brand {
    min-width:0;
    text-align:center;
}

.brand-row {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
}

.brand-mark {
    width:74px;
    height:74px;
    flex:0 0 74px;
    color:#16b9d5;
    filter:drop-shadow(0 12px 20px rgba(34,211,238,.18));
}

.brand-mark svg {
    width:100%;
    height:100%;
    display:block;
}

.brand-mark .corner {
    fill:none;
    stroke:#19bdd8;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.brand-mark .infinity {
    fill:none;
    stroke:#18b8d7;
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-brand h1 {
    margin:0;
    color:#1d2636;
    font-size:50px;
    line-height:1;
    letter-spacing:0;
    font-weight:950;
}

.login-tagline {
    margin:18px 0 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:17px;
    color:#8794aa;
    font-size:16px;
    line-height:1.2;
    letter-spacing:.26em;
    font-weight:800;
}

.login-tagline span {
    width:40px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, rgba(34,211,238,.76), transparent);
}

.tech-visual {
    position:relative;
    height:156px;
    margin:22px auto 22px;
    width:min(432px, 100%);
    overflow:hidden;
    opacity:.9;
}

.tech-grid {
    position:absolute;
    left:50%;
    bottom:0;
    width:380px;
    height:210px;
    transform:translateX(-50%) rotateX(64deg) rotateZ(45deg);
    transform-origin:center bottom;
    border:1px solid rgba(34,211,238,.16);
    background:
        linear-gradient(90deg, rgba(34,211,238,.2) 1px, transparent 1px),
        linear-gradient(180deg, rgba(34,211,238,.2) 1px, transparent 1px);
    background-size:30px 30px;
    box-shadow:0 0 30px rgba(34,211,238,.08);
}

.tech-platform {
    position:absolute;
    left:50%;
    bottom:34px;
    width:118px;
    height:82px;
    transform:translateX(-50%) rotateX(58deg) rotateZ(45deg);
    transform-origin:center;
    border:2px solid rgba(34,211,238,.45);
    box-shadow:0 0 0 12px rgba(34,211,238,.08), 0 0 38px rgba(34,211,238,.2);
}

.tech-platform i {
    position:absolute;
    inset:12px;
    border:1px solid rgba(34,211,238,.35);
}

.tech-platform i:nth-child(2) { inset:24px; }
.tech-platform i:nth-child(3) { inset:36px; }
.tech-platform i:nth-child(4) { inset:48px; }

.tech-platform b {
    position:absolute;
    left:50%;
    top:50%;
    width:9px;
    height:9px;
    border-radius:999px;
    background:#28c8e5;
    transform:translate(-50%, -50%);
    box-shadow:0 0 24px rgba(34,211,238,.8);
}

.tech-cube {
    position:absolute;
    left:50%;
    top:8px;
    width:78px;
    height:78px;
    transform:translateX(-50%);
    border:1px solid rgba(34,211,238,.22);
    opacity:.82;
}

.tech-cube::before,
.tech-cube::after,
.tech-cube span {
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(34,211,238,.2);
    transform:translate(18px, 12px);
}

.tech-cube::after { transform:translate(-18px, 12px); }
.tech-cube span:nth-child(1) { transform:translate(0, -14px) scale(.72); }
.tech-cube span:nth-child(2) { transform:translate(0, 26px) scale(.72); }
.tech-cube span:nth-child(3) { display:none; }

.login-card {
    width:100%;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
}

.card-head {
    display:none;
}

.login-form {
    display:flex;
    flex-direction:column;
    gap:16px;
}

.login-field {
    height:54px;
    display:flex;
    align-items:center;
    gap:15px;
    border:1px solid #dfe5ee;
    border-radius:5px;
    background:rgba(255,255,255,.9);
    padding:0 22px;
    color:#9aa6b8;
    box-shadow:0 2px 8px rgba(15,23,42,.035), inset 0 0 0 1px rgba(255,255,255,.8);
    transition:border-color .16s ease, box-shadow .16s ease;
}

.login-field:focus-within {
    border-color:#7dd9ea;
    box-shadow:0 0 0 4px rgba(34,211,238,.12), 0 6px 18px rgba(15,23,42,.06);
}

.field-icon {
    width:22px;
    height:22px;
    flex:0 0 22px;
    color:#9aa6b8;
}

.login-form input {
    width:100%;
    min-width:0;
    height:100%;
    border:0;
    background:transparent;
    color:#1f2937;
    outline:none;
    padding:0;
    font-size:16px;
    font-weight:750;
}

.login-form input::placeholder {
    color:#b4bdca;
    font-weight:750;
}

.password-toggle {
    flex:0 0 28px;
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:#98a3b5;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.password-toggle svg {
    width:21px;
    height:21px;
}

.password-toggle .eye-on { display:none; }
.password-toggle.is-visible .eye-off { display:none; }
.password-toggle.is-visible .eye-on { display:block; }

.login-options {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 4px;
}

.remember-row {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#717d91;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    user-select:none;
}

.remember-row input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.remember-row span {
    width:22px;
    height:22px;
    border:1px solid #d8e0ea;
    border-radius:5px;
    background:#fff;
    box-shadow:inset 0 0 0 2px #fff;
}

.remember-row input:checked + span {
    background:#18bdda;
    border-color:#18bdda;
}

.forgot-btn {
    border:0;
    padding:0;
    background:transparent;
    color:#12b9d8;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}

.login-submit {
    height:52px;
    border:0;
    border-radius:5px;
    background:linear-gradient(180deg, #25c3db, #13adcf);
    color:#fff;
    font-size:18px;
    font-weight:900;
    cursor:pointer;
    letter-spacing:.04em;
    box-shadow:0 12px 26px rgba(20,173,207,.22);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.login-submit:hover {
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(20,173,207,.3);
    filter:saturate(1.06);
}

.login-submit:disabled {
    opacity:.58;
    cursor:wait;
    transform:none;
}

.login-status {
    min-height:20px;
    color:var(--danger);
    font-size:13px;
    line-height:1.5;
    font-weight:850;
    text-align:center;
}

.login-status.ok { color:#0284c7; }

.admin-body {
    min-height:100vh;
    background:#fff;
}

body.modal-open {
    overflow:hidden;
}

.admin-page {
    max-width:1260px;
    margin:0 auto;
    padding:38px 28px 72px;
}

.admin-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px;
    margin-bottom:28px;
}

.admin-head h1 {
    margin:0;
    font-size:28px;
    line-height:1.05;
    font-weight:950;
}

.admin-head p {
    margin:8px 0 0;
    color:var(--muted);
    font-size:13px;
    font-weight:650;
}

.admin-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.admin-btn {
    height:38px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    font-weight:850;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.admin-btn.primary { background:#0b1020; border-color:#0b1020; color:#fff; }
.admin-btn.danger { color:#b91c1c; border-color:#fecaca; }
.admin-btn:hover { border-color:#0b1020; transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,23,42,.08); }

.admin-page-status {
    min-height:22px;
    margin:-12px 0 14px;
    color:#0e7490;
    font-size:12px;
    font-weight:850;
}

.admin-page-status.error {
    color:var(--danger);
}

.admin-content {
    display:block;
}

.admin-panel {
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 16px 50px rgba(15,23,42,.05);
}

.admin-panel h2 { margin:0 0 14px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }

.admin-form { display:grid; gap:12px; }
.admin-form label { display:grid; gap:7px; }
.admin-form span { color:var(--muted); font-size:11px; font-weight:850; }
.admin-form input,
.admin-form select {
    height:40px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    padding:0 11px;
    color:var(--text);
    outline:none;
    font-size:13px;
    font-weight:700;
}
.admin-form input:focus,
.admin-form select:focus { border-color:#7dd3fc; box-shadow:0 0 0 3px rgba(14,165,233,.1); }
.admin-form .split { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.admin-status { min-height:18px; color:var(--muted); font-size:12px; font-weight:700; }
.admin-status.error { color:var(--danger); }

.account-table { width:100%; border-collapse:collapse; }
.account-table th,
.account-table td {
    padding:18px 22px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:middle;
    font-size:13px;
}
.account-table th {
    color:var(--faint);
    font-size:10px;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:#fbfcfe;
}
.account-name { font-weight:900; }
.account-sub { color:var(--muted); font-size:11px; margin-top:3px; }
.usage-cell {
    min-width:230px;
}
.usage-empty {
    display:inline-flex;
    height:28px;
    align-items:center;
    padding:0 10px;
    border:1px dashed #dbe4ef;
    border-radius:10px;
    color:#8a96a8;
    background:#fbfdff;
    font-size:11px;
    font-weight:850;
}
.usage-card {
    width:min(270px, 100%);
    border:1px solid #e5edf6;
    border-radius:12px;
    background:linear-gradient(180deg, #ffffff, #fbfdff);
    padding:9px 10px;
    box-shadow:0 8px 20px rgba(15,23,42,.035);
}
.usage-card + .usage-card {
    margin-top:7px;
}
.usage-card.error {
    border-color:#fecaca;
    background:#fff7f7;
}
.usage-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
}
.usage-top span {
    color:#0e7490;
    font-size:10px;
    font-weight:950;
    text-transform:uppercase;
}
.usage-top b {
    color:#64748b;
    font-size:10.5px;
    font-weight:850;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.usage-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px 8px;
}
.usage-grid span {
    color:#748197;
    font-size:10.5px;
    font-weight:800;
}
.usage-grid b {
    color:#0b1020;
    font-weight:950;
}
.usage-grid .warn b {
    color:#b91c1c;
}
.usage-error {
    color:#b91c1c;
    font-size:11px;
    line-height:1.4;
    font-weight:850;
}
.usage-time {
    margin-top:6px;
    color:#a0a9b8;
    font-size:10px;
    font-weight:750;
}
.role-chip,
.state-chip {
    display:inline-flex;
    align-items:center;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#f8fafc;
    font-size:10.5px;
    font-weight:900;
    color:var(--muted);
}
.role-chip.super { background:#f0f9ff; border-color:#bae6fd; color:#0369a1; }
.role-chip.company { background:#ecfeff; border-color:#a5f3fc; color:#0e7490; }
.state-chip.off { color:#b91c1c; border-color:#fecaca; background:#fff7f7; }
.row-actions { display:flex; gap:7px; justify-content:flex-end; }
.row-actions button {
    height:30px;
    padding:0 9px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    color:var(--text);
    font-size:11px;
    font-weight:850;
    cursor:pointer;
}
.row-actions button:hover { border-color:#0b1020; }
.row-actions button.danger { color:#b91c1c; }

.account-modal {
    position:fixed;
    inset:0;
    z-index:40;
    display:grid;
    place-items:center;
    padding:24px;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
}

.account-modal.is-open {
    opacity:1;
    pointer-events:auto;
}

.modal-backdrop {
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(8,15,30,.24);
    backdrop-filter:blur(10px);
}

.account-dialog {
    position:relative;
    z-index:1;
    width:min(520px, calc(100vw - 48px));
    height:min(520px, calc(100vh - 48px));
    border:1px solid rgba(226,232,240,.9);
    border-radius:18px;
    background:#fff;
    box-shadow:0 34px 90px rgba(15,23,42,.18);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transform:translateY(12px) scale(.98);
    transition:transform .18s ease;
}

.account-modal.is-open .account-dialog {
    transform:translateY(0) scale(1);
}

.modal-close {
    position:absolute;
    top:16px;
    right:16px;
    z-index:2;
    width:34px;
    height:34px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:#64748b;
    font-size:23px;
    line-height:1;
    cursor:pointer;
}

.modal-close:hover {
    border-color:#0b1020;
    color:#0b1020;
}

.modal-head {
    padding:26px 28px 14px;
    border-bottom:1px solid rgba(232,237,244,.72);
}

.modal-head h2 {
    margin:0;
    font-size:22px;
    line-height:1.1;
    font-weight:950;
    letter-spacing:0;
}

.modal-head p {
    margin:8px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:750;
}

.modal-form {
    min-height:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0;
}

.modal-scroll {
    flex:1;
    min-height:0;
    overflow:auto;
    padding:18px 28px;
    display:grid;
    gap:12px;
}

.modal-footer {
    padding:14px 28px 18px;
    border-top:1px solid rgba(232,237,244,.72);
    background:#fff;
}

.modal-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:2px;
}

.modal-actions .admin-btn {
    justify-content:center;
    height:42px;
}

@media (max-width:860px) {
    .login-shell { width:min(100% - 48px, 432px); padding:clamp(80px, 15.5vh, 104px) 0 26px; }
    .brand-row { gap:18px; }
    .brand-mark { width:64px; height:64px; flex-basis:64px; }
    .login-brand h1 { font-size:42px; }
    .login-tagline { font-size:13px; gap:11px; letter-spacing:.2em; }
    .login-tagline span { width:28px; }
    .tech-visual { height:150px; margin:18px auto 18px; width:min(100%, 432px); }
    .tech-grid { width:340px; height:190px; }
    .tech-platform { width:104px; height:74px; bottom:34px; }
    .tech-cube { width:68px; height:68px; top:16px; }
    .login-field { height:54px; padding:0 17px; }
    .login-form input,
    .remember-row,
    .forgot-btn { font-size:14px; }
    .login-submit { height:56px; font-size:16px; }
    .admin-head { align-items:flex-start; flex-direction:column; }
    .account-table { min-width:980px; }
    .admin-panel.table-wrap { overflow-x:auto; }
    .account-dialog {
        width:min(420px, calc(100vw - 28px));
        height:min(560px, calc(100vh - 28px));
    }
    .modal-head { padding:24px 22px 14px; }
    .modal-scroll { padding:16px 22px; }
    .modal-footer { padding:14px 22px 18px; }
}