/* Elianes CRM — styles
   Lifted wholesale from the approved "Saanen" design reference, then evolved:
   + third product colour for GSG (--gsg / --gsg-soft)
   + modal / dialog system (accessible)
   + floating feedback widget
   + form controls, inline-edit selects, status chips for the read-write app.
   No external requests: system font stacks only. */

:root{
  --paper:#FaF9F5; --panel:#ffffff; --ink:#1b1a16; --ink-soft:#4d4a42; --ink-faint:#8a867b;
  --line:#e7e3d8; --line-strong:#d8d3c4;
  --brass:#a67c34; --brass-soft:#f3ebd9;
  --fokus:#215b4e; --fokus-soft:#e4efe9;
  --bull:#1e3a5f; --bull-soft:#e3eaf2;
  --gsg:#7a4a21; --gsg-soft:#f2e7db;           /* GSG — warm leather-brown */
  --active:#2f7d54; --active-soft:#e2f0e6;
  --lapsed:#b47c1e; --lapsed-soft:#f6ecd6;
  --prospect:#3b6ea5; --prospect-soft:#e5eef7;
  --declined:#a24a44; --declined-soft:#f4e5e3;
  --amber:#b47c1e; --amber-soft:#f6ecd6;       /* Rechnung offen */
  --blue:#3b6ea5; --blue-soft:#e5eef7;         /* Rechnung geschickt */
  --green:#2f7d54; --green-soft:#e2f0e6;       /* Rechnung bezahlt */
  --shadow:0 1px 2px rgba(30,26,18,.05),0 6px 20px rgba(30,26,18,.04);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--brass-soft)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}

