/* NetPlay blue editorial UI — an original operating-workspace adaptation of the supplied reference's contrast, modular cards, and playful utility accents. */
:root {
  --ink: #0b1010;
  --muted: #667071;
  --paper: #f4f5f5;
  --surface: #ffffff;
  --line: #dfe3e3;
  --blue: #1976e9;
  --blue-dark: #0757bd;
  --blue-soft: #e8f2ff;
  --navy: #0b1010;
  --coral: #1976e9;
  --mint: #e8f2ff;
  --shadow: 0 30px 64px rgba(10, 16, 16, .10), 0 8px 18px rgba(10, 16, 16, .06);
}

* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; letter-spacing: -.015em; }
.site-header { height: 70px; padding: 0 clamp(20px, 4vw, 58px); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); gap: 42px; backdrop-filter: blur(10px); }
.wordmark { color: var(--ink); font-size: 13px; letter-spacing: .13em; }
.wordmark em { color: var(--blue); font-weight: 800; }
.site-header nav { gap: 28px; }
.nav-link { font-weight: 600; color: #697170; transition: color .18s ease; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active:after { height: 3px; border-radius: 3px 3px 0 0; background: var(--blue); }
.header-actions { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .04em; }
.live-dot { width: 8px; height: 8px; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.icon-button { width: 32px; height: 32px; border-radius: 50%; color: var(--ink); background: #f2f3f3; transition: transform .18s ease, background .18s ease; }
.icon-button:hover { color: #fff; background: var(--ink); transform: rotate(40deg); }
main { max-width: 1380px; padding: 0 clamp(20px, 4vw, 58px) 88px; }
.workspace-hero, .client-canvas-head { padding: 64px 0 26px; }
.eyebrow { color: var(--blue); font-weight: 600; letter-spacing: .15em; }
.workspace-hero h1, .client-canvas-head h1 { max-width: 650px; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.065em; line-height: .95; font-weight: 700; }
.workspace-hero > p, .client-canvas-head > p { color: #667071; font-size: 15px; line-height: 1.48; }
.client-canvas-head h1 i { color: var(--blue); font-family: inherit; }
.focus-banner { border: 0; border-radius: 16px; padding: 20px 22px; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.focus-banner .eyebrow { color: #8fc2ff; }
.focus-banner strong { font-size: 16px; letter-spacing: -.025em; }
.primary-action { border: 0; border-radius: 999px; padding: 11px 17px; background: var(--blue); color: #fff; font: 700 12px/1 "DM Sans", sans-serif; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.primary-action:hover { background: var(--blue-dark); transform: translateY(-2px); }
.workspace-section { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 2px 0 rgba(10,16,16,.015); }
.workspace-section:hover { border-color: #c9d3d3; }
.workspace-section-head { padding: 22px 23px 15px; }
.workspace-section-head h2, .section-heading h2 { color: var(--ink); font-size: 22px; letter-spacing: -.045em; }
.workspace-section-head p, .section-heading > div > p:not(.eyebrow) { color: var(--muted); }
.inline-link, .text-action { color: var(--blue-dark); font-weight: 700; }
.inline-link:hover, .text-action:hover { color: var(--ink); }
.client-overview-grid, .canvas-card-grid { gap: 16px; }
.client-summary, .canvas-client-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.client-summary:hover, .canvas-client-card:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-4px); }
.client-summary > div strong, .canvas-client-card strong { font-size: 18px; letter-spacing: -.04em; color: var(--ink); }
.status, .state-pill { background: var(--blue-soft); color: var(--blue-dark); border: 0; border-radius: 999px; font-weight: 700; }
.client-action button, .canvas-client-card footer b { color: var(--blue-dark); font-weight: 700; }
.workspace-split { gap: 16px; }
.compact-section { overflow: hidden; }
.calendar-event-list > div, .attention-list > div, .work-list label { border-color: var(--line); }
.calendar-event-list time { color: var(--blue-dark); font-family: "DM Mono", monospace; font-size: 11px; }
.attention-list i { width: 9px; height: 9px; border-radius: 50%; }
.attention-list i.coral, .attention-list i.gold, .attention-list i.blue { background: var(--blue); }
.attention-list i.green { background: #19a974; }
.data-status, .research-filters { background: #f5f8f8; border-color: var(--line); }
.trend-tab { border-radius: 999px; padding: 8px 12px; font-weight: 700; }
.trend-tab.active { background: var(--ink); color: #fff; }
.trend-table li, .research-list li { border-color: var(--line); }
.trend-table li button { border: 0; border-radius: 999px; padding: 8px 11px; background: var(--blue-soft); color: var(--blue-dark); font: 700 11px "DM Sans", sans-serif; }
.trend-table li button:hover { background: var(--blue); color: #fff; }
.client-hero { margin: 42px 0 22px; padding: 36px; border-radius: 18px; background: var(--ink); color: #fff; overflow: hidden; position: relative; }
.client-hero:after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--blue); right: -90px; bottom: -165px; opacity: .95; }
.client-hero h1 { color: #fff; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.065em; line-height: .95; }
.client-hero > div { position: relative; z-index: 1; }
.client-hero .eyebrow { color: #8fc2ff; }
.client-hero p { max-width: 550px; color: #d3dada; }
.client-hero-meta { position: relative; z-index: 1; }
.client-shell { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.client-sidebar { background: #f7f8f8; border-color: var(--line); }
.client-identity { border-color: var(--line); }
.client-monogram, .canvas-mark { background: var(--ink); color: #fff; border-radius: 12px; }
.client-tab { border-radius: 8px; font-weight: 600; }
.client-tab.active { color: #fff; background: var(--ink); }
.client-tab.active span { color: #8fc2ff; }
.sidebar-foot { border-color: var(--line); }
.section-heading { border-color: var(--line); }
.notion-card { border: 0; border-radius: 16px; background: var(--ink); color: #fff; min-height: 190px; }
.notion-card:nth-child(2) { background: var(--blue); }
.notion-card:nth-child(3) { background: #eaf3ff; color: var(--ink); }
.notion-card .eyebrow { color: #94c8ff; }
.notion-card:nth-child(2) .eyebrow { color: #dceeff; }
.notion-card:nth-child(3) .eyebrow { color: var(--blue-dark); }
.notion-card strong { color: inherit; font-size: 25px; letter-spacing: -.055em; }
.notion-card p { color: inherit; opacity: .8; }
.client-board-card { border: 0 !important; border-radius: 16px !important; box-shadow: none !important; background: var(--ink) !important; }
.client-board-head, .client-board-top { border-color: rgba(255,255,255,.16) !important; color: #d3dada !important; }
.client-board-head h3, .client-board-top span { color: #fff !important; }
.client-board-open { border: 0 !important; border-radius: 999px !important; background: var(--blue) !important; color: #fff !important; }
.client-board-open:hover { background: #fff !important; color: var(--ink) !important; }
.client-board-frame { background: #fff !important; }
.client-board-placeholder { background: var(--ink) !important; color: #d3dada !important; }
.client-board-placeholder strong { color: #fff !important; }
.note-block { border: 0; border-radius: 16px; background: var(--blue-soft); }
.note-block h3 { color: var(--ink); letter-spacing: -.045em; }
.asset-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.asset-card span { color: var(--blue-dark); }
.research-note { border: 0; border-radius: 10px; background: var(--blue-soft); color: var(--blue-dark); }
.approval-flow > div { border: 1px solid var(--line); border-radius: 14px; }
.approval-flow > div span { background: var(--blue); color: #fff; border-radius: 50%; }
dialog { border: 0; border-radius: 18px; box-shadow: 0 28px 90px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(11,16,16,.45); backdrop-filter: blur(3px); }
input, select, textarea { border-color: var(--line); border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(25,118,233,.18); border-color: var(--blue); }
@media (max-width: 700px) { .site-header { gap: 16px; } .site-header nav { gap: 14px; } .header-actions > span:not(.live-dot) { display: none; } .workspace-hero, .client-canvas-head { padding-top: 42px; } .focus-banner { align-items: flex-start; gap: 18px; } .client-hero { padding: 28px 22px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }