:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --blue:#2563eb;
  --blue2:#1d4ed8;

  --green:#16a34a;
  --orange:#f59e0b;
  --yellow:#eab308;
  --red:#ef4444;

  --sidebar:#0b1220;
  --sidebar2:#0f1b33;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
h1{margin:0 0 6px;font-size:28px}
h2{margin:0 0 10px;font-size:18px}
h3{margin:0 0 8px;font-size:14px}
.muted{color:var(--muted)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* App shell */
.app{display:flex;min-height:100vh}
.sidebar{
  width:270px;
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));
  color:#e5e7eb;
  display:flex;flex-direction:column;
}
.brand{display:flex;gap:12px;align-items:center;padding:18px 18px 10px}
.brand-logo{width:34px;height:34px;border-radius:10px;background:rgba(37,99,235,.9)}
.brand-title{font-weight:900}
.brand-sub{font-size:12px;color:#94a3b8}

.nav{padding:10px 10px 0;display:flex;flex-direction:column;gap:4px}
.nav-item{
  padding:12px 12px;border-radius:12px;color:#cbd5e1;
  display:flex;align-items:center;gap:10px;
}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:rgba(37,99,235,.95);color:white}
.nav-sep{height:1px;background:rgba(255,255,255,.08);margin:10px}

.sidebar-user{
  margin-top:auto;padding:16px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;gap:10px;align-items:center
}
.avatar{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;font-weight:900}
.user-meta{flex:1}
.user-name{font-weight:800}
.user-mail{font-size:12px;color:#94a3b8}
.logout{color:#cbd5e1;padding:8px 10px;border-radius:10px}
.logout:hover{background:rgba(255,255,255,.06)}

.main{flex:1;display:flex;flex-direction:column}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:#fff;position:sticky;top:0;z-index:10
}
.search input{
  width:420px;max-width:45vw;padding:10px 12px;
  border:1px solid var(--line);border-radius:14px;background:#f8fafc;outline:none
}
.top-actions{display:flex;gap:10px;align-items:center}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff
}
.icon-btn:hover{background:#f8fafc}
.badge{
  position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;
  font-size:11px;padding:2px 6px;border-radius:999px
}
.content{padding:18px;display:flex;flex-direction:column;gap:14px}
.page-head{padding:4px 2px}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:8px}

