/* ============ DOMA · Cashflow — фирменный стиль ============ */
@import url('https://fonts.googleapis.com/css2?family=Prata&family=Jost:wght@400;500;600;700&display=swap');

:root{
  /* brand */
  --forest:#0f1e1a;        /* тёмно-зелёный DOMA */
  --forest-2:#173830;      /* панельный зелёный */
  --pine:#2b6b58;          /* фирменный зелёный */
  --gold:#c8a45c;          /* золото */
  --gold-deep:#a8823a;
  --cream:#f4efe6;         /* крем на тёмном */
  --paper:#fdfcf9;         /* карточки */
  --page:#f6f2e9;          /* фон контента */
  --mint:#e5f2ec;
  /* ink */
  --ink-1:#182420; --ink-2:#4c564f; --ink-3:#8a8f85;
  --grid:#e7e1d2; --baseline:#cfc8b4; --ring:rgba(24,36,32,.10);
  /* charts (валидировано: CVD ΔE 14.5, норм. 23.2) */
  --ch-in:#17855c; --ch-in-pale:#a9d9c4; --ch-out:#c8a45c; --ch-out-pale:#e9dab7;
  --good:#0ca30c; --good-text:#1d6b1d; --warn:#c98500; --crit:#c23a3a;
  --radius:12px;
  font-size:15px;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:'Jost',system-ui,sans-serif; background:var(--page); color:var(--ink-1); min-height:100vh;}
h1,h2,h3,.serif{font-family:'Prata',serif; font-weight:400;}

