:root{
  --color-bg:#070b14;
  --color-panel:#0d1526;
  --color-photo:#141d31;
  --color-photo-2:#101828;
  --color-text:#e8ecf5;
  --color-border:#1e2b45;
  --color-accent:#2563eb;
  --color-accent-soft:#7aa2ff;
  --color-accent-strong:#1d4fd0;
  --color-accent-100:color-mix(in srgb, #2563eb 16%, transparent);
  --color-accent-300:color-mix(in srgb, #2563eb 45%, transparent);
  --color-neutral-600:#8a96b3;
  --color-neutral-700:#aab4cc;
  --font-heading:"Archivo",sans-serif;
  --font-body:"Archivo",sans-serif;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --ok:#34d399;
  --ok-bg:color-mix(in srgb, #34d399 14%, transparent);
  --warn:#f2b84b;
  --warn-bg:color-mix(in srgb, #f2b84b 14%, transparent);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);
  background-size:120px 120px;
}
a{color:var(--color-accent-soft);text-decoration:none}
a:hover{color:#a8c4ff}
input,select,textarea,button{font-family:inherit;font-size:14px}
input,select,textarea{color-scheme:dark}
::placeholder{color:#6c7d9e}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.app-shell{min-height:100vh;display:flex;flex-direction:column}

/* ---- header ---- */
.nav{display:flex;align-items:stretch;border-bottom:2px solid var(--color-border);background:var(--color-panel)}
.nav-brand{width:240px;display:flex;align-items:center;gap:10px;padding:0 20px;border-right:2px solid var(--color-border);flex-shrink:0}
.nav-brand .dot{width:16px;height:16px;background:var(--color-accent)}
.nav-brand .name{font-family:var(--font-heading);font-weight:700;font-size:17px;letter-spacing:-0.02em}
.nav-brand .name .accent{color:var(--color-accent-soft)}
.nav-body{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:0 20px;gap:16px;min-width:0}
.nav-user{display:flex;align-items:center;gap:10px;padding-left:14px;height:100%;flex-shrink:0}
.avatar{width:30px;height:30px;background:var(--color-border);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.nav-user .who{line-height:1.2}
.nav-user .who .n{font-size:13px;font-weight:600}
.nav-user .who .r{font-size:11px;opacity:.6;text-transform:uppercase;letter-spacing:.06em}
.btn-logout{border:2px solid var(--color-border);background:transparent;color:var(--color-text);padding:7px 12px;font-size:12px;font-weight:700}
.btn-logout:hover{border-color:var(--color-accent);color:#fff}

/* ---- body row: sidebar + main ---- */
.body-row{flex:1;display:flex;align-items:stretch;min-height:0}
.sidebar{width:240px;flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-panel);padding:16px 0;display:flex;flex-direction:column;gap:2px}
.sidebar a{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--color-text);opacity:.75;border-left:2px solid transparent}
.sidebar a .bullet{width:6px;height:6px;background:currentColor;flex-shrink:0}
.sidebar a:hover{opacity:1;background:color-mix(in srgb, var(--color-accent) 8%, transparent)}
.sidebar a.active{opacity:1;color:#fff;background:color-mix(in srgb, var(--color-accent) 16%, transparent);border-left-color:var(--color-accent)}

main.page{flex:1;min-width:0;padding:28px 32px 48px}

h1{font-family:var(--font-heading);font-weight:700;font-size:30px;letter-spacing:-0.03em;margin:0 0 4px}
h2{font-family:var(--font-heading);font-weight:700;font-size:20px;letter-spacing:-0.02em;margin:0 0 12px}
.subtitle{opacity:.65;font-size:13px;margin:0 0 var(--space-5)}
.hr{border:none;border-top:2px solid var(--color-border);margin:var(--space-5) 0}

/* ---- buttons ---- */
.btn{border:2px solid var(--color-border);background:transparent;color:var(--color-text);padding:9px 16px;font-size:13px;font-weight:700;text-align:left;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--color-accent);color:#fff}
.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{border-color:transparent;background:color-mix(in srgb, var(--color-accent) 10%, transparent)}
.btn-sm{padding:6px 10px;font-size:12px}
.btn-block{display:flex;width:100%;justify-content:flex-start}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- tags ---- */
.tag{display:inline-block;padding:3px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-soft);border-color:var(--color-accent-300)}
.tag-neutral{background:color-mix(in srgb, var(--color-border) 60%, transparent);color:var(--color-neutral-700);border-color:var(--color-border)}
.tag-ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, transparent)}
.tag-warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 40%, transparent)}

/* ---- cards / grid ---- */
.grid{display:grid;gap:2px;background:var(--color-border);border:2px solid var(--color-border)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 900px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.card{background:var(--color-panel);padding:var(--space-4)}
.stat{background:var(--color-panel);padding:20px}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin-bottom:8px}
.stat .v{font-family:var(--font-heading);font-size:32px;font-weight:700;letter-spacing:-0.03em}

.card-title{font-family:var(--font-heading);font-weight:700;font-size:15px;margin:0 0 4px}
.card-meta{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.card-body{font-size:13px;margin-top:8px}

.p-card{background:var(--color-panel);border:2px solid var(--color-border);padding:var(--space-4);display:flex;flex-direction:column;gap:8px}
.p-card .p-title{font-family:var(--font-heading);font-weight:700;font-size:16px;letter-spacing:-0.01em}
.p-card .p-addr{font-size:12px;opacity:.65}
.p-card .p-price{font-family:var(--font-heading);font-size:21px;font-weight:700;letter-spacing:-0.02em}
.p-card .p-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px}
.p-card .p-meta span{border:1px solid var(--color-border);padding:3px 8px}
.p-card .p-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:10px;border-top:2px solid var(--color-border)}

/* ---- table ---- */
table.table{width:100%;border-collapse:collapse;background:var(--color-panel);border:2px solid var(--color-border)}
table.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.6;padding:12px 14px;border-bottom:2px solid var(--color-border)}
table.table td{padding:12px 14px;border-bottom:1px solid var(--color-photo);font-size:13px;vertical-align:middle}
table.table tr:last-child td{border-bottom:none}
table.table tr:hover td{background:color-mix(in srgb, var(--color-accent) 5%, transparent)}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.input,select.input,textarea.input{border:2px solid var(--color-border);background:var(--color-panel);padding:9px 10px;font-size:14px;color:var(--color-text)}
.input:focus{outline:2px solid var(--color-accent);outline-offset:1px}
textarea.input{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-box{width:360px;background:var(--color-panel);border:2px solid var(--color-border);padding:32px}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.login-brand .dot{width:18px;height:18px;background:var(--color-accent)}
.login-brand .name{font-family:var(--font-heading);font-weight:700;font-size:19px;letter-spacing:-0.02em}
.err{background:var(--color-accent-100);border:1px solid var(--color-accent-300);color:var(--color-accent-soft);padding:8px 10px;font-size:13px;margin-bottom:14px}
.hint{font-size:12px;opacity:.5;margin-top:16px;line-height:1.5}

/* ---- misc ---- */
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:var(--space-5);flex-wrap:wrap;border-bottom:2px solid var(--color-border);padding-bottom:16px}
.toolbar h1{margin-bottom:0}
.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}
.empty{padding:40px 20px;text-align:left;opacity:.6;font-size:14px;background:var(--color-panel);border:2px dashed var(--color-border)}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:var(--space-5);align-items:flex-end}
.filters select,.filters input{width:auto}
.rentab-pos{color:var(--ok);font-weight:700}
.rentab-neg{color:#ff9783;font-weight:700}

.dialog-backdrop{position:fixed;inset:0;background:rgba(3,7,15,.7);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.dialog{background:var(--color-panel);border:2px solid var(--color-border);width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:28px}
.dialog-title{font-family:var(--font-heading);font-weight:700;font-size:19px;letter-spacing:-0.02em;margin:0 0 18px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

.badge-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}