:root { color-scheme: dark; --bg:#08090d; --surface:#10121a; --surface-2:#171a25; --line:#292d3c; --text:#f4f5ff; --muted:#a2a7ba; --dim:#7c8297; --accent:#7c7cff; --accent-ink:#09091b; --warn:#ffc083; --danger:#f47777; --ok:#8ef0ba; font-family:"Avenir Next", Avenir, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } html { background:var(--bg); } body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 86% -12%,rgba(124,124,255,.16),transparent 32rem),var(--bg); } button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(124,124,255,.46); outline-offset:2px; }
.shell { width:min(1120px,calc(100% - 2rem)); margin:0 auto; padding:clamp(1.5rem,5vw,4rem) 0 3rem; }.login-view { width:min(390px,100%); margin:10vh auto; }.brand-mark { display:flex; gap:5px; margin-bottom:1.3rem; }.brand-mark span,.brand-dot { display:block; width:11px; height:11px; border-radius:3px; background:var(--accent); }.brand-mark span:nth-child(2) { opacity:.66; }.brand-mark span:nth-child(3) { opacity:.32; }.login-view h1,.topbar h1 { margin:0; letter-spacing:-.045em; line-height:1.05; }.login-view h1 { font-size:clamp(2.2rem,6vw,3.2rem); }.login-view p { color:var(--muted); }.login-form { display:grid; gap:.8rem; margin-top:2rem; padding:1.15rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 14px 34px rgba(0,0,0,.32); }
label { display:grid; gap:.42rem; color:var(--muted); font-size:.82rem; font-weight:650; } input,select { min-height:45px; padding:.65rem .75rem; color:var(--text); border:1px solid var(--line); border-radius:8px; background:#0c0e15; } input::placeholder { color:var(--dim); }.button { min-height:44px; padding:.65rem .95rem; border:1px solid transparent; border-radius:8px; font-weight:750; transition:background .16s ease,transform .16s ease,border-color .16s ease; }.button:hover { transform:translateY(-1px); }.button--primary { background:var(--accent); color:var(--accent-ink); }.button--primary:disabled { opacity:.55; cursor:wait; transform:none; }.button--quiet { background:transparent; border-color:var(--line); color:var(--text-muted,var(--muted)); }.button--quiet:hover { border-color:var(--accent); color:var(--text); background:rgba(124,124,255,.1); }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); }.topbar h1 { font-size:clamp(1.8rem,4vw,2.6rem); }.brand-line { display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; color:var(--muted); font-size:.8rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }.brand-dot { width:8px; height:8px; border-radius:2px; }.notice { margin-top:1rem; padding:.85rem 1rem; border:1px solid rgba(255,192,131,.5); border-radius:10px; color:var(--warn); background:rgba(240,163,94,.1); font-size:.9rem; }.create-panel { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.6fr); gap:2rem; margin:1.5rem 0 2.5rem; padding:1.35rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 12px 28px rgba(0,0,0,.22); }.create-panel h2,.tenant-section h2,dialog h2 { margin:0; letter-spacing:-.03em; }.create-panel p,.dialog-head p,.dialog-note { color:var(--muted); font-size:.88rem; line-height:1.45; }.tenant-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }.tenant-form .form-error,.tenant-form .button { grid-column:1/-1; justify-self:start; }.section-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; }.tenant-list { display:grid; gap:.65rem; }.empty { padding:1.5rem 0; color:var(--muted); border-top:1px solid var(--line); }.tenant { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:12px; background:rgba(16,18,26,.76); }.tenant__name { margin:0; font-size:1rem; }.tenant__meta { display:flex; flex-wrap:wrap; gap:.45rem .7rem; margin:.3rem 0 0; color:var(--muted); font-size:.78rem; }.tenant__meta a { color:#b1b1ff; }.tenant__error { margin:.6rem 0 0; color:var(--danger); font-size:.8rem; }.status { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:6px; background:rgba(124,124,255,.13); color:#b1b1ff; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }.status::before { content:''; width:.4rem; height:.4rem; border-radius:50%; background:currentColor; }.status--active { color:var(--ok); background:rgba(142,240,186,.1); }.status--failed { color:var(--danger); background:rgba(244,119,119,.1); }.status--pending_kapso { color:var(--warn); background:rgba(240,163,94,.11); }.tenant__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }.button--danger { color:var(--danger); border-color:rgba(244,119,119,.42); }.form-error { margin:0; color:var(--danger); font-size:.84rem; }dialog { width:min(510px,calc(100% - 2rem)); padding:1.2rem; color:var(--text); border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 24px 64px rgba(0,0,0,.65); }dialog::backdrop { background:rgba(0,0,0,.64); backdrop-filter:blur(3px); }.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }.dialog-head p { margin:.35rem 0 0; }.icon-button { width:38px; height:38px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:transparent; font-size:1.5rem; line-height:1; }.credential { display:grid; gap:.35rem; margin:.7rem 0; padding:.75rem; border:1px solid var(--line); border-radius:9px; background:#0c0e15; }.credential span { color:var(--muted); font-size:.76rem; }.credential code { overflow-wrap:anywhere; color:var(--ok); }#kapso-form { display:grid; gap:.8rem; }.dialog-note { margin:.2rem 0; }
@media (max-width:700px) { .shell { width:min(100% - 1.25rem,1120px); padding-top:1.25rem; }.create-panel { grid-template-columns:1fr; gap:1rem; padding:1rem; }.tenant-form { grid-template-columns:1fr; }.tenant { grid-template-columns:1fr; }.tenant__actions { justify-content:flex-start; }.topbar { align-items:center; }.topbar h1 { font-size:1.75rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }