:root{
  --ink:#122a34; --ink-soft:#3d5560; --line:#e3e9ec; --bg:#f4f6f7; --card:#fff;
  --brand:#0f9b8e; --brand-dark:#0b7d72; --brand-soft:#e6f5f3;
  --accent:#f5a524; --danger:#e0524a; --danger-dark:#c23c34;
  --radius:12px; --shadow:0 1px 3px rgba(18,42,52,.08),0 1px 2px rgba(18,42,52,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;font-size:15px}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0}
h2{font-size:1.05rem;margin:0 0 .75rem}
h3{font-size:.95rem;margin:1.25rem 0 .5rem;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem}
.prewrap{white-space:pre-wrap}
.num{text-align:right;white-space:nowrap}
.strong{font-weight:600}

/* Topbar */
.topbar{display:flex;align-items:center;gap:1.5rem;background:var(--ink);color:#fff;padding:.65rem 1.25rem}
.brand{color:#fff;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:.4rem}
.brand:hover{text-decoration:none}
.logo{font-size:1.2rem}
.mainnav{display:flex;gap:.35rem;margin-inline-start:.5rem}
.mainnav a{color:#c9d7dc;padding:.4rem .75rem;border-radius:8px;font-weight:500}
.mainnav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.usermenu{margin-inline-start:auto;display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:#c9d7dc}
.usermenu .role{color:#8fb6b0}
.container{max-width:1080px;margin:1.5rem auto;padding:0 1.25rem}

/* Page head */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.head-actions{display:flex;gap:.5rem}
.back{font-size:.85rem;display:inline-block;margin-bottom:.15rem}
.count{font-size:.85rem;background:var(--brand-soft);color:var(--brand-dark);padding:.1rem .5rem;border-radius:20px;vertical-align:middle;font-weight:600}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;margin-bottom:1.25rem}
.card.no-pad{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.card-head h2{margin:0}
.cols{display:flex;gap:1.25rem;flex-wrap:wrap}
.cols>*{flex:1;min-width:280px}
.empty{text-align:center;padding:2.5rem}

/* Buttons */
.btn{display:inline-block;border:1px solid transparent;border-radius:9px;padding:.5rem .95rem;font-size:.9rem;font-weight:600;cursor:pointer;text-align:center;transition:.15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn-danger{background:#fff;border-color:var(--danger);color:var(--danger-dark)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-block{width:100%;display:block}
.btn-sm{padding:.3rem .6rem;font-size:.8rem}
.linkbtn{background:none;border:none;color:var(--brand-dark);cursor:pointer;font-size:.85rem;padding:0}
.linkbtn.danger{color:var(--danger-dark)}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.25rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.stat-num{font-size:2rem;font-weight:700;color:var(--brand-dark);line-height:1}
.stat-label{color:var(--ink-soft);font-size:.85rem;margin-top:.35rem}

/* Bar lists */
.barlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.barlist li{display:grid;grid-template-columns:110px 1fr 32px;align-items:center;gap:.6rem;font-size:.85rem}
.bl-bar{background:var(--bg);border-radius:20px;height:9px;overflow:hidden}
.bl-bar>span{display:block;height:100%;background:var(--brand);border-radius:20px}
.bl-num{text-align:right;font-weight:600;color:var(--ink-soft)}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;padding:.6rem .8rem;color:var(--ink-soft);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);background:#fafbfb}
.table td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:last-child td,.table tbody tr:last-child td{border-bottom:none}
.table.mini td{padding:.4rem .3rem}
.table-hover tbody tr{cursor:pointer}
.table-hover tbody tr:hover{background:var(--brand-soft)}
.rowactions{display:flex;gap:.75rem;align-items:center}
.platcell,.catcell{max-width:220px}

/* Pills & tags */
.pill{display:inline-block;font-size:.72rem;font-weight:600;padding:.15rem .55rem;border-radius:20px;background:var(--bg);color:var(--ink-soft);white-space:nowrap}
.pill-active{background:#e2f5ec;color:#127a4b}
.pill-prospect{background:#eef2f4;color:#5b6b73}
.pill-contacted{background:#e8f0fb;color:#2c5aa0}
.pill-negotiating{background:#fdf1dd;color:#a9701a}
.pill-on_hold{background:#fbeceb;color:#b0453d}
.pill-blacklisted{background:#3d1f1d;color:#f3c9c5}
.pill-collab{background:var(--brand-soft);color:var(--brand-dark)}
.tag{display:inline-block;font-size:.75rem;background:var(--brand-soft);color:var(--brand-dark);padding:.12rem .5rem;border-radius:6px;margin:.1rem .15rem .1rem 0}
.tag.more{background:var(--bg);color:var(--ink-soft)}
.tagcloud{display:flex;flex-wrap:wrap;gap:.25rem}

/* Key-value */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0}
.kv dt{color:var(--ink-soft);font-size:.85rem}
.kv dd{margin:0;font-weight:500}

/* Forms */
.form label,.filters label{display:block;margin-bottom:.85rem;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.form input,.form select,.form textarea,.filters input,.filters select,.login-card input,.login-card select,.install-card input,.install-card select{
  width:100%;margin-top:.3rem;padding:.55rem .65rem;border:1px solid var(--line);border-radius:9px;font-size:.92rem;font-family:inherit;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 1rem}
.form-actions{display:flex;gap:.6rem;margin-top:.5rem}
.form.inset{background:var(--bg);padding:1rem;border-radius:9px;margin-top:1rem}
label.chk{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--ink)}
label.chk input{width:auto;margin:0}

/* Platforms */
.platforms{display:flex;flex-direction:column;gap:.5rem}
.platrow{border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;transition:.15s}
.platrow.is-on{border-color:var(--brand);background:var(--brand-soft)}
.platrow .platfields{display:none;grid-template-columns:2fr 1fr;gap:.6rem;margin-top:.6rem}
.platrow.is-on .platfields{display:grid}
.platrow .chk span{font-weight:600;color:var(--ink)}
.platfields input{margin-top:0}
.combo.is-on{border-color:var(--accent);background:#fdf6e9}

/* Categories */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.3rem .75rem}
.catchk{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:500;color:var(--ink);margin:0}
.catchk input{width:auto;margin:0}

/* Filters */
.filters{padding:.85rem}
.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter-row input,.filter-row select{width:auto;margin:0;min-width:120px;flex:0 0 auto}
.filter-row input[type=search]{flex:1 1 200px}

.addcollab{margin-top:1rem}
.addcollab summary{cursor:pointer;font-weight:600;color:var(--brand-dark);padding:.4rem 0}
.combo-row{background:#fdf6e9}

/* Flash */
.flash{padding:.7rem 1rem;border-radius:9px;margin-bottom:1rem;font-size:.9rem;border:1px solid transparent}
.flash-success{background:#e2f5ec;border-color:#bfe6d2;color:#127a4b}
.flash-error{background:#fbeceb;border-color:#f2cbc8;color:#b0453d}

/* Login & install */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,#0f9b8e 0%,#122a34 100%);padding:1.5rem}
.login-card{background:#fff;border-radius:16px;padding:2rem;width:100%;max-width:380px;box-shadow:0 12px 40px rgba(0,0,0,.2);text-align:center}
.install-card{max-width:520px;text-align:left}
.login-brand .logo{font-size:2.5rem}
.login-card h1{font-size:1.3rem;margin:.5rem 0 .25rem}
.login-card form,.install-card form{text-align:left;margin-top:1.25rem}
.login-card label{font-weight:600;font-size:.85rem;color:var(--ink-soft);display:block;margin-bottom:.85rem}

.foot{text-align:center;color:var(--ink-soft);font-size:.8rem;padding:1.5rem;opacity:.8}

@media(max-width:640px){
  .grid2,.grid3{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap;gap:.5rem 1rem}
  .usermenu{width:100%;margin:0;order:3}
  .platcell,.catcell{display:none}
}