.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:#20201c;color:#e9e6dc;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 16px}
.brand{padding:6px 8px 20px;border-bottom:1px solid #35342d;margin-bottom:14px}
.brand .mast{font-family:var(--serif);font-size:20px;letter-spacing:.2px;line-height:1.1}
.brand .sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:#9d998c;margin-top:6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:8px;color:#c9c5b8;font-size:14px;font-weight:500}
.nav a .ic{width:16px;text-align:center;opacity:.85}
.nav a:hover{background:#2c2b25;color:#fff}
.nav a.on{background:#3a3930;color:#fff}
.nav a.on .ic{color:var(--brass)}
.side .foot{margin-top:auto;font-size:11.5px;color:#7d7a6f;padding:12px 8px 0;border-top:1px solid #35342d;line-height:1.5}
.side .foot .who{color:#c9c5b8}
.side .foot button{background:none;border:1px solid #43423a;color:#c9c5b8;border-radius:7px;padding:7px 11px;font-size:12px;margin:8px 6px 0 0}
.side .foot button:hover{border-color:var(--brass);color:#fff}

.main{min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:rgba(250,249,245,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:14px 30px;display:flex;align-items:center;gap:16px}
.hamb{display:none;border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:6px 10px;font-size:16px;line-height:1}
.search{flex:1;max-width:440px;position:relative}
.search input{width:100%;padding:10px 12px 10px 34px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;font-size:14px}
.search input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.search .mag{position:absolute;left:11px;top:10px;opacity:.4}
.search-results{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);z-index:30;max-height:60vh;overflow:auto}
.search-results a{display:block;padding:9px 13px;border-bottom:1px solid var(--line);font-size:13.5px}
.search-results a:last-child{border-bottom:none}
.search-results a:hover{background:#faf7ef}
.search-results .sr-sub{font-size:11.5px;color:var(--ink-faint)}
.topbar .cycle{margin-left:auto;font-size:12px;color:var(--ink-faint)}
.topbar .cycle b{color:var(--ink)}
.content{padding:26px 30px 90px;max-width:1240px}

.page-h{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:.2px;margin:2px 0 3px}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--brass);font-weight:700}
.lead{color:var(--ink-soft);margin:0 0 22px;max-width:70ch}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sec-h{font-family:var(--serif);font-size:17px;font-weight:600;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.sec-h .rule{flex:1;height:1px;background:var(--line)}
.sec-h .act{font-family:var(--sans);font-size:12px}

.money{font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.money .cur{font-size:.72em;color:var(--brass);font-family:var(--sans);font-weight:700;letter-spacing:.04em;margin-right:3px;vertical-align:.06em}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px 17px;box-shadow:var(--shadow)}
.kpi .lab{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-faint);font-weight:600}
.kpi .val{font-family:var(--serif);font-size:30px;font-variant-numeric:tabular-nums;margin-top:8px;line-height:1}
.kpi .val .cur{font-size:14px}
.kpi .meta{font-size:12px;color:var(--ink-soft);margin-top:9px}
.kpi .meta .up{color:var(--active);font-weight:600}
.kpi .meta .dn{color:var(--declined);font-weight:600}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 2px;font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card .cap{font-size:12px;color:var(--ink-faint);margin:0 0 14px}

.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bar-col .stack{width:100%;max-width:46px;display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;overflow:hidden}
.bar-col .seg{width:100%}
.bar-col .lab{font-size:11px;color:var(--ink-faint)}
.bar-col .amt{font-size:10.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.legend{display:flex;gap:16px;margin-top:6px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.dot.fokus{background:var(--fokus)} .dot.bull{background:var(--bull)} .dot.gsg{background:var(--gsg)}
.dot.booked{background:var(--brass)} .dot.forecast{background:var(--line-strong)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2.5px 8px;border-radius:20px;white-space:nowrap;letter-spacing:.01em}
.chip.fokus{background:var(--fokus-soft);color:var(--fokus)}
.chip.bull{background:var(--bull-soft);color:var(--bull)}
.chip.gsg{background:var(--gsg-soft);color:var(--gsg)}
.chip.active{background:var(--active-soft);color:var(--active)}
.chip.lapsed{background:var(--lapsed-soft);color:var(--lapsed)}
.chip.prospect{background:var(--prospect-soft);color:var(--prospect)}
.chip.declined{background:var(--declined-soft);color:var(--declined)}
.chip.listed{background:#eee;color:#777}
.chip.ghost{background:#f1efe8;color:var(--ink-soft)}
.chip.inv-offen{background:var(--amber-soft);color:var(--amber)}
.chip.inv-geschickt{background:var(--blue-soft);color:var(--blue)}
.chip.inv-bezahlt{background:var(--green-soft);color:var(--green)}
.chip.due-over{background:var(--declined-soft);color:var(--declined)}
.chip.star{background:var(--brass-soft);color:var(--brass)}

.tbl-wrap{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:auto;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);font-weight:700;padding:11px 16px;background:#f6f4ee;border-bottom:1px solid var(--line);user-select:none;white-space:nowrap}
thead th.sortable{cursor:pointer}
thead th.num,td.num{text-align:right}
thead th .ar{opacity:.5;font-size:10px}
tbody td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.rowlink{cursor:pointer}
tbody tr.rowlink:hover{background:#faf7ef}
td .cname{font-weight:600}
td .aka{font-size:11.5px;color:var(--ink-faint)}
td.num .money{font-size:14px}
.muted{color:var(--ink-faint)}
.nowrap{white-space:nowrap}

.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.seg{display:inline-flex;background:#efece3;border-radius:9px;padding:3px}
.seg button{border:none;background:none;padding:7px 13px;border-radius:7px;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.count{margin-left:auto;font-size:12.5px;color:var(--ink-faint)}

.back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);margin-bottom:14px;font-weight:600;background:none;border:none;padding:0}
.back:hover{color:var(--brass)}
.chead{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.chead .name{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.1}
.chead .aka{font-size:12.5px;color:var(--ink-faint);margin-top:6px}
.chead .tags-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;align-items:center}
.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;margin-top:20px;align-items:start}
@media(max-width:1000px){.detail-grid{grid-template-columns:1fr}}
.info-row{display:flex;gap:10px;font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.info-row .k{width:96px;color:var(--ink-faint);flex-shrink:0}
.info-row .v{word-break:break-word}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.mini{background:#f7f5ef;border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.mini .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);font-weight:600}
.mini .n{font-family:var(--serif);font-size:20px;font-variant-numeric:tabular-nums;margin-top:5px}

.contact{padding:11px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.contact:last-child{border-bottom:none}
.contact .cn{font-weight:600}
.contact .cm{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.55}
.contact .ca{display:flex;gap:6px;flex-shrink:0}
.rowbtn{border:1px solid var(--line-strong);background:#fff;border-radius:7px;padding:4px 8px;font-size:11.5px;color:var(--ink-soft)}
.rowbtn:hover{border-color:var(--brass);color:var(--brass)}
.rowbtn.danger:hover{border-color:var(--declined);color:var(--declined)}
a.rowbtn.mailico{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
/* Feature 8: Überfällige Rechnungen — red accent from --declined tokens */
.overdue-card{border-left:3px solid var(--declined)}
.overdue-card .over-days{color:var(--declined);font-weight:600}
.starbtn{border:none;background:none;font-size:15px;line-height:1;color:var(--line-strong);padding:0 2px}
.starbtn.on{color:var(--brass)}

.tl{position:relative;margin-top:6px}
.tl .ev{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line);margin-left:5px}
.tl .ev:last-child{border-left-color:transparent}
.tl .ev .node{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--brass)}
.tl .ev.fokus .node{border-color:var(--fokus)}
.tl .ev.bull .node{border-color:var(--bull)}
.tl .ev.gsg .node{border-color:var(--gsg)}
.tl .ev.note .node{border-color:var(--ink-faint);background:var(--ink-faint)}
.tl .ev.system .node{border-color:var(--line-strong);background:var(--line-strong)}
.tl .ev.decline .node{border-color:var(--declined);background:var(--declined)}
.tl .ev .when{font-size:11px;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.tl .ev .body{margin-top:2px}
.tl .ev .body .t{font-weight:600}
.tl .ev.system .body .t{font-weight:500;font-style:italic;color:var(--ink-soft)}
.tl .ev .body .d{font-size:12.5px;color:var(--ink-soft)}
.tl .ev .x{margin-left:8px;color:var(--ink-faint);font-size:14px;border:none;background:none;line-height:1}
.tl .ev .x:hover{color:var(--declined)}

.composer{margin-top:10px}
.composer textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical;min-height:62px}
.composer textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.composer .row{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}

.btn{background:var(--ink);color:#fff;border:none;border-radius:9px;padding:9px 15px;font-size:13.5px;font-weight:600}
.btn:hover{background:#000}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);background:#fff}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.danger{background:var(--declined)}
.btn.danger:hover{background:#8a3b36}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.sel,.inp{border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;font-size:13px;background:#fff;font-family:inherit;color:var(--ink)}
.sel:focus,.inp:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.sel.inline{padding:4px 6px;font-size:12px;border-radius:7px}
.inp.dateinline{padding:5px 7px;font-size:12.5px;border-radius:7px}
.note{background:#f7f5ef;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:9px;position:relative}
.note .meta{font-size:11px;color:var(--ink-faint);margin-bottom:3px}
.note .x{position:absolute;right:8px;top:7px;color:var(--ink-faint);font-size:15px;border:none;background:none;line-height:1}
.note .x:hover{color:var(--declined)}

/* Tasks */
.task{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.task:last-child{border-bottom:none}
.task .cb{width:19px;height:19px;flex-shrink:0;margin-top:1px;accent-color:var(--active);cursor:pointer}
.task .tt{flex:1}
.task .tt .tl2{font-weight:500}
.task.done .tt .tl2{text-decoration:line-through;color:var(--ink-faint)}
.task .tt .tm{font-size:12px;color:var(--ink-faint);margin-top:2px}
.task .tt .tm .over{color:var(--declined);font-weight:600}
.task .ta{display:flex;gap:6px;flex-shrink:0}

.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
.col{background:#f4f2ea;border:1px solid var(--line);border-radius:13px;padding:12px;min-height:120px}
.col h4{margin:2px 4px 10px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.col h4 .n{background:#fff;border:1px solid var(--line);border-radius:20px;font-size:11px;padding:1px 8px;color:var(--ink-soft)}
.col .colsum{margin:0 4px 10px;font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.pcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:8px;box-shadow:0 1px 1px rgba(0,0,0,.03);width:100%;text-align:left;display:block}
.pcard:hover{border-color:var(--brass)}
.pcard .pn{font-weight:600;font-size:13px;line-height:1.25}
.pcard .pm{font-size:11.5px;color:var(--ink-faint);margin-top:4px;display:flex;justify-content:space-between;gap:8px;align-items:center}

/* ---- Pipeline board (V2 — Salesforce-style opportunity board) ---- */
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.pcol{background:#f4f2ea;border:1px solid var(--line);border-top:3px solid var(--line-strong);border-radius:13px;padding:10px;flex:0 0 250px;width:250px;display:flex;flex-direction:column;min-height:130px}
.renew-col{background:#f7f5ef;border:1px dashed var(--line-strong)}
.pcol-head{padding:2px 4px 9px}
.pcol-title{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:700}
.pcol-title .pcol-tools{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.pcol-title .n{background:#fff;border:1px solid var(--line);border-radius:20px;font-size:11px;padding:1px 8px;color:var(--ink-soft);font-weight:600}
.pcol-sum{font-size:11.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:5px}
.pcol-sum.muted{color:var(--ink-faint)}
.pcol-body{overflow-y:auto;max-height:70vh;padding:2px 2px 4px}
.pcol-empty{color:var(--ink-faint);font-size:12px;padding:8px 4px}
.pcol.drop{outline:2px solid var(--brass);outline-offset:-2px;background:var(--brass-soft)}
.pcol.stage-col.collapsed{flex:0 0 54px;width:54px;padding:8px 6px;align-items:center;min-height:200px}
.pcol-expand{border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0;width:100%;color:var(--ink-soft)}
.pcol-expand .vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.pcol-expand .n{background:#fff;border:1px solid var(--line);border-radius:20px;font-size:11px;padding:1px 7px}
.pcol-expand:hover{color:var(--brass)}
.ghost-col{background:none;border:1px dashed var(--line-strong);border-top:1px dashed var(--line-strong);flex:0 0 132px;width:132px;align-items:stretch;justify-content:center}
.ghost-add{border:none;background:none;color:var(--ink-faint);font-weight:600;font-size:13px;padding:16px 8px;width:100%;border-radius:11px}
.ghost-add:hover{color:var(--brass);background:rgba(166,124,52,.06)}

.pcard{position:relative}
.pcard.dragging{opacity:.45}
.pcard.renew{background:#fff}
.pcard-open{border:none;background:none;width:100%;text-align:left;display:block;padding:0}
.pcard .pstar{color:var(--brass);font-size:12px}
.pcard-move{margin-top:8px}
.pcard-move .movesel{width:100%;font-size:12px;padding:7px 8px;color:var(--ink-soft);background:#faf8f2;border-radius:8px}
.pcard-move .movesel:hover{border-color:var(--brass)}
.subgroup{margin-top:6px;border-top:1px dashed var(--line-strong);padding-top:8px}
.subhead{width:100%;border:none;background:none;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 2px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.subhead .n{color:var(--ink-faint);font-weight:600}
.subhead:hover{color:var(--brass)}

.colmenu-wrap{position:relative;display:inline-flex}
.colmenu-btn{border:none;background:none;color:var(--ink-faint);font-size:17px;line-height:1;padding:0 3px;border-radius:6px}
.colmenu-btn:hover{color:var(--ink)}
.colmenu{position:absolute;right:0;top:24px;z-index:40;background:#fff;border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);padding:6px;min-width:180px;display:flex;flex-direction:column;gap:2px}
.colmenu[hidden]{display:none}
.colmenu button{border:none;background:none;text-align:left;padding:9px 10px;border-radius:7px;font-size:13px;color:var(--ink)}
.colmenu button:hover{background:#faf7ef}
.colmenu button.danger{color:var(--declined)}
.colmenu button.danger:hover{background:var(--declined-soft)}
.colmenu .menu-check{display:flex;align-items:center;gap:8px;padding:9px 10px;font-size:13px;color:var(--ink);cursor:pointer}
.colmenu .menu-check input{width:auto}

/* Kunden „ohne E-Mail" toggle chip (B2) */
.chip-toggle{border:1px solid var(--line-strong);background:#fff;color:var(--ink-soft);border-radius:20px;font-size:12.5px;font-weight:600;padding:8px 13px;white-space:nowrap}
.chip-toggle:hover{border-color:var(--brass);color:var(--brass)}
.chip-toggle.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-toggle.on:hover{color:#fff}

.matrix{font-size:12.5px}
.matrix td,.matrix th{padding:8px 12px;text-align:right;border-bottom:1px solid var(--line)}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.heat{border-radius:5px;padding:5px 8px;font-variant-numeric:tabular-nums}

.callout{background:linear-gradient(180deg,#fff,#fbf8f0);border:1px solid var(--line-strong);border-left:3px solid var(--brass);border-radius:11px;padding:15px 18px}
.callout .k{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--brass);font-weight:700}
.callout p{margin:6px 0 0;color:var(--ink-soft)}
.empty{padding:40px;text-align:center;color:var(--ink-faint)}
.empty .big{font-size:15px;color:var(--ink-soft);margin-bottom:4px}

.loading{padding:60px;text-align:center;color:var(--ink-faint)}
.errbox{margin:40px auto;max-width:460px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:32px;box-shadow:var(--shadow)}
.errbox p{color:var(--ink-soft)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:200;max-width:80vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast.err{background:var(--declined)}

/* Modal / dialog */
.modal-back{position:fixed;inset:0;background:rgba(30,26,18,.42);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:150;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--line-strong);border-radius:15px;box-shadow:0 20px 60px rgba(30,26,18,.22);width:100%;max-width:560px;padding:22px 24px;margin:auto}
.modal.wide{max-width:720px}
.modal h2{font-family:var(--serif);font-size:21px;font-weight:600;margin:0 0 4px}
.modal .msub{font-size:12.5px;color:var(--ink-faint);margin:0 0 18px}
.modal-x{float:right;border:none;background:none;font-size:22px;line-height:1;color:var(--ink-faint);padding:0 2px}
.modal-x:hover{color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.form-grid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:600}
.field .inp,.field .sel,.field textarea{width:100%}
.field textarea{border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:13.5px;resize:vertical;min-height:56px}
.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.modal-actions .right{display:flex;gap:10px;margin-left:auto}
.kv-rows{display:flex;flex-direction:column;gap:8px}
.kv-row{display:flex;gap:8px;align-items:center}
.kv-row .inp{flex:1}
.kv-row .rm{border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:7px 10px;color:var(--ink-faint)}
.kv-row .rm:hover{border-color:var(--declined);color:var(--declined)}
.preset-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

/* Feedback widget */
.fab{position:fixed;right:22px;bottom:22px;z-index:120;background:var(--ink);color:#fff;border:none;border-radius:24px;padding:11px 18px;font-size:13.5px;font-weight:600;box-shadow:0 6px 20px rgba(30,26,18,.25)}
.fab:hover{background:#000}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:-260px;transition:.2s;z-index:60;width:240px}
  .side.open{left:0}
  .hamb{display:inline-block}
  .kpis{grid-template-columns:1fr 1fr}
  .grid2,.grid3,.detail-grid{grid-template-columns:1fr}
  .content{padding:20px 16px 90px}
  .topbar{padding:12px 16px}
}