/* ===== KRAT ONE — CRM app-mockup components ===== */

.proto-note{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--surface-2);
  border:1px dashed var(--accent-line);border-radius:0;padding:10px 14px;margin-bottom:18px}
.proto-note b{color:var(--accent)}

/* screen tabs */
.screens-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.screens-tabs a{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);border:1px solid var(--line);
  background:var(--surface);border-radius:0;padding:7px 13px}
.screens-tabs a:hover{border-color:var(--line-2);color:var(--ink)}
.screens-tabs a.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink);font-weight:600}

/* browser/app frame */
.appframe{border:1px solid var(--line-2);border-radius:0;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.28);background:var(--surface)}
.appchrome{display:flex;align-items:center;gap:14px;padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#e0645a}.dots i:nth-child(2){background:#e0b24a}.dots i:nth-child(3){background:#5fae6f}
.urlbar{flex:1;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--ground);
  border:1px solid var(--line);border-radius:0;padding:5px 12px;text-align:center;max-width:420px;margin:0 auto}
.urlbar b{color:var(--ink-2);font-weight:500}

/* app window */
.appwin{display:grid;grid-template-columns:190px 1fr;min-height:520px;background:var(--ground)}
.appnav{background:var(--surface);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.appnav .bm{display:flex;align-items:center;gap:9px;padding:2px 8px 14px}
.appnav .bm .g{width:26px;height:26px;border:1.5px solid var(--accent);border-radius:0;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:11px;color:var(--accent)}
.appnav .bm b{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em}
.appnav .sec-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 9px 5px}
.anav{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:0;color:var(--ink-2);font-size:13px}
.anav .i{width:15px;text-align:center;color:var(--muted);font-size:12px}
.anav:hover{background:var(--surface-2);color:var(--ink)}
.anav.on{background:var(--accent-soft);color:var(--ink);font-weight:600}.anav.on .i{color:var(--accent)}
.anav .ct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--surface-2);border-radius:0;padding:1px 6px}