/* Buttons */
.btn{
  padding:10px 12px;border-radius:14px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-weight:800
}
.btn:hover{background:#f8fafc}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue2)}
.btn-block{width:100%}

/* Alerts */
.alert{padding:12px 14px;border-radius:14px;border:1px solid var(--line);margin:12px 18px 0}
.alert-danger{background:#fee2e2;border-color:#fecaca;color:#7f1d1d}
.alert-success{background:#dcfce7;border-color:#bbf7d0;color:#14532d}
.link{color:var(--blue);font-weight:900}

/* Forms - critical (fix “tiny select” look) */
.form label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
.form input,.form select,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font:inherit;
}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:#bfdbfe;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.input-icon{position:relative}
.icon-in{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer}
.check{display:flex;gap:10px;align-items:center;margin:10px 0;color:var(--muted)}

/* Dashboard KPI (taslağa yaklaşım) */
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat-card{
  border-radius:18px;padding:14px;border:1px solid var(--line);
  background:var(--card);position:relative;overflow:hidden;
}
.stat-card:before{
  content:'';
  position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:999px;
  opacity:.12;background:var(--blue);
}
.stat-card.orange:before{background:var(--orange)}
.stat-card.yellow:before{background:var(--yellow)}
.stat-card.green:before{background:var(--green)}

.stat-top{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.stat-ico{
  width:28px;height:28px;border-radius:10px;background:#eef2ff;
  display:flex;align-items:center;justify-content:center;color:#1e40af;font-weight:900
}
.stat-title{flex:1}
.pill{
  margin-left:auto;font-size:12px;padding:3px 8px;border-radius:999px;
  background:#eef2ff;color:#1e40af;border:1px solid #dbeafe
}
.stat-val{font-size:34px;font-weight:1000;margin-top:8px}
.stat-sub{color:var(--muted);font-size:12px;margin-top:4px}

/* delta + mini progress */
.mini{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.delta{
  font-size:12px;font-weight:900;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted)
}
.delta.pos{background:#dcfce7;border-color:#bbf7d0;color:#14532d}
.delta.neg{background:#fee2e2;border-color:#fecaca;color:#7f1d1d}
.mini-bar{flex:1;height:7px;background:#eef2f7;border-radius:999px;overflow:hidden}
.mini-bar i{display:block;height:7px;background:#93c5fd;border-radius:999px}

/* Score card (taslağa yakın) */
.dash-top{display:grid;grid-template-columns:1fr 340px;gap:12px}
.score-card{
  border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(135deg,#1e40af,#2563eb);
  color:#fff;padding:16px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 12px 30px rgba(37,99,235,.18);
}
.score-head{display:flex;justify-content:space-between;align-items:flex-start}
.score-title{font-weight:1000;font-size:14px}
.score-badge{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px
}
.score-main{display:flex;align-items:flex-end;gap:8px}
.score-val{font-size:52px;font-weight:1000;line-height:1}
.score-den{opacity:.85;margin-bottom:10px}
.metric-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;opacity:.95}
.metric-bar{height:8px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.metric-bar i{display:block;height:8px;background:rgba(255,255,255,.92);border-radius:999px}

/* Lists / Projects rows */
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
.list{display:flex;flex-direction:column;gap:10px}
.list-item{
  padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;
  display:flex;align-items:center;gap:12px;
}
.list-item:hover{background:#f8fafc}
.li-title{font-weight:900}
.li-sub{font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--orange);margin-left:8px}

.proj{justify-content:space-between}
.proj-ava{
  width:40px;height:40px;border-radius:14px;background:#eef2ff;color:#1e40af;
  font-weight:1000;display:flex;align-items:center;justify-content:center
}
.proj-meta{flex:1}
.proj-chip{
  font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--muted)
}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:900;background:#fafafa}
.tag{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#fff}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-size:13px}

/* Project detail KV */
.kv{display:flex;flex-direction:column;gap:8px}
.kv>div{display:flex;justify-content:space-between;padding:10px;border:1px dashed var(--line);border-radius:14px}
.sep{height:1px;background:var(--line);margin:14px 0}
.prose{line-height:1.5}

/* AUTH (restore!) */
.auth-body{background:var(--bg)}
.auth-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.auth-brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:18px;height:18px;border-radius:6px;background:var(--blue);display:inline-block}
.auth-wrap{display:flex;justify-content:center;padding:40px 18px}
.auth-card{width:min(520px,95vw);background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(15,23,42,.08)}
.auth-hero{height:150px;background:linear-gradient(120deg,#111827,#334155);color:#fff;padding:26px}
.auth-hero-title{font-size:26px;font-weight:1000}
.auth-hero-sub{opacity:.9;margin-top:8px}
.auth-foot{padding:0 18px 18px;color:var(--muted);text-align:center}

/* Responsive */
@media (max-width:1100px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .dash-top{grid-template-columns:1fr}
  .sidebar{display:none}
  .search input{width:55vw}
}

/* === Patch v2 overrides === */

/* Softer, slimmer primary action like the mock */
.btn-slim{
  padding:10px 14px !important;
  border-radius:12px !important;
  font-weight:900 !important;
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1;
}
.btn-slim svg{display:block}

/* Icon buttons more premium */
.icon-btn{
  color:#0f172a;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.icon-btn svg{display:block}
.icon-btn-dark{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#e5e7eb !important;
}
.icon-btn-dark:hover{background:rgba(255,255,255,.12) !important}

/* Login premium layout */
.auth-card-wide{width:min(560px,95vw)}
.auth-form{padding:18px 22px}
.auth-hero-soft{
  height:170px;
  background:
    radial-gradient(1200px 280px at 20% 20%, rgba(37,99,235,.35), transparent 55%),
    radial-gradient(900px 240px at 90% 10%, rgba(16,185,129,.22), transparent 55%),
    linear-gradient(120deg,#0f172a,#334155);
}
.auth-hero{padding:28px}
.auth-hero-title{letter-spacing:-0.02em}

/* Inputs slightly softer */
.form input,.form select,.form textarea{
  background:#ffffff;
}
.check{margin:12px 0 16px}

/* Make dashboard primary action less “kaba” */
.top-actions .btn-primary{
  box-shadow:0 10px 22px rgba(37,99,235,.18);
}
.top-actions .btn-primary:hover{
  box-shadow:0 14px 28px rgba(37,99,235,.22);
}

/* === Patch v3 overrides === */

/* Normalize button sizes so adjacent buttons match */
.btn, .btn-slim, .icon-btn{
  height:42px;
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1}
.btn-label{font-weight:600 !important;} /* Görev Oluştur text not bold */
.btn-primary-soft{font-weight:700 !important;}
.btn-primary-soft .btn-label{font-weight:600 !important;}

/* Sidebar mock-like */
.brand-logo-grid{
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.nav-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:#cbd5e1}
.nav-item.active .nav-ico{color:#fff}
.nav-item{
  padding:12px 14px;
  border-radius:14px;
  font-weight:700;
}
.nav-item span{display:inline-flex;align-items:center}
.nav-badge{
  margin-left:auto;
  width:28px;height:28px;border-radius:999px;
  background:rgba(37,99,235,.25);
  color:#cfe0ff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:12px;
}
.nav-section{
  padding:10px 14px 6px;
  font-size:12px;
  letter-spacing:.08em;
  color:#7c8aa6;
  font-weight:900;
}

/* Score card like mock */
.score-card-mock{
  border-radius:20px;
  padding:18px;
}
.score-row{display:flex;justify-content:space-between;align-items:flex-start}
.score-h{font-weight:900;font-size:16px;opacity:.98}
.score-pill{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  padding:8px 12px;border-radius:12px;
  font-weight:900;
}
.score-big{display:flex;align-items:flex-end;gap:10px;margin-top:8px}
.score-num{font-size:64px;line-height:1;font-weight:1000;letter-spacing:-.04em}
.score-out{opacity:.9;font-weight:900;margin-bottom:10px}
.score-metric{margin-top:14px}
.score-m-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800}
.score-bar{
  margin-top:8px;
  height:10px;
  background:rgba(255,255,255,.22);
  border-radius:999px;
  overflow:hidden;
}
.score-bar i{
  display:block;height:10px;border-radius:999px;
  background:#ffffff;
  opacity:.95;
}

/* Notification icon pills */
.notif{gap:12px}
.notif-ico{
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;
  border:1px solid var(--line);
  background:#fff;
}
.notif-ico.n-ok{background:#dcfce7;border-color:#bbf7d0;color:#14532d}
.notif-ico.n-warn{background:#fee2e2;border-color:#fecaca;color:#7f1d1d}
.notif-ico.n-info{background:#eef2ff;border-color:#dbeafe;color:#1e40af}

/* === Select polish (Safari/macOS friendly) === */
.form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height:42px;
  padding:10px 44px 10px 12px; /* room for chevron */
  border-radius:14px;
  background-color:#fff;

  /* inline SVG chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;

  cursor:pointer;
}

.form select:hover{
  background-color:#fbfdff;
}

.form select:disabled{
  background-color:#f8fafc;
  color:#94a3b8;
  cursor:not-allowed;
}

/* Optional: keep table/filter row selects visually aligned */
.card select{
  min-width:160px;
}


/* === Select polish (Safari/macOS friendly) === */
.form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height:42px;
  padding:10px 44px 10px 12px; /* room for chevron */
  border-radius:14px;
  background-color:#fff;

  /* inline SVG chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;

  cursor:pointer;
}

.form select:hover{
  background-color:#fbfdff;
}

.form select:disabled{
  background-color:#f8fafc;
  color:#94a3b8;
  cursor:not-allowed;
}

/* Optional: keep table/filter row selects visually aligned */
.card select{
  min-width:160px;
}


/* === Filter toolbar (compact like mock) === */
.filters{padding:14px 16px}
.filters-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.filters-group{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  height:46px;
}
.filters-group.grow{flex:1;min-width:260px}
.filters-label{
  font-size:13px;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
}
.filters-input{
  border:0 !important;
  outline:none !important;
  padding:0 !important;
  height:24px !important;
  background:transparent !important;
  min-width:160px;
}
.filters-actions{display:flex;gap:10px;margin-left:auto}

/* === Force select styling (strong selector + chevron) === */
.filters select,
.card select,
.content select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  height:30px;
  padding:4px 34px 4px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background-color:#fff;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:18px 18px;

  cursor:pointer;
  font:inherit;
}
.filters select:focus,
.card select:focus,
.content select:focus{
  border-color:#bfdbfe;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  outline:none;
}

/* On small screens make actions full width */
@media (max-width:900px){
  .filters-actions{margin-left:0;width:100%}
  .filters-actions .btn{flex:1}
  .filters-group.grow{min-width:100%}
}

/* === Top shortcuts (mock-like) === */
.top-shortcuts{
  display:flex;
  gap:18px;
  align-items:center;
  margin:0 16px;
  padding:0 10px;
  height:42px;
  border-radius:999px;
  background:transparent;
}
.top-shortcuts a{
  font-weight:700;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
}
.top-shortcuts a:hover{background:#f1f5f9;color:#0f172a}
.top-shortcuts a.active{color:#0f172a}

/* Dashboard "Performans ve Trendler" */
.trends-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px
}
.trends-title{font-weight:1000;font-size:18px}
.trends-sub{color:var(--muted);font-size:13px;margin-top:2px}
.trends-dd{
  height:42px;border-radius:14px;border:1px solid var(--line);background:#fff;
  padding:0 14px;color:#0f172a;font-weight:800;
}
.trends-svg{width:100%;height:220px;display:block;border-radius:16px;background:#fff}
.trends-wrap{padding:14px}

/* TR label chips for status/priority (optional look) */
.tag{background:#fff}

/* === Layout: fixed sidebar, page scroll in main === */
html, body { height: 100%; }
body { overflow: hidden; }

.app { height: 100vh; }

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden; /* prevent whole sidebar moving */
  display: flex;
  flex-direction: column;
}

.nav{
  overflow-y: auto;            /* sidebar 자체 scroll */
  padding-bottom: 14px;
  flex: 1;
}

/* keep user card pinned */
.sidebar-user{
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.0), rgba(15,23,42,0.65));
  backdrop-filter: blur(6px);
}

/* main scroll */
.main{
  height: 100vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.topbar{ flex:0 0 auto; }
.content{
  flex:1;
  overflow-y:auto;
  padding-bottom: 24px;
}

/* smoother scroll */
.nav::-webkit-scrollbar, .content::-webkit-scrollbar { width: 10px; }
.nav::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 999px; }

/* === Compact trends block === */
.trends-wrap{ padding:14px; }
.trends-svg{ height: 160px; }          /* was 220 */
.trends-head{ margin-bottom: 6px; }
.trends-title{ font-size: 16px; }
.trends-sub{ font-size: 12px; }

/* === Active projects list v2 === */
.proj-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 12px;
  border-top:1px solid var(--line);
}
.proj-row:first-child{ border-top:0; }
.proj-left{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.proj-ava{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;
  background:#eef2ff;
  color:#1d4ed8;
  flex:0 0 auto;
}
.proj-text{ min-width:0; }
.proj-name{ font-weight:1000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj-sub{ color:var(--muted); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.proj-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.avatar-stack{ display:flex; align-items:center; }
.avatar-stack .a{
  width:28px;height:28px;border-radius:999px;
  border:2px solid #fff;
  background:#e2e8f0;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:11px;color:#0f172a;
  margin-left:-8px;
}
.avatar-stack .a:first-child{ margin-left:0; }
.avatar-stack .a.green{ background:#d1fae5; color:#065f46; }
.avatar-stack .a.purple{ background:#ede9fe; color:#5b21b6; }
.avatar-stack .a.orange{ background:#ffedd5; color:#9a3412; }
.avatar-stack .a.gray{ background:#e5e7eb; color:#111827; }

.proj-chip{
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--line);
  background:#f8fafc;
  color:#0f172a;
}
.proj-chip.ok{ background:#dcfce7;border-color:#bbf7d0;color:#166534; }
.proj-chip.rev{ background:#fef9c3;border-color:#fde68a;color:#854d0e; }
.proj-chip.wait{ background:#dbeafe;border-color:#bfdbfe;color:#1e40af; }

/* === Dashboard reference layout === */
.dash-top{ display:grid; grid-template-columns: 1fr 360px; gap:16px; align-items:stretch; }
.dash-top .cards-4{ grid-column:1; }
.dash-top .score-card{ grid-column:2; height:100%; }

.dash-mid{
  display:grid;
  grid-template-columns: 1fr 360px; /* left content + right notifications like ref */
  gap:16px;
  align-items:start;
  margin-top:16px;
}
.dash-bottom{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
  margin-top:16px;
}

/* Trend card fixed height */
.trend-card{ padding:14px; }
.trend-chart{
  margin-top:10px;
  height:260px;               /* fixed like ref */
  border-radius:16px;
  background:#fff;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
}
.trend-grid{
  position:absolute; inset:18px 18px 44px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none;
}
.trend-grid .line{
  height:1px;
  background: rgba(148,163,184,.22);
}

.trend-bars{
  position:absolute;
  inset:18px 18px 44px 18px;
  display:flex;
  gap:14px;
  align-items:flex-end;
}
.trend-bars .bar{
  flex:1;
  border-radius:14px 14px 6px 6px;
  background: rgba(37,99,235,.25);
}
.trend-bars .bar.active{ background: rgba(37,99,235,.95); }

.trend-x{
  position:absolute;
  left:18px; right:18px; bottom:14px;
  display:flex;
  gap:14px;
}
.trend-x span{
  flex:1;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

.trends-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.trends-title{ font-size:18px; font-weight:1000; }
.trends-sub{ font-size:13px; color:var(--muted); margin-top:2px; }
.trends-dd{
  height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#f8fafc;
  padding:0 14px;
  font-weight:900;
}

/* Keep active projects in left column only */
.dash-bottom .card{ width:100%; }

/* Tighten dashboard spacing so projects are not pushed too far down */
.dash-mid{ margin-top:12px; }
.dash-bottom{ margin-top:12px; }

/* Limit notifications height to keep dashboard balanced (reference-like) */
.dash-mid > .card:nth-child(2){
  max-height: 360px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.dash-mid > .card:nth-child(2) .list{
  overflow:auto;
  padding-right:6px;
}

/* Trend chart: slightly shorter */
.trend-chart{ height: 230px; }

/* Month view labels: too many -> show fewer labels */
.trend-x.month span{ opacity:0; }
.trend-x.month span.show{ opacity:1; }

/* Month bars: thinner look */
.trend-bars.month{ gap:8px; }
.trend-bars.month .bar{ border-radius:10px 10px 6px 6px; }


/* Make trend and notifications columns equal height */
.dash-mid{
  align-items:stretch !important;
}

/* Set same visual height for both cards (trend + notifications) */
.dash-mid .trend-card,
.dash-mid > .card:nth-child(2){
  min-height: 420px;   /* increase a bit so it matches notifications */
}

/* Trend chart internal sizing so bars don't float */
.trend-chart{
  height: 300px;              /* taller so it fills downwards */
}
.trend-grid{
  inset: 18px 18px 56px 18px; /* give more bottom space for labels */
}
.trend-bars{
  inset: 18px 18px 56px 18px; /* same as grid => baseline consistent */
  align-items:flex-end;
}

/* Bars baseline feel */
.trend-bars .bar{
  transform: translateZ(0);
}

/* Notifications list gets more room and scrolls cleanly */
.dash-mid > .card:nth-child(2) .list{
  flex:1;
  overflow:auto;
}

/* === Phase-1 completion modules === */
.tag.ok{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.tag.warn{background:#fee2e2;border-color:#fecaca;color:#991b1b}

.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.risk-item{
  display:flex;flex-direction:column;gap:4px;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff
}
.risk-item.medium{background:#fff7ed;border-color:#fed7aa}
.risk-item.high{background:#fef3c7;border-color:#fde68a}
.risk-item.critical{background:#fee2e2;border-color:#fecaca}

.okr-grid{display:grid;grid-template-columns:1fr 330px;gap:12px}
.okr-group-row td{background:#f8fafc;font-weight:900}
.okr-progress{height:8px;background:#eef2f7;border-radius:999px;overflow:hidden}
.okr-progress i{display:block;height:8px;background:#3b82f6;border-radius:999px}
.okr-status.not_started{background:#f3f4f6}
.okr-status.in_progress{background:#dbeafe}
.okr-status.at_risk{background:#fef3c7}
.okr-status.complete{background:#dcfce7}

.okr-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.okr-col{padding:12px}
.okr-col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.okr-col-head.not_started{color:#374151}
.okr-col-head.in_progress{color:#1e40af}
.okr-col-head.at_risk{color:#92400e}
.okr-col-head.complete{color:#166534}
.okr-col-body{display:flex;flex-direction:column;gap:8px}
.okr-card{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}

.okr-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.okr-gallery-card{padding:10px}
.okr-gallery-media{
  height:120px;border-radius:12px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:900
}
.okr-gallery-media.not_started{background:#f3f4f6}
.okr-gallery-media.in_progress{background:#dbeafe}
.okr-gallery-media.at_risk{background:#fef3c7}
.okr-gallery-media.complete{background:#dcfce7}
.okr-gallery-media svg{
  width:34px;
  height:34px;
  stroke-width:2;
}
.okr-gallery-media.complete{
  background:#ECFDF5;
  color:#0DAA6F;
  border:1px solid #A7F3D0;
}
.okr-gallery-media.in_progress{
  background:#EEF0FD;
  color:#3B4FE8;
  border:1px solid #D4D8FB;
}
.okr-gallery-media.at_risk{
  background:#FEF2F2;
  color:#E84040;
  border:1px solid #FECACA;
}
.okr-gallery-media.not_started{
  background:#FFFBEB;
  color:#E8930D;
  border:1px solid #FDE68A;
}

.okr-mini-bars{display:flex;flex-direction:column;gap:8px}
.okr-mini-row{display:grid;grid-template-columns:110px 1fr 30px;align-items:center;gap:8px}
.okr-mini-row span{font-size:13px;color:#475569}
.okr-mini-bar{height:8px;background:#eef2f7;border-radius:999px;overflow:hidden}
.okr-mini-bar i{display:block;height:8px;background:#3b82f6;border-radius:999px}

.wiki-grid{display:grid;grid-template-columns:280px 1fr 320px;gap:12px}
.wiki-sidebar{padding:12px}
.wiki-sidebar-title{font-weight:900}
.wiki-link{
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-weight:700
}
.wiki-link.active{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.wiki-prose{line-height:1.7;white-space:pre-wrap}

.chat-grid{display:grid;grid-template-columns:340px 1fr;gap:12px}
.chat-thread{
  border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;display:block
}
.chat-thread.active{border-color:#bfdbfe;background:#eff6ff}
.chat-messages{
  border:1px solid var(--line);border-radius:14px;padding:10px;background:#fafcff;
  max-height:460px;overflow:auto;display:flex;flex-direction:column;gap:8px
}
.chat-msg{border-radius:12px;padding:10px}
.chat-msg.other{background:#fff;border:1px solid var(--line)}
.chat-msg.mine{background:#dbeafe;border:1px solid #bfdbfe}
.chat-msg-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:4px}
.chat-msg-body{white-space:pre-wrap}

.integrations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.integration-card{padding:14px}

@media (max-width:1200px){
  .wiki-grid{grid-template-columns:1fr}
  .okr-grid{grid-template-columns:1fr}
  .okr-board{grid-template-columns:repeat(2,1fr)}
  .chat-grid{grid-template-columns:1fr}
}

@media (max-width:800px){
  .risk-grid{grid-template-columns:1fr}
  .okr-gallery{grid-template-columns:1fr}
  .okr-board{grid-template-columns:1fr}
  .integrations-grid{grid-template-columns:1fr}
}

/* Mobil uyumluluk güçlendirmeleri */
@media (max-width:1100px){
  body{overflow:auto}
  .app{height:auto;min-height:100vh}
  .main{height:auto;overflow:visible}
  .content{overflow:visible;padding:12px}

  .topbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 12px;
  }

  .search{order:1;flex:1 1 220px;min-width:180px}
  .search input{width:100%;max-width:100%}

  .top-actions{order:2;margin-left:auto;gap:8px}

  .top-shortcuts{
    order:3;
    width:100%;
    margin:2px 0 0 0;
    padding:4px 2px;
    gap:8px;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .top-shortcuts a{flex:0 0 auto}

  .card{padding:14px}
  h1{font-size:24px}
}

@media (max-width:900px){
  .row-between{flex-wrap:wrap;align-items:flex-start}
  .page-head{gap:8px}

  .dash-top,.dash-mid,.dash-bottom{grid-template-columns:1fr !important}
  .cards-4{grid-template-columns:1fr 1fr}
  .score-num{font-size:52px}

  .top-actions .btn .btn-label{display:none}
  .top-actions .btn{padding:10px}
  .top-actions .btn svg{margin:0}

  .chat-messages{max-height:none}

  .form-okr-create{display:block !important}
  .form-okr-create > div{margin-bottom:10px}

  .table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}

@media (max-width:640px){
  .content{padding:10px}
  .cards-4{grid-template-columns:1fr}

  h1{font-size:22px}
  h2{font-size:17px}

  .table th,.table td{padding:10px;font-size:13px}

  .top-actions{
    width:100%;
    justify-content:space-between;
  }
  .top-actions .btn{flex:1}
  .icon-btn{flex:0 0 42px}
}

/* Masaustu topbar tasma duzeltmeleri */
.topbar{gap:12px}
.search{flex:0 1 360px;min-width:220px}
.search input{width:100%;max-width:100%}
.top-shortcuts{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.top-shortcuts::-webkit-scrollbar{display:none}
.top-actions{flex:0 0 auto;margin-left:8px}
.top-actions .btn{white-space:nowrap}

/* Erken uyari kartinda dikey kaydirma */
.early-warning-card .risk-list-scroll{
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}
.early-warning-card .risk-list-scroll::-webkit-scrollbar{width:8px}
.early-warning-card .risk-list-scroll::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
}

/* Gorev gorunum modlari */
.task-view-switch{display:flex;gap:8px;flex-wrap:wrap}
.kanban-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:12px;
}
.kanban-col{
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
  padding:10px;
}
.kanban-col-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-weight:900;
}
.kanban-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto}
.kanban-card{
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:10px;
}
.kanban-meta{font-size:12px;color:var(--muted);margin-top:4px}

.task-calendar{display:flex;flex-direction:column;gap:10px}
.task-calendar-day{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:12px;
}
.task-calendar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.task-timeline{position:relative;display:flex;flex-direction:column;gap:10px}
.task-timeline:before{
  content:'';
  position:absolute;
  left:11px;
  top:0;
  bottom:0;
  width:2px;
  background:#dbeafe;
}
.task-timeline-item{
  position:relative;
  margin-left:28px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:10px;
}
.task-timeline-item:before{
  content:'';
  position:absolute;
  left:-22px;
  top:16px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#2563eb;
}

.okr-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wiki-admin-form{display:flex;flex-direction:column;gap:8px}

@media (max-width:1200px){
  .search{flex:0 1 260px;min-width:170px}
  .top-shortcuts{gap:10px}
}

@media (max-width:900px){
  .kanban-board{grid-template-columns:1fr 1fr}
}

@media (max-width:680px){
  .kanban-board{grid-template-columns:1fr}
}

/* === Patch v9: full mobile alignment + help center === */
.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.top-actions .btn{
  white-space:nowrap;
}

.responsive-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.responsive-form-grid-three{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.field-full{
  grid-column:1 / -1;
}
.form-actions-wrap{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.two-col-equal{
  grid-template-columns:1fr 1fr;
}
.team-overview-grid{
  grid-template-columns:1.35fr .65fr;
}

.manager-pill{
  padding:10px 12px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:12px;
}

.task-detail-grid{
  grid-template-columns:1fr .9fr;
}
.task-header-row{
  margin-bottom:10px;
}
.task-tag-wrap{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.task-action-wrap{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.task-inline-form{
  margin:0;
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.task-inline-grow{
  min-width:260px;
  flex:1;
}

.tasks-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.wiki-page-list{
  gap:6px;
  margin-top:8px;
}
.wiki-content-head{
  margin-bottom:10px;
}
.wiki-current-title{
  margin:0;
}
.wiki-ai-card{
  padding:12px;
  border-radius:14px;
}
.wiki-ai-text{
  white-space:pre-wrap;
}

.integration-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.okr-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chat-thread-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chat-send-form{
  margin-top:10px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.chat-send-grow{
  flex:1;
  min-width:220px;
}

.help-tabs-wrap{
  padding:12px;
}
.help-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.help-tab{
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 12px;
  font-weight:800;
  color:var(--muted);
  background:#fff;
}
.help-tab.active{
  color:#0f172a;
  border-color:#bfdbfe;
  background:#eff6ff;
}
.help-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:12px;
}
.help-article{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.help-shortcuts{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.help-shortcut-row{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.shortcut-dialog{
  width:min(560px, calc(100vw - 24px));
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}
.shortcut-dialog::backdrop{
  background:rgba(15,23,42,.45);
}

@media (max-width:1200px){
  .help-grid{grid-template-columns:1fr}
}

@media (max-width:1024px){
  .top-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .top-actions .btn{
    height:40px;
  }

  .task-detail-grid,
  .team-overview-grid,
  .two-col-equal{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:900px){
  .responsive-form-grid,
  .responsive-form-grid-three{
    grid-template-columns:1fr;
  }
  .field-full{
    grid-column:auto;
  }

  .manager-pill{
    width:100%;
    justify-content:space-between;
  }

  .tasks-head-actions{
    justify-content:flex-start;
  }

  .task-inline-grow{
    min-width:100%;
  }
}

@media (max-width:640px){
  .topbar{
    gap:10px;
  }
  .top-actions{
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    flex-wrap:nowrap;
    justify-content:flex-start;
    padding-bottom:2px;
  }
  .top-actions .btn{
    flex:0 0 auto;
  }
  .top-actions .icon-btn{
    flex:0 0 40px;
    width:40px;
    height:40px;
  }

  .help-tabs{
    overflow-x:auto;
    white-space:nowrap;
    flex-wrap:nowrap;
    padding-bottom:2px;
  }
  .help-tab{
    flex:0 0 auto;
  }

  .chat-thread-actions{
    width:100%;
  }
  .chat-thread-actions .form{
    width:100%;
  }
  .chat-thread-actions .btn{
    width:100%;
  }
}

/* === Patch v10: multiple assignee select stability (Safari/mobile) === */
.form select[multiple],
.card select[multiple],
.content select[multiple]{
  -webkit-appearance: listbox !important;
  -moz-appearance: listbox !important;
  appearance: listbox !important;
  height: auto !important;
  min-height: 180px;
  padding: 8px 10px !important;
  background-image: none !important;
  overflow-y: auto;
}

.form select[multiple]:disabled,
.card select[multiple]:disabled,
.content select[multiple]:disabled{
  color:#94a3b8;
  background:#f8fafc !important;
}

/* Dashboard alan optimizasyonu */
.early-warning-card .risk-list-scroll{
  max-height:180px !important;
}

/* Takvim dünya saati */
.world-clock-grid .stat-card{
  min-height:120px;
}

/* === Planico Kurumsal Tema (Marka Kataloğu Uyumlu) === */
:root{
  --bg:#F1F5F9;
  --card:#FFFFFF;
  --text:#475569;
  --muted:#94A3B8;
  --line:#E2E8F0;

  --blue:#3B4FE8;
  --blue2:#2D3FCA;
  --sidebar:#0F2044;
  --sidebar2:#1E3A8A;

  --green:#0DAA6F;
  --orange:#E8930D;
  --yellow:#E8930D;
  --red:#E84040;
}

body{
  font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
h1,h2,h3,.brand-title,.stat-val,.trends-title{
  font-family:"Montserrat","Inter","Segoe UI",sans-serif;
  color:#0F2044;
}
code,pre,.mono{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

.sidebar{
  background:linear-gradient(180deg,var(--sidebar),#11295f);
  color:#d7e3ff;
}
.brand{
  padding:18px 18px 12px;
}
.brand-logo-image{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brand-logo-image img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.brand-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
  color:#ffffff;
}
.brand-sub{
  color:#c7d6ff;
  font-size:12px;
}

.nav-item{
  color:#dbe7ff;
}
.nav-item:hover{
  background:rgba(59,79,232,.22);
}
.nav-item.active{
  background:#3B4FE8;
  color:#fff;
}
.nav-item.active .nav-badge{
  background:#ffffff;
  color:#2D3FCA;
}

.topbar{
  background:#ffffff;
  border-bottom:1px solid var(--line);
}
.search input{
  background:#F8FAFC;
  border-color:var(--line);
}

.card{
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(15,32,68,.03);
}
.table th{
  background:#F8FAFC;
}

.btn-primary{
  background:var(--blue);
  border-color:var(--blue);
}
.btn-primary:hover{
  background:var(--blue2);
  border-color:var(--blue2);
}
.btn{
  border-color:var(--line);
}

.score-card,
.score-card-mock{
  background:linear-gradient(135deg,#0F2044,#1E3A8A);
  box-shadow:0 14px 28px rgba(15,32,68,.2);
}

.stat-card.green:before{background:#0DAA6F}
.stat-card.orange:before,
.stat-card.yellow:before{background:#E8930D}

.alert-danger{
  background:#FEF2F2;
  border-color:#FECACA;
  color:#991B1B;
}
.alert-success{
  background:#ECFDF5;
  border-color:#A7F3D0;
  color:#065F46;
}

.tag.status-done,
.pill.status-done{
  background:#ECFDF5;
  border-color:#A7F3D0;
  color:#0DAA6F;
}
.tag.status-review,
.pill.status-review{
  background:#FFFBEB;
  border-color:#FDE68A;
  color:#E8930D;
}
.tag.status-risk,
.pill.status-risk{
  background:#FEF2F2;
  border-color:#FECACA;
  color:#E84040;
}

.form input:focus,.form select:focus,.form textarea:focus{
  border-color:#3B4FE8;
  box-shadow:0 0 0 4px rgba(59,79,232,.12);
}

.auth-top{
  background:#ffffff;
  border-bottom:1px solid var(--line);
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.auth-logo{
  width:160px;
  max-width:42vw;
  height:auto;
  display:block;
}
.auth-brand-tag{
  font-size:13px;
  color:#64748B;
  font-weight:600;
}
.auth-hero-soft{
  background:
    radial-gradient(1200px 280px at 20% 20%, rgba(59,79,232,.35), transparent 55%),
    radial-gradient(900px 240px at 90% 10%, rgba(13,170,111,.2), transparent 55%),
    linear-gradient(120deg,#0F2044,#1E3A8A);
}
.auth-hero-title,
.auth-hero-sub{
  color:#ffffff;
}

.score-h,
.score-num,
.score-out,
.score-m-top{
  color:#ffffff;
}

.link{
  color:#3B4FE8;
}

/* === Planico Strict v14: palet + tipografi + ikon standardı === */
:root{
  --brand-deep-navy:#0F2044;
  --brand-electric-indigo:#3B4FE8;
  --brand-slate-blue:#1E3A8A;
  --brand-indigo-hover:#2D3FCA;
  --brand-indigo-active:#1E2E9E;

  --semantic-emerald:#0DAA6F;
  --semantic-amber:#E8930D;
  --semantic-coral:#E84040;
  --semantic-purple:#7C3AED;

  --ui-bg:#F1F5F9;
  --ui-card:#FFFFFF;
  --ui-border:#E2E8F0;
  --ui-muted:#94A3B8;
  --ui-body:#475569;
  --ui-dark:#0B1628;
}

html{font-size:16px}
body{
  font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.5;
  color:var(--ui-body);
  background:var(--ui-bg);
}
h1{
  font-family:"Montserrat","Inter","Segoe UI",sans-serif;
  font-weight:600;
  font-size:clamp(2rem,2.2vw,2.25rem);
  line-height:1.2;
  color:var(--brand-deep-navy);
}
h2{
  font-family:"Montserrat","Inter","Segoe UI",sans-serif;
  font-weight:500;
  font-size:1.75rem;
  line-height:1.25;
  color:var(--brand-deep-navy);
}
h3{
  font-family:"Montserrat","Inter","Segoe UI",sans-serif;
  font-weight:500;
  font-size:1.3rem;
  line-height:1.3;
  color:var(--brand-deep-navy);
}
.muted{color:var(--ui-muted)}
code,pre,.mono{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

.sidebar{
  background:linear-gradient(180deg,var(--brand-deep-navy),var(--brand-slate-blue));
}
.brand-title{
  color:#fff;
  font-family:"Montserrat","Inter",sans-serif;
  font-weight:700;
}
.brand-sub{color:#bfd2ff}
.nav-item{color:#d9e5ff}
.nav-item:hover{background:rgba(59,79,232,.2)}
.nav-item.active{background:var(--brand-electric-indigo)}
.nav-item.active .nav-badge{
  background:#fff;
  color:var(--brand-indigo-hover);
}
.nav-section{color:#97abd6}

.topbar,.card{background:var(--ui-card)}
.card{
  border:1px solid var(--ui-border);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(15,32,68,.02);
}
.search input{
  background:#f8fafc;
  border-color:var(--ui-border);
}

.btn{
  font-family:"Inter","Segoe UI",sans-serif;
  font-weight:600;
  border:1px solid var(--ui-border);
  color:var(--brand-slate-blue);
  background:#fff;
}
.btn-primary{
  color:#fff;
  background:var(--brand-electric-indigo);
  border-color:var(--brand-electric-indigo);
}
.btn-primary:hover{
  background:var(--brand-indigo-hover);
  border-color:var(--brand-indigo-hover);
}
.btn-primary:focus-visible,
.btn-primary:active{
  background:var(--brand-indigo-active);
  border-color:var(--brand-indigo-active);
}
.btn:not(.btn-primary):hover{
  background:#EEF0FD;
  border-color:var(--brand-electric-indigo);
  color:var(--brand-slate-blue);
}
.btn:not(.btn-primary):active{
  background:#D4D8FB;
}

.form input,.form select,.form textarea{
  border:1px solid var(--ui-border);
  color:var(--ui-body);
}
.form input:hover,.form select:hover,.form textarea:hover{
  border-color:var(--brand-electric-indigo);
}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--brand-deep-navy);
  box-shadow:0 0 0 4px rgba(15,32,68,.14);
}

.table th,.table td{border-bottom:1px solid var(--ui-border)}
.table th{
  background:#f8fafc;
  color:var(--ui-body);
  font-weight:600;
}

.tag{
  border-color:var(--ui-border);
  color:var(--ui-body);
}
.tag.ok,.tag.status-done,.pill.status-done{
  background:#ECFDF5;
  border-color:#A7F3D0;
  color:var(--semantic-emerald);
}
.tag.warn,.tag.status-review,.pill.status-review{
  background:#FFFBEB;
  border-color:#FDE68A;
  color:var(--semantic-amber);
}
.tag.err,.tag.status-risk,.pill.status-risk{
  background:#FEF2F2;
  border-color:#FECACA;
  color:var(--semantic-coral);
}

.list-item:hover{
  background:#F1F5F9;
  box-shadow:0 4px 18px rgba(15,32,68,.06);
}

.badge{background:var(--semantic-coral)}
.icon-btn{
  color:var(--brand-slate-blue);
  border-color:var(--ui-border);
}
.icon-btn:hover{
  background:#EEF0FD;
  border-color:#D4D8FB;
}
.nav-ico svg,
.icon-btn svg,
.btn svg,
.stat-ico svg,
.icon-in svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}

.stat-ico{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid #D4D8FB;
  background:#EEF0FD;
  color:var(--brand-indigo-hover);
  font-size:0;
}
.stat-card.green .stat-ico{
  border-color:#a7f3d0;
  background:#ecfdf5;
  color:var(--semantic-emerald);
}
.stat-card.orange .stat-ico,
.stat-card.yellow .stat-ico{
  border-color:#fde68a;
  background:#fffbeb;
  color:var(--semantic-amber);
}

.score-card,.score-card-mock{
  background:linear-gradient(135deg,var(--brand-deep-navy),var(--brand-slate-blue));
}
.delta.pos{background:#ECFDF5;border-color:#A7F3D0;color:var(--semantic-emerald)}
.delta.neg{background:#FEF2F2;border-color:#FECACA;color:var(--semantic-coral)}

.alert-success{background:#ECFDF5;border-color:#A7F3D0;color:#047857}
.alert-danger{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}

.inline-done-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--semantic-emerald);
  margin-right:6px;
  vertical-align:middle;
}
.inline-done-ico svg{
  width:14px;
  height:14px;
}