:root {
  color-scheme: dark;
  --bg: #080b10;
  --ink: #eef6ff;
  --muted: #94a3b8;
  --panel: rgba(18, 24, 36, 0.66);
  --line: rgba(218, 229, 246, 0.16);
  --accent: #ff9b45;
  --accent-dark: #ff5d38;
  --orange: #ff9b45;
  --amber: #ffc857;
  --green: #51e6a5;
  --red: #ff7373;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 133, 61, 0.18), transparent 34%),
    radial-gradient(circle at 82% 4%, rgba(255, 190, 85, 0.11), transparent 30%),
    linear-gradient(135deg, #080b10 0%, #111827 48%, #0c111d 100%);
  color: var(--ink);
}

button, input, select, textarea { font: inherit; }

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.hero-banner {
  min-height: 230px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 30px 32px;
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  background: linear-gradient(115deg, rgba(28,34,47,.86), rgba(21,25,36,.55) 56%, rgba(255,145,68,.11));
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.14), inset 0 -1px rgba(255,255,255,.04);
  backdrop-filter: blur(24px) saturate(145%);
}
.hero-banner::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(ellipse at 76% 18%, rgba(255,177,106,.15), transparent 42%), linear-gradient(135deg, rgba(255,255,255,.045), transparent 45%); }
.hero-copy { position:relative; z-index:2; max-width:56%; }
.hero-subtitle { margin:12px 0 0; color:#c0cada; font-size:.96rem; }
.hero-geometry { position:absolute; z-index:1; width:min(40%, 340px); height:125%; object-fit:contain; right:16%; top:50%; transform:translateY(-50%); filter:drop-shadow(0 16px 38px rgba(255,145,68,.23)); animation:hero-float 6s ease-in-out infinite; pointer-events:none; }
.hero-banner > .primary-btn { position:relative; z-index:3; flex-shrink:0; }
@keyframes hero-float { 0%,100% { translate:0 -48%; } 50% { translate:0 -52%; } }

.eyebrow {
  margin: 0 0 6px;
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 0.95;
  color: var(--orange);
  text-shadow: 0 0 34px rgba(255, 133, 61, 0.2);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.summary-card, .panel, .project-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(31,39,54,.76), rgba(13,18,28,.63));
  backdrop-filter: blur(22px) saturate(135%);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.09);
}

.panel-heading h2, .reminder-dashboard h2 { color: var(--orange); }