.apptop{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.conq{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line);border-radius:0;padding:5px 11px;background:var(--surface-2)}
.conq b{color:var(--ink)}
.conq .ck{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border:1px solid var(--accent-line);border-radius:0;padding:1px 6px}
.searchmini{flex:1;max-width:280px;font-size:12.5px;color:var(--muted);background:var(--ground);border:1px solid var(--line);border-radius:0;padding:6px 12px}
.apptop .sp{flex:1}
.btn{font-size:12.5px;font-weight:600;border-radius:0;padding:7px 13px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.btn.pri:hover{background:var(--accent-2)}

.appbody{padding:16px 18px;min-width:0}
.appbody-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.appbody-h h3{font-size:18px;font-weight:750}
.appbody-h .cnt{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* avatar */
.avatar{border-radius:0;display:inline-grid;place-items:center;color:#fff;font-weight:600;flex:none;font-family:var(--sans);line-height:1}

/* toolbar */
.tbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.filt{font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:0;padding:5px 10px;background:var(--surface);display:inline-flex;gap:6px;align-items:center}
.filt.act{border-color:var(--accent-line);color:var(--ink);background:var(--accent-soft)}
.filt .x{color:var(--muted)}

/* data table */
.dtwrap{overflow-x:auto;border:1px solid var(--line);border-radius:0;background:var(--surface)}
table.dt{border-collapse:collapse;width:100%;font-size:13px;min-width:640px}
table.dt th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
table.dt td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.dt tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:var(--surface-2)}
.cellname{display:flex;align-items:center;gap:10px}
.cellname .nm{font-weight:600;color:var(--ink)}
.cellname .em{font-size:11.5px;color:var(--muted)}
.chk{width:15px;height:15px;border:1.5px solid var(--line-2);border-radius:0;display:inline-block;flex:none}
.tnum{font-variant-numeric:tabular-nums}

/* stage pills */
.stg{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:0;white-space:nowrap;border:1px solid transparent}
.stg.lead{color:var(--muted);border-color:var(--line-2);background:var(--surface-2)}
.stg.mql{color:var(--steel);border-color:var(--steel-line);background:var(--steel-soft)}
.stg.sql{color:var(--warn);border-color:var(--warn-soft);background:var(--warn-soft)}
.stg.customer{color:var(--good);border-color:var(--good-soft);background:var(--good-soft)}

/* kanban */
.kb{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.kbcol{flex:0 0 236px;background:var(--surface-2);border:1px solid var(--line);border-radius:0;padding:10px;display:flex;flex-direction:column;gap:9px}
.kbcol-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 4px}
.kbcol-h .t{font-weight:650;font-size:13px;display:flex;align-items:center;gap:7px}
.kbcol-h .t .pin{width:7px;height:7px;border-radius:50%}
.kbcol-h .v{font-family:var(--mono);font-size:11px;color:var(--muted)}
.kbcard{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:11px;box-shadow:var(--shadow-sm);cursor:default}
.kbcard:hover{border-color:var(--line-2)}
.kbcard .kt{font-weight:600;font-size:13px;margin-bottom:3px}
.kbcard .kc{font-size:11.5px;color:var(--muted);margin-bottom:9px}
.kbcard .kf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kbcard .val{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink)}
.kbcard .rot{font-family:var(--mono);font-size:10px;color:var(--warn)}
.kbtags{display:flex;gap:4px;margin-bottom:9px;flex-wrap:wrap}
.kbtag{font-size:9.5px;font-family:var(--mono);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:0;padding:1px 6px}

/* contact detail */
.detail{display:grid;grid-template-columns:250px 1fr;gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:18px;box-shadow:var(--shadow-sm);height:max-content}
.pcard .ph{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pcard .ph .nm{font-size:16px;font-weight:700}
.pcard .ph .ti{font-size:12.5px;color:var(--muted)}
.pfield{display:flex;flex-direction:column;gap:1px;padding:9px 0;border-bottom:1px dashed var(--line)}
.pfield:last-child{border-bottom:0}
.pfield .l{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pfield .v{font-size:13px;color:var(--ink)}
.pcta{display:flex;gap:6px;margin:14px 0}
.pcta .btn{flex:1;text-align:center}

.tlwrap{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:6px 18px 18px;box-shadow:var(--shadow-sm)}
.tltabs{display:flex;gap:16px;border-bottom:1px solid var(--line);margin-bottom:14px;padding-top:8px}
.tltabs a{font-size:13px;color:var(--muted);padding:8px 2px;border-bottom:2px solid transparent}
.tltabs a.on{color:var(--ink);border-color:var(--accent);font-weight:600}
.tl{display:flex;flex-direction:column}
.tli{display:flex;gap:12px;padding:11px 0;position:relative}
.tl .tli::before{content:"";position:absolute;left:14px;top:34px;bottom:-11px;width:1px;background:var(--line)}
.tli:last-child::before{display:none}
.tli .ic{width:29px;height:29px;border-radius:0;display:grid;place-items:center;font-size:13px;flex:none;border:1px solid var(--line);background:var(--surface-2);z-index:1}
.tli.email .ic{color:var(--steel)}.tli.note .ic{color:var(--accent)}.tli.stage .ic{color:var(--good)}.tli.ai .ic{color:var(--purple);border-color:var(--purple-line);background:var(--purple-soft)}.tli.call .ic{color:var(--warn)}
.tli .body{flex:1;min-width:0}
.tli .body .top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tli .body .who{font-weight:600;font-size:13px}
.tli .body .when{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto}
.tli .body .txt{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.tli .body .txt.quote{border-left:2px solid var(--line-2);padding-left:10px;color:var(--muted)}
.aitag{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--purple);border:1px solid var(--purple-line);border-radius:0;padding:1px 6px;background:var(--purple-soft)}

/* ==== commercial / agency-admin app ==== */
.appstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.astat{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:14px 15px}
.astat .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.astat .v{font-size:23px;font-weight:800;margin-top:6px;line-height:1;letter-spacing:-.02em}
.astat .d{font-size:11.5px;margin-top:5px;color:var(--muted)}
.astat .d.up{color:var(--good)}.astat .d.dn{color:var(--crit)}
.astat.accent .v{color:var(--accent)}

.panel-h{display:flex;align-items:center;gap:10px;margin:18px 0 10px}
.panel-h h4{font-size:14px;font-weight:700}
.panel-h .sp{flex:1}
.panel-h .lnk{font-family:var(--mono);font-size:11.5px;color:var(--accent)}

/* mini bar chart */
.chart{display:flex;align-items:flex-end;gap:10px;height:120px;padding:10px 4px 0;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.chart .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart .bar .fill{width:60%;max-width:34px;background:var(--accent);border-radius:0;position:relative}
.chart .bar .fill.soft{background:var(--accent-soft);border:1px solid var(--accent-line)}
.chart .bar .lb{font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.chart .bar .vl{font-family:var(--mono);font-size:9.5px;color:var(--ink-2)}

/* wallet balance card */
.wallet{background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--accent-line);border-radius:0;padding:18px}
.wallet .bal-k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.wallet .bal{font-size:32px;font-weight:800;color:var(--accent);letter-spacing:-.02em;margin:6px 0}
.wallet .meta{font-size:12px;color:var(--ink-2)}

/* margin bar (cost vs retail) */
.mbar{height:22px;border-radius:0;overflow:hidden;display:flex;border:1px solid var(--line);background:var(--surface-2)}
.mbar .cost{background:var(--steel);height:100%}
.mbar .marg{background:var(--good);height:100%}
.mlegend{display:flex;gap:16px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.mlegend i{display:inline-block;width:9px;height:9px;border-radius:0;margin-right:5px;vertical-align:middle}
.mlegend .c1{background:var(--steel)}.mlegend .c2{background:var(--good)}

/* toggle mock */
.tog{width:34px;height:19px;border-radius:0;background:var(--accent);position:relative;display:inline-block;vertical-align:middle}
.tog.off{background:var(--line-2)}
.tog::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff}
.tog.off::after{right:auto;left:2px}

/* status pill */
.spill{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:0;white-space:nowrap;border:1px solid transparent}
.spill.active{color:var(--good);border-color:var(--good-soft);background:var(--good-soft)}
.spill.trial{color:var(--steel);border-color:var(--steel-line);background:var(--steel-soft)}
.spill.past{color:var(--crit);border-color:var(--crit-soft);background:var(--crit-soft)}
.spill.live{color:var(--good);border-color:var(--good-soft);background:var(--good-soft)}
.spill.pending{color:var(--warn);border-color:var(--warn-soft);background:var(--warn-soft)}

/* snapshot card */
.snap{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:15px;box-shadow:var(--shadow-sm)}
.snap .sh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.snap .sh .nm{font-weight:700;font-size:14px}
.snap .sh .ver{font-family:var(--mono);font-size:10.5px;color:var(--accent);border:1px solid var(--accent-line);border-radius:0;padding:1px 7px;background:var(--accent-soft)}
.snap .inc{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}
.snap .used{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.form-row:last-child{border-bottom:0}
.form-row .fl{font-size:12.5px;color:var(--ink-2);min-width:130px}
.form-row .fi{flex:1;font-size:12.5px;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:0;padding:6px 11px}
.swatch{width:22px;height:22px;border-radius:0;border:1px solid var(--line);display:inline-block;vertical-align:middle}

@media (max-width:820px){
  .appwin{grid-template-columns:1fr}
  .appnav{display:none}
  .detail{grid-template-columns:1fr}
  .appstats{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
}