*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--color-primary);text-decoration:none}
/* Subtle, GPU-cheap transitions so hovers/clicks feel smooth (disabled for reduced-motion). */
.sidebar nav a,.data-table tr.clickable td,.btn-primary,.btn-ghost,.tile,.card,.lang-switch a{
  transition:background-color .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
h1,h2{font-weight:650;letter-spacing:-.01em}
.muted{color:var(--color-muted)}.small{font-size:.82rem}

/* ---------- auth ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{background:var(--color-surface);border-radius:var(--radius);padding:36px;width:380px;
  box-shadow:0 10px 40px rgba(0,0,0,.08)}
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brand-logo{height:28px}.brand-name{font-weight:700;font-size:1.05rem}
.auth-card h1{margin:.2em 0 .1em;font-size:1.5rem}
form label{display:block;margin:14px 0 4px;font-size:.85rem;color:var(--color-muted)}
form input,form select{width:100%;padding:11px 12px;border:1px solid #dfe4e2;border-radius:10px;
  font-size:.95rem;background:#fff;color:var(--color-text)}
.btn-primary{margin-top:18px;width:100%;padding:12px;border:0;border-radius:10px;cursor:pointer;
  background:var(--color-primary);color:var(--color-primary-fg);font-weight:600;font-size:.95rem}
.btn-ghost{display:inline-block;margin-top:8px}
.alert.error{background:#fdecec;color:var(--color-negative);padding:10px 12px;border-radius:10px;
  font-size:.88rem;margin-top:8px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--color-surface);border-right:1px solid #e7ecea;padding:22px 16px;
  display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
.sidebar nav{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.sidebar nav a{padding:9px 12px;border-radius:9px;color:var(--color-text);font-size:.92rem}
.sidebar nav a:hover{background:var(--color-bg)}
.sidebar nav a.active{background:var(--color-primary);color:var(--color-primary-fg)}
.logout{margin-top:auto;padding:9px 12px;color:var(--color-muted)}
.content{padding:24px 28px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.zone-form select{padding:9px 12px;border-radius:10px;border:1px solid #dfe4e2;background:#fff;font-weight:600}
.role-chip{background:var(--color-bg);border:1px solid #e0e5e3;padding:6px 12px;border-radius:20px;
  font-size:.8rem;color:var(--color-muted);text-transform:capitalize}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
.tile{background:var(--color-surface);border:1px solid #eaefed;border-radius:var(--radius);padding:16px}
.tile-label{font-size:.78rem;color:var(--color-muted);margin-bottom:8px}
.tile-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.tile-unit{font-size:.85rem;color:var(--color-muted);font-weight:500;margin-left:2px}
.tile-delta{font-size:.78rem;margin-top:6px;font-weight:600}
.tile-delta.pos{color:var(--color-positive)}.tile-delta.neg{color:var(--color-negative)}

/* ---------- cards ---------- */
.card{background:var(--color-surface);border:1px solid #eaefed;border-radius:var(--radius);
  padding:18px;margin-bottom:18px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.card-head h2{font-size:1.05rem;margin:0}
#chart{width:100%;height:220px;display:block}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.brief{line-height:1.55;font-size:.92rem}
.alert-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.alert-list li{display:flex;gap:10px;align-items:flex-start}
.alert-list .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:var(--color-muted)}
.sev-high .dot{background:var(--color-negative)}.sev-medium .dot{background:var(--color-warning)}
.sev-low .dot{background:var(--color-positive)}

/* ---------- pricing ---------- */
.pricing-page{max-width:1100px;margin:0 auto;padding:40px 24px}
.pricing-head{text-align:center;margin-bottom:28px}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan-card{position:relative;background:var(--color-surface);border:1px solid #e7ecea;
  border-radius:var(--radius);padding:22px}
.plan-card.featured{border:2px solid var(--color-primary);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.ribbon{position:absolute;top:-11px;right:14px;background:var(--color-accent);color:#1a1a1a;
  font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px}
.plan-card h2{margin:.1em 0;font-size:1.25rem}
.price{font-size:1.9rem;font-weight:750;margin:14px 0 2px}
.price span{font-size:.9rem;color:var(--color-muted);font-weight:500}
.feat{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:7px;font-size:.88rem}
.feat li.on::before{content:"✓ ";color:var(--color-positive);font-weight:700}
.feat li.off{color:#b9c2bf}.feat li.off::before{content:"× ";font-weight:700}
.addon-title{margin:40px 0 14px}
.addon-table{width:100%;border-collapse:collapse;background:var(--color-surface);
  border-radius:var(--radius);overflow:hidden}
.addon-table th,.addon-table td{text-align:left;padding:12px 14px;border-bottom:1px solid #eef2f0;font-size:.9rem}
.addon-table th{background:var(--color-bg);color:var(--color-muted);font-weight:600}

/* ---------- shared additions (portals) ---------- */
.page-title{font-size:1.2rem;margin:0}
.side-foot{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.lang-switch{display:flex;gap:4px}
.lang-switch a{flex:1;text-align:center;padding:5px 0;border:1px solid #dfe4e2;border-radius:7px;
  font-size:.72rem;font-weight:600;color:var(--color-muted)}
.lang-switch a.on{background:var(--color-primary);color:var(--color-primary-fg);border-color:var(--color-primary)}
.shell.admin .lang-switch a{border-color:#2a3a36;color:#8aa39c}
.brand-name .plat{color:var(--color-accent);font-weight:700}
.shell.admin .sidebar{background:#0f1a18;border-right-color:#1c2a27}
.shell.admin .sidebar .brand-name,.shell.admin .sidebar nav a{color:#dfe7e4}
.shell.admin .sidebar nav a:hover{background:#16241f}
.shell.admin .sidebar nav a.active{background:var(--color-primary);color:#fff}
.shell.admin .sidebar .muted{color:#8aa39c}

/* tables */
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{text-align:left;padding:10px 12px;border-bottom:1px solid #eef2f0;vertical-align:middle}
.data-table th{color:var(--color-muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.data-table td.pos{color:var(--color-positive)}.data-table td.neg{color:var(--color-negative)}
.row-actions{display:flex;gap:6px}.row-actions form{margin:0}
.data-table tr.clickable{cursor:pointer}
.data-table tr.clickable:hover td{background:var(--color-bg)}
#phist{width:100%;height:200px;display:block}
.map-legend{display:flex;gap:14px;font-size:.8rem;color:var(--color-muted)}
.map-legend i.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.map-pin span{display:block;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.map-legend i.dot.ok{background:#1E9E6A}.map-legend i.dot.drop{background:#E0A106}.map-legend i.dot.removed{background:#9aa3a0}
.detail-actions{display:flex;gap:6px;flex-wrap:wrap}.detail-actions form{margin:0}
/* kanban */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kanban-col{background:var(--color-bg);border-radius:var(--radius);padding:10px;min-height:120px}
.kanban-head{font-size:.82rem;font-weight:700;margin-bottom:8px;color:var(--color-text)}
.lead-card{background:var(--color-surface);border:1px solid #eaefed;border-radius:9px;padding:10px;margin-bottom:8px}
.lead-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.lead-card .prio{font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:20px;color:#fff;
  background:hsl(calc(140 - var(--p)*1.2) 60% 45%)}
.lead-note{margin:4px 0}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.kanban{grid-template-columns:1fr}}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.74rem;font-weight:600;
  background:var(--color-bg);color:var(--color-muted);border:1px solid #e3e8e6}
.badge.ok{background:#e8f6ef;color:var(--color-positive);border-color:#cfe9dd}
.badge.off{background:#f3f0ef;color:#9aa3a0}
.badge.sev-high{background:#fdecec;color:var(--color-negative);border-color:#f6d4d4}
.badge.sev-medium{background:#fff5e1;color:#b5790a;border-color:#f3e3bd}
.badge.sev-low{background:#e8f6ef;color:var(--color-positive)}
.notice{background:#fff5e1;color:#7a5408;border:1px solid #f3e3bd;border-radius:9px;
  padding:10px 12px;margin-bottom:14px;font-size:.88rem}
.notice.ok{background:#e8f6ef;color:var(--color-positive);border-color:#cfe9dd}

/* forms */
.form-grid{display:flex;flex-direction:column;gap:6px;max-width:520px}
.form-grid.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px}
.form-grid label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--color-muted)}
.form-grid input,.form-grid select,.form-grid textarea{padding:9px 11px;border:1px solid #dfe4e2;
  border-radius:9px;font-size:.9rem;background:#fff;color:var(--color-text);font-family:inherit}
.form-grid input[type=color]{padding:2px;height:38px}
.form-grid button{justify-self:start;margin-top:6px}
.btn-primary.sm,.btn-ghost.sm{width:auto;padding:7px 14px;font-size:.82rem;margin-top:0}
.btn-ghost{display:inline-block;background:transparent;border:1px solid #dfe4e2;border-radius:9px;
  padding:9px 14px;cursor:pointer;color:var(--color-text);font-weight:600}
.inline-form{display:flex;gap:8px;align-items:center;margin:0}
.inline-form select{width:auto;padding:7px 10px;border-radius:8px;font-size:.82rem}
.inline-form button{margin-top:0;white-space:nowrap}
.sm-input{padding:6px 8px;border:1px solid #dfe4e2;border-radius:8px;font-size:.82rem;width:160px}
.chk{display:flex;gap:4px;align-items:center;font-size:.8rem;color:var(--color-muted)}
.tmpl{background:var(--color-bg);padding:12px;border-radius:9px;font-size:.82rem;white-space:pre-wrap}
.prov{margin-top:8px;font-family:monospace;font-size:.72rem}

/* misc */
.alert-list.big li{align-items:center}.alert-list .grow,.grow{flex:1}
.heat-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-weight:700;color:#fff;
  background:hsl(calc(140 - var(--h)*1.2) 60% 45%)}
.bar{display:inline-block;width:80px;height:7px;background:#eef2f0;border-radius:4px;overflow:hidden;
  vertical-align:middle;margin-right:6px}
.bar span{display:block;height:100%;background:var(--color-primary)}

@media(max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.shell{grid-template-columns:1fr}
  .sidebar{flex-direction:row;flex-wrap:wrap;position:static;height:auto;overflow:visible}
  .side-foot{margin-top:0}
  .grid-2{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}
  .form-grid.cols-2{grid-template-columns:1fr}}