/* ============ логин ============ */
.login-screen{position:fixed; inset:0; background:
  radial-gradient(1200px 700px at 80% -10%, #1d3a31 0%, transparent 60%),
  radial-gradient(900px 600px at -10% 110%, #16302a 0%, transparent 55%),
  var(--forest);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.login-box{width:100%; max-width:400px; text-align:center;}
.login-box .logo-svg{width:150px; margin:0 auto 10px; display:block}
.login-box .tag{color:var(--gold); font-size:12px; letter-spacing:.28em; text-transform:uppercase; margin-bottom:6px}
.login-box h1{color:var(--cream); font-size:26px; margin:14px 0 6px}
.login-box .sub{color:rgba(244,239,230,.6); font-size:14px; margin-bottom:28px}
.gold-line{width:56px; height:1px; background:var(--gold); margin:18px auto}
.login-card{background:rgba(244,239,230,.04); border:1px solid rgba(244,239,230,.14); border-radius:16px; padding:26px 26px 22px; backdrop-filter:blur(4px); text-align:left;}
.login-card label{display:block; color:rgba(244,239,230,.75); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:14px 0 6px}
.login-card input{width:100%; font:inherit; font-size:15px; color:var(--cream); background:rgba(15,30,26,.5); border:1px solid rgba(244,239,230,.22); border-radius:10px; padding:11px 13px; outline:none;}
.login-card input:focus{border-color:var(--gold)}
.login-btn{width:100%; margin-top:22px; font:inherit; font-size:15px; font-weight:600; letter-spacing:.04em; color:var(--forest); background:var(--gold); border:0; border-radius:10px; padding:12px; cursor:pointer;}
.login-btn:hover{background:#d4b26c}
.login-btn:disabled{opacity:.6; cursor:wait}
.login-err{color:#eb9a9a; font-size:13px; margin-top:12px; min-height:18px}
.login-foot{color:rgba(244,239,230,.35); font-size:12px; margin-top:22px}

/* ============ каркас ============ */
.app{display:none; min-height:100vh;}
.app.authed{display:flex}
.sidebar{width:230px; flex-shrink:0; background:var(--forest); color:var(--cream); padding:22px 12px 16px; display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh;}
.sidebar .logo-svg{width:112px; margin:2px 10px 4px;}
.sidebar .subbrand{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 10px 22px;}
.nav-btn{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; border-left:2px solid transparent; color:rgba(244,239,230,.72); font:inherit; font-size:14px; padding:9px 12px; border-radius:0 8px 8px 0; cursor:pointer;}
.nav-btn:hover{background:rgba(244,239,230,.07); color:var(--cream)}
.nav-btn.active{background:rgba(200,164,92,.12); color:var(--cream); border-left-color:var(--gold); font-weight:500}
.nav-btn .ico{width:18px; text-align:center; color:var(--gold); opacity:.9}
.sidebar .foot{margin-top:auto; font-size:12px; color:rgba(244,239,230,.45); padding:10px;}
.sidebar .foot .email{color:rgba(244,239,230,.7); word-break:break-all; margin-bottom:8px}
.linklike{background:none; border:0; color:var(--gold); font:inherit; font-size:12.5px; cursor:pointer; padding:0}
.linklike:hover{text-decoration:underline}

main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 26px; background:var(--paper); border-bottom:1px solid var(--grid); position:sticky; top:0; z-index:20;}
.topbar label{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:2px}
.topbar select,.topbar input{font:inherit; font-size:14px; padding:6px 9px; border:1px solid var(--baseline); border-radius:9px; background:#fff; color:var(--ink-1);}
.topbar .grow{flex:1}
.rate-note{font-size:12.5px; color:var(--ink-3)}
.content{padding:24px 26px 70px; max-width:1180px; width:100%; margin:0 auto;}
h1{font-size:22px; margin-bottom:5px; letter-spacing:.01em}
h2{font-size:17px; margin:28px 0 10px}
.page-sub{color:var(--ink-2); font-size:13.5px; margin-bottom:18px; max-width:820px}

/* ============ карточки ============ */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; margin:14px 0;}
.card{background:var(--paper); border:1px solid var(--ring); border-radius:var(--radius); padding:15px 17px;}
.card .k{font-size:12px; letter-spacing:.04em; color:var(--ink-2); margin-bottom:7px;}
.card .v{font-family:'Prata',serif; font-size:22px; letter-spacing:-.01em}
.card .v.small{font-size:19px}
.card .idr{font-size:12px; color:var(--ink-3); margin-top:3px; font-variant-numeric:tabular-nums}
.card .hint{font-size:11.5px; color:var(--ink-3); margin-top:7px; line-height:1.4}
.card.accent{border-top:3px solid var(--pine)}
.card.gold-card{border-top:3px solid var(--gold)}
.card.warn-card{border-top:3px solid var(--warn)}
.card.crit-card{border-top:3px solid var(--crit)}
.card.good-card{border-top:3px solid var(--ch-in)}
.panel{background:var(--paper); border:1px solid var(--ring); border-radius:var(--radius); padding:17px 19px; margin:14px 0;}
.panel h3{font-size:15px; margin-bottom:12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ============ таблицы ============ */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); text-align:left; font-weight:600; padding:8px 10px; border-bottom:1px solid var(--baseline); white-space:nowrap;}
td{padding:8px 10px; border-bottom:1px solid var(--grid); vertical-align:top;}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td .sub{display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px; font-variant-numeric:tabular-nums}
tr.total td{font-weight:700; border-top:2px solid var(--baseline); background:#f7f3e8}
.row-del{visibility:hidden; background:none; border:0; color:var(--crit); cursor:pointer; font-size:14px; padding:0 4px}
tr:hover .row-del{visibility:visible}

/* ============ бейджи ============ */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2.5px 9px; border-radius:99px; white-space:nowrap;}
.b-good{background:#e0efe6; color:#1d5c44}
.b-warn{background:#f6ecd4; color:#7a5200}
.b-muted{background:#eee9dc; color:var(--ink-2)}
.b-crit{background:#f6e0e0; color:#8f1f1f}
.b-info{background:var(--mint); color:#1d5c44}
.b-gold{background:#f3e8d2; color:#7d5f22}

/* ============ кнопки/формы ============ */
.btn{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:9px; border:1px solid var(--baseline); background:#fff; color:var(--ink-1); cursor:pointer;}
.btn:hover{border-color:var(--pine); color:var(--pine)}
.btn.primary{background:var(--pine); border-color:var(--pine); color:#fff}
.btn.primary:hover{background:#1f5949; color:#fff}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--forest)}
.btn.gold:hover{background:#d4b26c}
.btn.sm{padding:4px 10px; font-size:12.5px}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0 12px}
.modal-back{position:fixed; inset:0; background:rgba(15,30,26,.55); display:none; align-items:flex-start; justify-content:center; z-index:50; padding:6vh 16px;}
.modal-back.open{display:flex}
.modal{background:var(--paper); border-radius:16px; width:100%; max-width:480px; padding:22px 24px; box-shadow:0 24px 60px rgba(15,30,26,.4);}
.modal h3{font-size:17px; margin-bottom:16px}
.f-row{margin-bottom:12px}
.f-row label{display:block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); margin-bottom:4px; font-weight:600}
.f-row input,.f-row select,.f-row textarea{width:100%; font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--baseline); border-radius:9px; background:#fff;}
.f-row input:focus,.f-row select:focus{outline:none; border-color:var(--pine)}
.f-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.modal .actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}

/* ============ графики ============ */
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-bottom:10px}
.legend .li{display:inline-flex; align-items:center; gap:6px}
.legend .sw{width:12px; height:12px; border-radius:3px; display:inline-block}
.bars{display:flex; align-items:flex-end; gap:10px; height:190px; border-bottom:1px solid var(--baseline); padding:0 4px;}
.bar-group{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%;}
.bar{width:16px; min-height:1px; border-radius:4px 4px 0 0; cursor:default;}
.bar:hover{outline:2px solid #fff; box-shadow:0 0 0 3px rgba(43,107,88,.5)}
.x-labels{display:flex; gap:10px; padding:6px 4px 0;}
.x-labels div{flex:1; text-align:center; font-size:11.5px; color:var(--ink-3)}
.hbar-row{display:grid; grid-template-columns:200px 1fr 155px; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--grid);}
.hbar-row:last-child{border-bottom:0}
.hbar-row .name{font-size:13px;}
.hbar-row .name .t{display:block; font-size:11px; color:var(--ink-3)}
.hbar-track{position:relative; height:14px; background:#ece6d6; border-radius:4px; overflow:hidden;}
.hbar-fill{position:absolute; left:0; top:0; bottom:0; background:var(--pine); border-radius:4px 0 0 4px;}
.hbar-fill.over{background:var(--crit)}
.hbar-val{font-size:12px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
#tip{position:fixed; z-index:99; background:var(--forest); color:var(--cream); font-size:12px; line-height:1.5; padding:8px 11px; border-radius:9px; pointer-events:none; display:none; max-width:270px; border:1px solid rgba(200,164,92,.35)}
#tip b{color:var(--gold); font-weight:600}

/* ============ прочее ============ */
.muted{color:var(--ink-3); font-size:12.5px}
.pos{color:var(--good-text); font-weight:600}
.neg{color:var(--crit); font-weight:600}
.note{background:var(--mint); border:1px solid #cfe4d9; border-radius:10px; padding:11px 15px; font-size:13px; color:#1d4437; margin:12px 0; line-height:1.5}
.note.warn{background:#faf3df; border-color:#ecd9a8; color:#6b4e00}
.villa-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:10px}
.villa-card{background:var(--paper); border:1px solid var(--ring); border-radius:var(--radius); padding:14px 16px; cursor:pointer;}
.villa-card:hover{border-color:var(--gold)}
.villa-card .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px}
.villa-card .nm{font-family:'Prata',serif; font-size:14.5px}
.progress{height:8px; background:#ece6d6; border-radius:4px; overflow:hidden; margin:8px 0 4px}
.progress i{display:block; height:100%; background:var(--pine); border-radius:4px}
.kv{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); margin-top:3px}
.kv b{font-variant-numeric:tabular-nums; color:var(--ink-1); font-weight:600}
.section-head{display:flex; align-items:baseline; gap:12px; justify-content:space-between; flex-wrap:wrap; margin-top:8px}
.loading-screen{position:fixed; inset:0; background:var(--forest); color:var(--cream); display:flex; align-items:center; justify-content:center; z-index:90; font-size:14px; letter-spacing:.1em}