/* =========================================
   CAREER OS — PRODUCT POLISH LAYER
   Extends style.css / responsive.css without
   touching the original design tokens.
   ========================================= */

:root{
  --border: var(--line);
  --radius-lg: 14px;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.25), 0 12px 28px -12px rgba(0,0,0,.45);
  --shadow-lift: 0 18px 40px -16px rgba(61,220,151,.18);
}

/* ---------- App shell polish ---------- */
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(61,220,151,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(61,220,151,.05), transparent 55%),
    var(--bg);
}

.sidebar{
  backdrop-filter: blur(6px);
  z-index: 20;
}
.brand{
  display:flex; align-items:flex-start; gap:10px;
}
.brand .brandmark{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), #1f8f66);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:800;color:#04150F;font-size:15px;
  box-shadow:0 6px 16px -6px rgba(61,220,151,.55);
}
.brand .brandtext{display:flex;flex-direction:column;}

.navitem{position:relative;}
.navitem.active::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
  border-radius:3px;background:var(--accent);
}
.navitem .ico{font-size:15px;}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:15;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 34px;margin:-28px -34px 24px;
  background:rgba(11,15,20,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .search{
  flex:1;max-width:420px;position:relative;
}
.topbar .search input{
  width:100%;padding:9px 12px 9px 34px;border-radius:9px;
}
.topbar .search::before{
  content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--sub);font-size:15px;pointer-events:none;
}
.topbar-right{display:flex;align-items:center;gap:14px;}
.streak-chip{
  display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;
  color:var(--warn);background:#241a0a;border:1px solid #3a2e15;padding:6px 12px;border-radius:20px;
}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--accent);
}
.hamburger{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer;}

/* Panels & cards lift */
.panel{
  box-shadow: var(--shadow-soft);
  transition: border-color .15s ease;
}
.stat{transition:transform .15s ease, border-color .15s ease;}
.stat:hover{transform:translateY(-2px); border-color: var(--accent-dim);}

.card{transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;}
.card:hover{transform:translateY(-2px); border-color:var(--accent-dim); box-shadow:var(--shadow-soft);}

.btn{
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 8px 18px -8px rgba(61,220,151,.45);
}
.btn:hover{transform:translateY(-1px); opacity:.94;}
.btn:active{transform:translateY(0);}
.btn.ghost{box-shadow:none;}
.btn.ghost:hover{background:var(--panel-2);}

.tabbtn{transition:background .12s ease,color .12s ease,border-color .12s ease;}
.tabbtn:hover{color:var(--text); border-color:var(--accent-dim);}

/* Landing / hero (dashboard) */
.hero{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 28px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); margin-bottom:20px; box-shadow:var(--shadow-soft);
}
.hero h2{margin:0 0 6px;font-size:22px;}
.hero p{margin:0;color:var(--sub);font-size:13px;max-width:520px;}
.hero-actions{display:flex;gap:10px;flex-shrink:0;}

/* Empty / loading states */
.empty-state{
  text-align:center;padding:44px 20px;border:1px dashed var(--line);border-radius:12px;color:var(--sub);
}

/* Form layout helpers */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px;}
.form-grid label{display:block;font-size:11px;font-weight:600;color:var(--sub);margin-bottom:6px;}
.form-grid .full{grid-column:1 / -1;}

/* Scoped scroll for main app */
.app{position:relative;}
.main{position:relative;}

/* Toast (used by copy actions etc, optional) */
.toast{
  position:fixed;bottom:22px;right:22px;background:var(--panel);border:1px solid var(--accent-dim);
  color:var(--accent);padding:10px 16px;border-radius:9px;font-size:12.5px;font-family:var(--mono);
  box-shadow:var(--shadow-soft);z-index:60;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1;transform:translateY(0);}

/* Mobile shell */
@media (max-width: 900px){
  .hamburger{display:inline-flex;}
  .sidebar{
    position:fixed;left:0;top:0;transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:0 0 0 100vmax rgba(0,0,0,0);
  }
  .sidebar.open{transform:translateX(0); box-shadow:0 0 0 100vmax rgba(0,0,0,.5);}
  .main{padding:20px 16px 60px;}
  .topbar{padding:12px 16px;margin:-20px -16px 18px;}
  .topbar .search{display:none;}
  .hero{flex-direction:column;align-items:flex-start;}
  .form-grid{grid-template-columns:1fr;}
}

.status-not-started,
.status-in-progress,
.status-completed {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status-not-started {
  opacity: 0.65;
}

.status-in-progress {
  font-weight: 700;
}

.status-completed {
  font-weight: 700;
}