:root{
  --yellow:#f6a000;
  --yellow-light:#ffbd46;
  --magenta:#d10073;
  --ink:#151515;
  --ink-2:#171717;
  --gray-900:#222;
  --gray-700:#444;
  --gray-600:#666;
  --gray-400:#999;
  --gray-200:#d3d3d3;
  --gray-100:#e7e7e7;
  --gray-50:#f5f5f5;
  --white:#fff;
  --danger:#b91c1c;
  --success:#15803d;
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:"Myriad Pro","Segoe UI",Arial,sans-serif;background:var(--gray-100);color:var(--ink);font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;font-family:inherit}
button{cursor:pointer;border:0}
input:focus,select:focus,textarea:focus,button:focus,a:focus{outline:2px solid var(--magenta);outline-offset:2px}

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--ink)}
.login-card{background:var(--white);border-radius:var(--radius-lg);padding:38px;width:min(420px,92vw);box-shadow:var(--shadow-lg)}
.login-card .logo{width:220px;height:auto;margin-bottom:24px;display:block}
.login-card h1{font-size:22px;margin:0 0 6px}
.login-card p{color:var(--gray-600);margin:0 0 22px}
.login-card .error{background:#fee2e2;color:var(--danger);padding:10px 12px;border-radius:var(--radius);margin-bottom:14px;font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;color:var(--gray-700)}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);color:var(--ink)}
.field input::placeholder{color:var(--gray-400)}

/* Layout */
.crm{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--ink-2);color:#ddd;display:flex;flex-direction:column;flex:none;position:fixed;inset:0 auto 0 0}
.sidebar-brand{padding:22px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo{width:170px;height:auto;display:block;filter:brightness(0) invert(1)}
.sidebar-sub{font-size:11px;color:var(--gray-400);margin-top:6px;letter-spacing:.05em;text-transform:uppercase}
.sidebar-nav{flex:1;padding:16px 12px}
.sidebar-nav a{display:block;padding:11px 14px;border-radius:var(--radius);color:#ccc;font-weight:600;font-size:14px;margin-bottom:3px}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:var(--white)}
.sidebar-nav a.active{background:var(--magenta);color:var(--white)}
.sidebar-user{padding:16px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-user-name{font-weight:700;color:var(--white)}
.sidebar-user-role{font-size:12px;color:var(--gray-400);margin-bottom:10px}
.main{margin-left:240px;flex:1;padding:28px 32px;min-width:0}

/* Header */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-header h1{font-size:26px;margin:0;letter-spacing:-.02em}
.page-header p{margin:4px 0 0;color:var(--gray-600)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:var(--radius);font-weight:700;font-size:13px;transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--yellow);color:var(--ink)}
.btn-primary:hover{background:var(--yellow-light)}
.btn-outline{background:transparent;border:1px solid var(--gray-200);color:var(--ink)}
.btn-outline:hover{background:var(--gray-50)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-danger{background:var(--danger);color:var(--white)}
.btn-success{background:var(--success);color:var(--white)}
.btn-sm{padding:7px 12px;font-size:12px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* Cards */
.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px;margin-bottom:20px}
.card-title{font-size:16px;font-weight:800;margin:0 0 14px;display:flex;align-items:center;gap:8px}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:var(--white);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);border-left:4px solid var(--gray-200)}
.kpi.warn{border-left-color:var(--yellow)}
.kpi.alert{border-left-color:var(--magenta)}
.kpi.ok{border-left-color:#16a34a}
.kpi-value{font-size:28px;font-weight:900;line-height:1}
.kpi-label{font-size:12px;color:var(--gray-600);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}

/* Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:12px 14px;background:var(--gray-50);color:var(--gray-700);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.04em;border-bottom:2px solid var(--gray-200)}
td{padding:12px 14px;border-bottom:1px solid var(--gray-100);vertical-align:top}
tr:hover td{background:var(--gray-50)}
.table-actions{display:flex;gap:6px;justify-content:flex-end}

/* Badges */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:var(--gray-100);color:var(--gray-700)}
.badge-yellow{background:#fff2d9;color:#7c4a00}
.badge-magenta{background:#fce7f3;color:var(--magenta)}
.badge-green{background:#dcfce7;color:var(--success)}
.badge-red{background:#fee2e2;color:var(--danger)}
.badge-blue{background:#dbeafe;color:#1d4ed8}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100)}
.form-section{margin-bottom:22px}
.form-section h3{font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-700);margin:0 0 12px}

/* Filters */
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.filters .field{margin-bottom:0}
.filters input,.filters select{padding:9px 12px}

/* Detail */
.detail-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
.detail-sidebar{display:flex;flex-direction:column;gap:20px}
.detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.meta-item{display:flex;flex-direction:column;gap:2px}
.meta-label{font-size:11px;text-transform:uppercase;color:var(--gray-600);font-weight:700;letter-spacing:.04em}
.meta-value{font-weight:700;color:var(--ink)}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--gray-200);margin-bottom:18px}
.tab{padding:10px 16px;font-weight:700;color:var(--gray-600);border-bottom:2px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--magenta);border-bottom-color:var(--magenta)}
.tab-content{display:none}
.tab-content.active{display:block}

/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:start}
.kanban-col{background:var(--gray-50);border-radius:var(--radius-lg);padding:14px;min-height:120px}
.kanban-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px;color:var(--gray-700);display:flex;justify-content:space-between}
.kanban-col h4 span{font-weight:900;color:var(--ink)}
.kanban-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.kanban-card b{font-size:14px;display:block;margin-bottom:4px}
.kanban-card small{color:var(--gray-600)}

/* Utility */
.text-muted{color:var(--gray-600)}
.text-sm{font-size:12px}
.empty{color:var(--gray-600);font-style:italic;padding:18px 0}
.row-link{display:block}
.overdue{color:var(--danger);font-weight:800}

/* Login responsive */
@media(max-width:900px){
  .sidebar{width:100%;position:relative;flex-direction:row;align-items:center;padding:10px 14px}
  .sidebar-brand{padding:0;border:0}
  .sidebar-logo{width:130px}
  .sidebar-sub{display:none}
  .sidebar-nav{display:none}
  .sidebar-user{display:none}
  .main{margin-left:0}
  .detail-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .main{padding:16px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .filters{flex-direction:column;align-items:stretch}
  .form-actions{flex-direction:column}
}