:root { --bg:#05070b; --panel:#0d141e; --text:#f5f7fa; --muted:#aab6c6; --ice:#71d6ff; --amber:#f2a93b; --line:rgba(159,205,232,.16); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; }
.login-shell { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 100vh; }
.intro { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 7vw, 6rem); background: radial-gradient(circle at 10% 30%, rgba(45,184,238,.2), transparent 45%), linear-gradient(145deg, #07111a, #05070b 70%); border-right: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .8rem; width: fit-content; text-decoration: none; }
.brand > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(113,214,255,.55); border-radius: 50%; color: var(--ice); font-size: .75rem; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand small { color: var(--amber); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { color: var(--amber); font-size: .76rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0 0 1.4rem; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .98; letter-spacing: -.055em; }
.intro > div > p:last-child { max-width: 650px; color: var(--muted); font-size: 1.1rem; }
.back-link { color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ice); }
.login-panel { display: grid; place-items: center; padding: 2rem; }
.panel-card { width: min(440px, 100%); padding: clamp(1.5rem, 5vw, 3rem); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.36); }
.panel-card h2 { margin: 1.2rem 0 .4rem; font-size: 2.2rem; }
.muted, .security-note { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: .55rem; margin: 0; color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(242,169,59,.7); }
form { display: grid; gap: .65rem; margin-top: 1.8rem; }
label { margin-top: .7rem; font-size: .86rem; font-weight: 700; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 3px; padding: .85rem 1rem; background: #080d14; color: var(--text); font: inherit; }
input:focus, select:focus { outline: 2px solid rgba(113,214,255,.45); border-color: var(--ice); }
button { margin-top: .9rem; border: 0; border-radius: 3px; padding: .9rem 1rem; background: var(--ice); color: #041019; font: inherit; font-weight: 800; cursor: pointer; }
button:hover { background: #a0e5ff; }
.notice { margin-top: 1.2rem; padding: .85rem 1rem; border-left: 3px solid var(--amber); background: rgba(242,169,59,.08); color: #f6dcae; }
.security-note { margin: 1.2rem 0 0; font-size: .78rem; }
.setup-hint { margin: 1rem 0 0; font-size: .8rem; color: var(--muted); }
.setup-hint a, .text-link { color: var(--ice); }
.field-help { display: flex; justify-content: flex-end; margin-top: .1rem; }
.field-help a { color: var(--ice); font-size: .8rem; text-decoration: none; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem max(1.25rem, calc((100vw - 1180px)/2)); border-bottom: 1px solid var(--line); }
.dashboard-header nav { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .9rem; }
.dashboard-header nav a { color: var(--ice); text-decoration: none; }
.dashboard { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto; padding: 6rem 0; }
.dashboard h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3rem; background: var(--line); border: 1px solid var(--line); }
.dashboard-grid section { min-height: 190px; padding: 2rem; background: var(--panel); }
.dashboard-grid h2 { margin-top: 0; }
.dashboard-grid p { color: var(--muted); }
.card-number { color: var(--ice); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.card-state { display: inline-block; margin-top: 1rem; color: var(--amber); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.project-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--panel); border: 1px solid var(--line); }
.project-strip small, .project-strip strong { display: block; }
.project-strip small { color: var(--muted); letter-spacing: .12em; }
.project-strip strong { font-size: 1.25rem; }
.project-overview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 2rem 0 3rem; }
.project-card { padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); }
.project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.project-card h2 { margin: .15rem 0 0; font-size: 1.55rem; }
.project-card small { color: var(--amber); font-weight: 800; letter-spacing: .12em; }
.project-card p { color: var(--muted); }
.badge { display: inline-flex; padding: .25rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); background: rgba(242,169,59,.1); border: 1px solid rgba(242,169,59,.25); }
.badge-active { color: #8bf1bd; background: rgba(70,207,139,.1); border-color: rgba(70,207,139,.25); }
.badge-suspended { color: #ff9797; background: rgba(255,94,94,.1); border-color: rgba(255,94,94,.25); }
.responsibility { margin-top: 2rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--amber); background: rgba(242,169,59,.06); }
.responsibility p { margin-bottom: 0; color: var(--muted); }
.simple-body { min-height: 100vh; background: radial-gradient(circle at 20% 10%, rgba(45,184,238,.14), transparent 35%), var(--bg); }
.form-page { width: min(620px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 6rem; }
.form-card { margin-top: 3rem; padding: clamp(1.5rem,5vw,3rem); background: var(--panel); border: 1px solid var(--line); }
.form-card h1 { font-size: clamp(2.5rem,7vw,4.4rem); }
.form-card p { color: var(--muted); }
.button-link { display: inline-block; margin-top: 1rem; padding: .85rem 1.1rem; background: var(--ice); color: #041019; text-decoration: none; font-weight: 800; }
.success-box { padding: 1rem; border-left: 3px solid #65d99f; background: rgba(70,207,139,.08); color: #b9f4d5; }
.check-row { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1rem; font-weight: 400; }
.check-row input { width: auto; margin-top: .35rem; }
.check-row a { color: var(--ice); }
.admin-dashboard h1 { margin-bottom: .6rem; }
.admin-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.admin-shield { padding: .55rem .8rem; color: var(--ice); border: 1px solid rgba(113,214,255,.4); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.admin-section { margin-top: 2rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--line); }
.admin-section h2 { margin: 0; font-size: 1.6rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.section-heading > span { color: var(--muted); }
.customer-list article { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.customer-list p { margin: .2rem 0 0; color: var(--muted); }
.customer-meta { display: grid; justify-items: end; gap: .35rem; }
.customer-meta small { color: var(--muted); }
.small-button { margin: 0; padding: .55rem .75rem; font-size: .78rem; }
.small-button.danger { color: #ffd1d1; background: rgba(255,94,94,.18); }
.small-button.danger:hover { background: rgba(255,94,94,.3); }
.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.invite-result { margin: 2rem 0; padding: 1.4rem; border: 1px solid rgba(113,214,255,.35); background: rgba(113,214,255,.06); }
.copy-line { display: flex; gap: .6rem; margin: .8rem 0; }
.copy-line input { flex: 1; }
.copy-line button { width: auto; margin: 0; }
.invite-result small { color: var(--muted); }
.audit-list > div { display: grid; gap: .1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.audit-list span { color: var(--muted); font-size: .8rem; }
.empty-state { padding: 2rem 0; color: var(--muted); }
.account-dashboard { max-width: 1000px; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.button-link.compact { margin-top: .6rem; padding: .65rem .85rem; font-size: .85rem; }
.domain-dashboard { max-width: 1050px; }
.domain-dashboard .lead { max-width: 760px; }
.project-switch { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }
.project-switch a { padding: .55rem .8rem; border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.project-switch a:hover, .project-switch a.active { border-color: var(--ice); color: var(--ice); background: rgba(113,214,255,.07); }
.domain-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.fine-print { color: var(--muted); font-size: .78rem; }
.request-list article, .admin-request-list article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.request-list article > div { display: grid; }
.request-list small, .admin-request-list small { display: block; color: var(--muted); }
.availability { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.availability-available { color: #8bf1bd; }
.availability-unavailable { color: #ff9797; }
.availability-unknown, .availability-unchecked { color: var(--amber); }
.inline-status { display: grid; grid-template-columns: minmax(140px,1fr) auto; align-items: center; gap: .6rem; margin: 0; }
.inline-status select { padding: .55rem .65rem; }
.registration-form { margin-top: 2rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.registration-orders { display: grid; gap: 1rem; }
.registration-orders > article { padding: 1.25rem; border: 1px solid var(--line); background: #080d14; }
.order-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.order-title strong { font-size: 1.15rem; }
.order-title small { display: block; color: var(--muted); }
.registration-orders dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.2rem 0; }
.registration-orders dl div { padding-top: .7rem; border-top: 1px solid var(--line); }
.registration-orders dt { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.registration-orders dd { margin: .3rem 0 0; }
.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 820px) { .login-shell { grid-template-columns: 1fr; } .intro { min-height: 48vh; gap: 3rem; border-right: 0; border-bottom: 1px solid var(--line); } .dashboard-grid, .admin-columns, .project-overview { grid-template-columns: 1fr; } .admin-columns { gap: 0; } .customer-list article { grid-template-columns: 1fr; } .customer-meta { justify-items: start; } .dashboard-header nav span { display: none; } .copy-line { flex-direction: column; } .admin-title { align-items: center; } }
@media (max-width: 820px) { .account-grid, .domain-columns, .form-grid, .registration-orders dl, .order-actions { grid-template-columns: 1fr; gap: 0; } .form-grid .full { grid-column: auto; } .dashboard-header nav { gap: .7rem; font-size: .8rem; } .request-list article, .admin-request-list article { align-items: flex-start; flex-direction: column; } .inline-status { width: 100%; } }