.summary-card {
  min-height: 118px;
  padding: 18px;
  border-radius: 16px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.summary-card span { color: var(--muted); font-size: 0.9rem; }
.summary-card strong { font-size: clamp(1.5rem, 3vw, 2.35rem); }
.summary-card #unpaidAmount { display: block; min-width: 0; max-width: 100%; font-size: clamp(1.05rem, 1.9vw, 1.75rem); line-height: 1.1; letter-spacing: -0.035em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.summary-card:hover { transform: translateY(-4px); border-color: rgba(255, 155, 69, 0.42); box-shadow: 0 20px 60px rgba(255, 112, 52, 0.12); }
.unpaid-card span { color: var(--red); }
.unpaid-card strong { color: var(--orange); }
.summary-card.accent {
  background: linear-gradient(135deg, rgba(255, 133, 61, 0.2), rgba(255, 200, 87, 0.12));
  color: var(--ink);
  border-color: rgba(255, 155, 69, 0.34);
}
.summary-card.accent span { color: #c5d3e6; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.workspace.has-form { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }

.panel {
  border-radius: 16px;
  padding: 18px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-heading h2 { margin-bottom: 0; font-size: 1.15rem; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }

form { display: grid; gap: 13px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(4, 9, 15, 0.74);
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 155, 69, 0.18); }
textarea { resize: vertical; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
  border: 0;
  border-radius: 14px;
  min-height: 42px;
  padding: 0 15px;
  cursor: pointer;
  font-weight: 800;
}
.primary-btn {
  background: linear-gradient(120deg, var(--accent), var(--accent-dark));
  color: #201108;
  box-shadow: 0 8px 24px rgba(255, 112, 52, 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.primary-btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 112, 52, 0.32); }
.wide { width: 100%; }
.secondary-btn { background: rgba(148, 163, 184, 0.16); color: var(--ink); }
.ghost-btn { background: transparent; color: var(--accent); }
.danger-btn { background: rgba(255, 115, 115, 0.13); color: var(--red); }
.hidden { display: none; }

.list-heading { align-items: flex-start; }
.list-heading select { max-width: 150px; }
.project-list { display: grid; gap: 12px; }

.project-card {
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  animation: card-enter 360ms cubic-bezier(.2,.75,.25,1) both;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.project-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--orange), transparent); opacity: 0.75; }
.project-card:hover { transform: translateY(-3px); border-color: rgba(255, 155, 69, 0.35); box-shadow: 0 22px 64px rgba(0, 0, 0, 0.48), 0 0 32px rgba(255, 112, 52, 0.08); }
@keyframes card-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.project-topline, .project-meta, .card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 155, 69, 0.12);
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 900;
}
.status-pill.status-brief { background: rgba(124, 92, 255, 0.16); color: #b6a3ff; }
.status-pill.status-production { background: rgba(255, 155, 69, 0.16); color: #ffad61; }
.status-pill.status-revision { background: rgba(255, 200, 87, 0.16); color: #ffd36d; }
.status-pill.status-done { background: rgba(81, 230, 165, 0.15); color: #63e9ae; }
.deadline-label { color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.project-card h3 { margin: 14px 0 4px; font-size: 1.25rem; color: var(--orange); }
.client { color: var(--muted); margin-bottom: 12px; }
.team-fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.team-fieldset legend { padding: 0 6px; color: var(--ink); font-size: 0.9rem; font-weight: 700; }
.field-hint, .team-empty { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.team-members { display: grid; gap: 12px; }
.team-member-row { display: grid; gap: 10px; padding: 12px; margin-bottom: 12px; background: rgba(4, 9, 15, 0.45); border: 1px solid var(--line); border-radius: 8px; }
.team-member-row input { min-width: 0; }
.team-breakdown { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.team-breakdown h4 { margin: 0 0 10px; font-size: 0.9rem; }
.team-member-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.team-member-list li, .team-totals > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9rem; }
.team-member-list span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.team-totals { display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.team-totals strong { color: var(--ink); overflow-wrap: anywhere; }
.team-totals .margin, #formMargin { color: var(--accent); }
.team-totals .negative, #formMargin.negative { color: var(--red); }
.margin-warning { color: var(--red); font-size: 0.83rem; line-height: 1.5; margin: 10px 0 0; }
.reminder-dashboard { margin-bottom: 18px; }
.reminder-dashboard h2 { font-size: 1rem; margin-bottom: 10px; }
#nextReminder { color: var(--accent); line-height: 1.6; overflow-wrap: anywhere; }
.reminder-dashboard .field-hint, .schedule-fields .field-hint { margin-bottom: 0; }
.schedule-fields { display: grid; gap: 13px; }
.schedule-fields .two-col { grid-template-columns: minmax(0, 1fr); }
.schedule-breakdown { padding: 14px 0; border-top: 1px solid var(--line); }
.schedule-breakdown h4 { margin: 0 0 10px; font-size: 0.9rem; }
.next-milestone, .next-reminder { font-size: 0.85rem; color: var(--accent); line-height: 1.5; }
.next-reminder { margin: 12px 0 0; }
.milestone-list { display: grid; gap: 10px; }
.milestone-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px; background: rgba(4, 9, 15, 0.45); border-radius: 8px; }
.milestone-row > div { display: grid; gap: 4px; min-width: 0; font-size: 0.85rem; }
.milestone-row span, .milestone-row small { color: var(--muted); }
.workspace > *, .project-card { min-width: 0; }
.notes { color: #c8d2df; line-height: 1.5; margin-bottom: 14px; }
.project-meta { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-weight: 800; }
.payment.paid { color: var(--green); }
.payment.unpaid { color: var(--red); }
.payment.partial { color: var(--orange); }
.card-actions { justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
body.modal-open { overflow: hidden; }
.edit-dialog { width: min(560px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; margin: auto; border: 1px solid rgba(255, 155, 69, 0.3); border-radius: 18px; background: rgba(16,24,36,.96); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; backdrop-filter:blur(22px); }
.edit-dialog::backdrop { background: rgba(2, 6, 12, 0.78); backdrop-filter: blur(5px); }
.modal-form { display: flex; flex-direction: column; gap: 0; max-height: calc(100dvh - 34px); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.modal-header > div { min-width: 0; }
.modal-header h2 { font-size: 1.2rem; margin: 0 0 6px; }
.modal-header p { margin: 0; overflow-wrap: anywhere; }
.modal-header .close-modal { width: auto; flex-shrink: 0; }
.modal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.modal-body input, .modal-body select { min-width: 0; font-size: 16px; }
.modal-body .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-body .team-fieldset { padding: 0; border: 0; }
.modal-body legend { margin-bottom: 12px; padding: 0; }
.modal-fee { color: var(--muted); font-size: 0.9rem; }
.modal-fee strong { color: var(--accent); }
.modal-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); flex-shrink: 0; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.empty-state {
  padding: 44px 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 860px) {
  .hero-banner { min-height:210px; }
  .hero-geometry { right:14%; width:38%; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace, .workspace.has-form { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 520px) {
  .hero-banner { min-height:245px; padding:22px; align-items:flex-start; justify-content:flex-start; flex-direction:column; }
  .hero-copy { max-width:78%; }
  .hero-geometry { width:58%; height:100%; right:-3%; top:48%; opacity:.76; }
  .hero-banner > .primary-btn { margin-top:auto; }
  .modal-header, .modal-body { padding: 16px; }
  .modal-footer { padding: 14px 16px; }
  .modal-body .two-col { grid-template-columns: minmax(0, 1fr); }
  .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .milestone-row { flex-direction: column; align-items: stretch; }
  .app-shell { width: min(100% - 20px, 1180px); padding-top: 18px; }
  .summary-grid, .two-col { grid-template-columns: 1fr; }
  .panel, .summary-card, .project-card { padding: 14px; }
  .project-topline, .project-meta, .card-actions, .list-heading { align-items: stretch; flex-direction: column; }
  .list-heading select { max-width: none; }
  .primary-btn, .secondary-btn, .ghost-btn, .danger-btn { width: 100%; }
}

/* Reference-matched dashboard composition */
body { background: radial-gradient(ellipse at 72% 10%, rgba(255,122,38,.12), transparent 35%), linear-gradient(125deg,#0a0d12,#11161d 55%,#0b1016); }
.app-shell { width:100%; min-height:100vh; margin:0; padding:0; display:grid; grid-template-columns:254px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 14px; display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.075); background:linear-gradient(180deg,rgba(24,30,39,.96),rgba(13,18,25,.96)); }
.sidebar-brand { height:50px; padding:1px 24px; color:#f5f6f8; font-size:1.48rem; font-weight:900; letter-spacing:-.055em; text-decoration:none; white-space:nowrap; }
.sidebar-brand span, .hero-banner h1 span { color:#ff792e; }
.side-nav { display:grid; gap:8px; margin-top:26px; }
.nav-item { min-height:56px; padding:0 18px; display:flex; align-items:center; gap:15px; border:1px solid transparent; border-radius:10px; color:#c8ced8; font-size:.94rem; text-decoration:none; transition:background .18s,border-color .18s,color .18s; }
.nav-item:hover, .nav-item.active { color:#ff9a45; border-color:rgba(255,132,53,.43); background:linear-gradient(110deg,rgba(255,128,42,.16),rgba(255,255,255,.035)); }
.nav-icon { width:24px; text-align:center; font-size:1.22rem; color:#9da7b6; }
.nav-item.active .nav-icon { color:#ff8c35; }
.sidebar-note { margin:auto 24px 8px; padding:18px 0 0 18px; border-top:1px solid rgba(255,255,255,.12); border-left:2px solid #ff8337; color:#aeb7c4; font-size:.85rem; line-height:1.8; }
.sidebar-note span { color:#ff9a45; letter-spacing:.12em; font-size:.7rem; }
.main-column { min-width:0; }
.topbar { position:sticky; top:0; z-index:10; height:72px; margin:0; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(12,16,22,.88); backdrop-filter:blur(18px); }
.global-search { width:min(500px,60%); display:flex; align-items:center; gap:13px; padding:0 16px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:linear-gradient(120deg,rgba(41,47,58,.62),rgba(22,27,35,.75)); color:#aeb7c4; }
.global-search > span { font-size:1.6rem; line-height:1; }
.global-search input { height:42px; padding:0; border:0; background:transparent; font-size:.88rem; box-shadow:none; }
.global-search input:focus { box-shadow:none; }
.topbar-profile { display:flex; align-items:center; gap:12px; color:#e4e8ee; font-size:.85rem; font-weight:700; }
.profile-dot { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#3b414d,#202630); font-size:1rem; }
main#dashboard { width:min(100%,1540px); margin:0 auto; padding:24px 28px 42px; }
.hero-banner { min-height:184px; position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; margin:0 0 14px; border:0; border-radius:0; background:radial-gradient(ellipse at 57% 58%,rgba(255,108,23,.25),transparent 35%),linear-gradient(110deg,rgba(17,20,26,.2),rgba(12,16,22,.18)); box-shadow:none; backdrop-filter:none; }
.hero-banner::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(8,11,15,.22),transparent 56%,rgba(8,11,15,.1)); }
.hero-copy { max-width:45%; position:relative; z-index:2; }
.hero-banner h1 { margin:0; color:#f1f3f7; font-size:clamp(2.1rem,3.3vw,3.15rem); line-height:1; letter-spacing:-.045em; text-shadow:none; white-space:nowrap; }
.hero-kicker { margin:13px 0 12px; color:#b9c1ce; font-size:.67rem; font-weight:800; letter-spacing:.3em; white-space:nowrap; }
.hero-subtitle { margin:0; color:#aeb8c7; font-size:1rem; }
.hero-geometry { position:absolute; z-index:1; width:300px; height:250px; object-fit:contain; top:50%; right:23%; transform:translateY(-50%); filter:drop-shadow(0 8px 28px rgba(255,128,42,.28)); animation:none; }
.hero-manifesto { position:relative; z-index:2; margin-left:auto; padding:4px 16px 4px 0; display:flex; align-items:center; gap:18px; color:#b2bac6; font-size:.84rem; line-height:1.42; }
.hero-manifesto i { height:106px; border-left:1px solid rgba(255,255,255,.13); }
.hero-manifesto small { color:#929ba8; font-size:.66rem; line-height:2.15; letter-spacing:.13em; }
.hero-banner > .primary-btn { position:absolute; right:24px; bottom:18px; min-height:36px; opacity:.96; }
.summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 14px; }
.summary-card { min-width:0; min-height:116px; padding:18px 16px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:16px; border-radius:12px; border-color:rgba(191,204,223,.12); background:linear-gradient(135deg,rgba(25,31,40,.92),rgba(16,21,29,.9)); box-shadow:inset 0 1px rgba(255,255,255,.045),0 14px 36px rgba(0,0,0,.17); }
.metric-icon { flex:0 0 58px; width:58px; height:60px; display:grid; place-items:center; border-radius:14px; font-size:1.8rem; font-weight:800; }
.metric-icon.orange { color:#ff963e; background:rgba(255,138,40,.16); }
.metric-icon.green { color:#28dda1; background:rgba(20,204,139,.16); }
.metric-icon.red { color:#ff6868; background:rgba(239,66,66,.19); }
.metric-copy { min-width:0; display:grid; gap:6px; }
.summary-card .metric-copy > span { color:#e0e5ec; font-size:.83rem; }
.summary-card strong { min-width:0; max-width:100%; overflow-wrap:anywhere; font-size:clamp(1.12rem,1.55vw,1.55rem); line-height:1.08; font-variant-numeric:tabular-nums; }
.summary-card .metric-copy small { color:#97a3b3; font-size:.72rem; }
.unpaid-card .metric-copy > span { color:#e0e5ec; }
.unpaid-card strong { color:#ff6868; }
.summary-card.accent { background:linear-gradient(135deg,rgba(25,31,40,.92),rgba(16,21,29,.9)); border-color:rgba(191,204,223,.12); }
.summary-card.accent span { color:#e0e5ec; }
.reminder-dashboard { min-height:76px; padding:12px 18px; margin:0 0 14px; display:grid; grid-template-columns:34px auto minmax(0,1fr); align-items:center; gap:16px; border-radius:12px; border-color:rgba(255,255,255,.09); background:linear-gradient(100deg,rgba(255,124,35,.09),rgba(23,29,38,.92) 28%); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.reminder-bell { color:#ff963e; font-size:1.55rem; text-align:center; }
.reminder-dashboard h2 { margin:0; color:#ff993f; font-size:.94rem; white-space:nowrap; }
.reminder-entry { min-width:0; padding-left:24px; border-left:1px solid rgba(255,255,255,.18); }
.reminder-entry strong { color:#ff963e; font-size:.78rem; }
#nextReminder { margin:4px 0 0; color:#c4ccd8; font-size:.84rem; }
.reminder-dashboard .field-hint { display:none; }
.workspace { display:block; }
.panel.list-panel { padding:15px 16px 18px; border-radius:13px; background:linear-gradient(140deg,rgba(22,28,37,.95),rgba(16,21,29,.94)); border-color:rgba(255,255,255,.065); box-shadow:0 18px 42px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.035); }
.list-heading { min-height:42px; align-items:center; margin-bottom:12px; }
.list-heading h2 { padding-left:14px; border-left:3px solid #ff8437; color:#f0f2f6; font-size:1.28rem; }
.list-heading p { display:none; }
.list-heading select { width:160px; max-width:160px; padding:9px 12px; }
.table-scroll { overflow-x:auto; border:1px solid rgba(190,205,225,.1); border-radius:12px; scrollbar-color:#454c58 #171c24; }
.project-table-head, .project-card { display:grid; grid-template-columns:34px minmax(180px,1.65fr) minmax(95px,.8fr) minmax(125px,1.1fr) minmax(102px,.8fr) 142px; align-items:center; gap:10px; }
.project-table-head { min-width:850px; min-height:38px; padding:0 14px; color:#aeb8c7; background:linear-gradient(90deg,rgba(39,47,59,.83),rgba(27,33,42,.86)); font-size:.74rem; }
.project-list { display:block; min-width:850px; }
.project-card { min-width:850px; position:relative; overflow:visible; padding:8px 14px; border:0; border-bottom:1px solid rgba(190,205,225,.1); border-radius:0; background:rgba(17,22,30,.66); box-shadow:none; animation:card-enter 240ms ease both; }
.project-card:last-child { border-bottom:0; }
.project-card::before { display:none; }
.project-card:hover { transform:none; background:rgba(35,42,53,.62); border-color:rgba(190,205,225,.1); box-shadow:inset 3px 0 #ff8737; }
.row-number { color:#9ca7b6; font-size:.77rem; }
.project-identity { min-width:0; }
.project-identity h3 { margin:0 0 4px; overflow:hidden; color:#eff2f7; font-size:.83rem; text-overflow:ellipsis; white-space:nowrap; }
.project-identity .client { margin:0; overflow:hidden; color:#a9b3c1; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.project-identity .notes { display:none; }
.deadline-label { color:#c0c9d5; font-size:.78rem; }
.project-meta { min-width:0; padding:0; display:grid; justify-content:start; gap:4px; border:0; color:#eef1f6; font-size:.77rem; font-weight:600; }
.project-meta .fee { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-meta .payment { color:#9eabba; font-size:.69rem; font-weight:500; }
.payment.unpaid { color:#ff6a6a!important; }
.payment.paid { color:#37dda5!important; }
.payment.partial { color:#ffad4f!important; }
.status-pill { justify-self:start; min-height:28px; padding:0 12px; border:1px solid currentColor; background:rgba(60,150,255,.1); color:#55baff; white-space:nowrap; }
.status-pill.status-brief { color:#40b9ff; background:rgba(37,167,255,.13); }
.status-pill.status-production { color:#ffad3d; background:rgba(255,153,40,.13); }
.status-pill.status-revision { color:#b38aff; background:rgba(142,92,255,.15); }
.status-pill.status-done { color:#35d99c; background:rgba(34,204,137,.12); }
.row-actions { position:relative; display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:0; }
.row-edit-toggle, .row-actions > .delete-btn { min-height:34px; padding:0 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; cursor:pointer; font-size:.74rem; font-weight:800; white-space:nowrap; }
.row-edit-toggle { background:rgba(255,255,255,.055); color:#e1e6ee; }
.row-edit-toggle:hover { border-color:rgba(255,155,69,.48); color:#ffad61; }
.row-actions > .delete-btn { background:rgba(255,89,89,.13); color:#ff7777; border:1px solid rgba(255,89,89,.22); }
.edit-menu { position:absolute; z-index:20; top:auto; bottom:38px; right:45px; width:150px; padding:5px; display:none; gap:3px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(26,32,42,.98); box-shadow:0 14px 36px rgba(0,0,0,.5); }
.project-card.actions-open { z-index:6; }
.project-card:first-child.actions-open { margin-top:145px; }
.actions-open .edit-menu { display:grid; }
.row-actions .edit-menu .secondary-btn { min-height:34px; padding:0 10px; border-radius:7px; background:transparent; color:#d8dfe9; text-align:left; font-size:.74rem; }
.row-actions .edit-menu .secondary-btn:hover { background:rgba(255,145,60,.13); color:#ffad61; }
.project-card:last-child.actions-open .edit-menu { top:auto; bottom:38px; }
.project-details { grid-column:2 / -1; min-width:0; padding:2px 0 5px; color:#aeb8c7; font-size:.76rem; }
.project-details summary { width:max-content; cursor:pointer; color:#ff9a45; }
.project-details[open] { padding-top:8px; }
.detail-notes { display:block!important; margin:8px 0; color:#bdc7d5; }
.project-details .schedule-breakdown, .project-details .team-breakdown { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.project-details .schedule-breakdown h4, .project-details .team-breakdown h4 { margin:0 0 8px; color:#e0e5ec; font-size:.8rem; }
.project-details .team-totals { display:flex; flex-wrap:wrap; gap:18px; }
.project-details .team-totals > div { justify-content:flex-start; }
.empty-state { border-radius:0; }
@media (max-width:1100px) {
  .app-shell { grid-template-columns:210px minmax(0,1fr); }
  .topbar { align-items:center; flex-direction:row; }
  .hero-geometry { right:20%; width:260px; }
  .hero-manifesto { display:none; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .summary-card { gap:11px; padding:14px 11px; }
  .metric-icon { flex-basis:48px; width:48px; height:50px; }
}
@media (max-width:760px) {
  .app-shell { display:block; }
  .sidebar { position:relative; width:100%; height:auto; padding:12px 16px; display:block; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .sidebar-brand { height:auto; padding:0; }
  .side-nav { display:flex; overflow-x:auto; margin-top:12px; gap:6px; }
  .nav-item { min-height:40px; flex:0 0 auto; padding:0 12px; gap:8px; font-size:.8rem; }
  .nav-icon { width:auto; font-size:1rem; }
  .sidebar-note { display:none; }
  .topbar { position:relative; height:60px; padding:0 16px; align-items:center; flex-direction:row; }
  main#dashboard { padding:14px 14px 30px; }
  .hero-banner { min-height:172px; padding:20px 14px; }
  .hero-copy { max-width:66%; }
  .hero-banner h1 { font-size:clamp(1.8rem,6vw,2.7rem); }
  .hero-kicker { letter-spacing:.15em; font-size:.55rem; }
  .hero-geometry { right:4%; width:42%; opacity:.8; }
  .hero-banner > .primary-btn { right:12px; bottom:10px; width:auto; padding:0 12px; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reminder-dashboard { grid-template-columns:26px minmax(0,auto) minmax(0,1fr); gap:9px; padding:12px 10px; }
  .reminder-dashboard h2 { white-space:normal; font-size:.8rem; }
  .reminder-entry { padding-left:10px; }
}
@media (max-width:480px) {
  .global-search { width:74%; padding:0 10px; gap:8px; }
  .global-search input { font-size:.75rem; }
  .topbar-profile { gap:6px; font-size:.72rem; }
  .profile-dot { width:32px; height:32px; }
  .summary-grid { gap:8px; }
  .summary-card { min-height:98px; padding:10px 8px; gap:8px; }
  .metric-icon { flex-basis:38px; width:38px; height:40px; border-radius:10px; font-size:1.25rem; }
  .summary-card .metric-copy > span { font-size:.72rem; }
  .summary-card strong { font-size:clamp(.88rem,4vw,1.2rem); }
  .summary-card .metric-copy small { font-size:.64rem; }
  .reminder-dashboard { grid-template-columns:24px 1fr; }
  .reminder-entry { grid-column:2; padding-left:0; border:0; }
  .hero-banner { min-height:158px; }
  .hero-subtitle { max-width:190px; font-size:.82rem; }
}