:root {
  --canvas:#090a0c;
  --shell:#07080a;
  --surface-1:#111318;
  --surface-2:#16191f;
  --surface-3:#1d2129;
  --surface-hover:#20252e;
  --border:#262b34;
  --border-strong:#3a414d;
  --text-1:#f4f1ea;
  --text-2:#c5c0b7;
  --text-3:#858b94;
  --accent:#cdb173;
  --accent-hover:#e2ca98;
  --accent-soft:#272116;
  --success:#72b98b;
  --success-bg:#11241a;
  --warning:#d8a64f;
  --warning-bg:#2a2112;
  --danger:#e37772;
  --danger-bg:#2b1718;
  --info:#7da2d2;
  --info-bg:#13202e;
  --radius:7px;
  --sidebar:260px;
  --topbar:72px;
  --shadow-panel:0 18px 50px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025);
}

body {
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px) 0 0/100% 64px,
    var(--canvas);
  color:var(--text-1);
  font-size:14px;
}

button,input,select,textarea { letter-spacing:0; }
button { font-weight:550; }
h1,h2,h3 { color:var(--text-1); }

/* Shell */
.sideNav {
  width:var(--sidebar);
  border-right:1px solid #22262d;
  background:linear-gradient(180deg,#090a0d 0%,#07080a 100%);
  box-shadow:16px 0 50px rgba(0,0,0,.18);
}
.sideBrand {
  min-height:104px;
  padding:22px 20px;
  gap:13px;
  border-bottom:1px solid #22262d;
  background:linear-gradient(145deg,rgba(205,177,115,.08),transparent 52%),#090a0d;
}
.brandMonogram {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(205,177,115,.54);
  color:var(--accent-hover);
  font:600 13px/1 "Noto Serif JP","Yu Mincho",serif;
}
.sideBrand strong { font-size:15px; }
.sideBrand small { color:#727984; }
.sideTabs { padding:16px 12px 24px; }
.navGroup+.navGroup { margin-top:20px; }
.navLabel {
  padding:0 10px 7px;
  color:#656c76;
  font-size:12px;
  font-weight:600;
}
.sideTabs button,.navSubButton {
  min-height:46px;
  padding:9px 10px;
  gap:11px;
  border:1px solid transparent;
  border-radius:6px;
  color:#a7acb5;
}
.sideTabs button:hover,.navSubButton:hover {
  border-color:#252a32;
  background:#111318;
  color:#f1eee7;
}
.sideTabs button.active,.navSubButton.active {
  border-color:#3b3528;
  background:linear-gradient(90deg,#2b2418 0%,#1a1814 100%);
  color:var(--accent-hover);
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.sideTabs button.active::before {
  left:-1px;
  top:7px;
  bottom:7px;
  width:2px;
  background:var(--accent);
}
.navIcon { flex:0 0 18px; width:18px; height:18px; color:#7f8792; }
.active>.navIcon,.sideTabs button:hover>.navIcon { color:var(--accent-hover); }
.navText { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.navChevron { flex:0 0 16px; width:16px; height:16px; margin-left:auto; transition:transform .18s ease; }
.navChevron.open { transform:rotate(180deg); }
.badge,.navSubCount {
  min-width:24px;
  height:22px;
  padding:0 6px;
  border:1px solid rgba(227,119,114,.38);
  background:rgba(227,119,114,.14);
  color:#f09893;
}
.sideTabs .badge { margin-left:auto; }
.navChevron+.badge { margin-left:0; }
.navCurtainInner { margin:4px 0 6px 18px; padding-left:8px; border-left:1px solid #2b3038; }
.sideTabs .navSubButton { min-height:42px; padding-left:9px; font-size:12px; }
.sideFoot {
  min-height:82px;
  padding:14px 18px;
  border-top:1px solid #22262d;
  background:#08090b;
}
.sideAvatar,.topAvatar { background:linear-gradient(145deg,#dec286,#a9894e); color:#15120c; }

.workspace { width:calc(100% - var(--sidebar)); margin-left:var(--sidebar); }
.topbar {
  height:var(--topbar);
  padding:0 28px;
  gap:16px;
  border-bottom:1px solid rgba(63,69,80,.72);
  background:rgba(10,11,14,.9);
  box-shadow:0 8px 34px rgba(0,0,0,.16);
  backdrop-filter:blur(18px) saturate(125%);
}
.globalSearch { position:relative; width:min(520px,45vw); }
.globalSearch>svg {
  position:absolute;
  left:13px;
  top:50%;
  z-index:1;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  color:#727984;
  pointer-events:none;
}
.globalSearch input {
  min-height:42px;
  padding:8px 14px 8px 40px;
  border:1px solid #333944;
  border-radius:6px;
  background:#111319;
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.globalSearch input:focus { border-color:#756746; background:#14161b; }
.topDate { padding-right:4px; color:#737a84; }
.topActions { gap:9px; }
.topCreate {
  min-height:42px;
  padding:0 15px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #d1b572;
  border-radius:6px;
  background:linear-gradient(180deg,#d8bb78,#bd9c5c);
  color:#17130d;
  box-shadow:0 7px 18px rgba(157,125,66,.16),inset 0 1px rgba(255,255,255,.28);
}
.topCreate svg { width:17px; height:17px; }
.notificationBell,.topAvatar,.navToggle {
  width:42px;
  height:42px;
  min-height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #343a44;
  border-radius:6px;
  background:#121419;
}
.navToggle { display:none; }
.notificationBell:hover,.navToggle:hover { border-color:#62583f; background:#1a1b20; }
.notificationBell svg,.navToggle svg { width:19px; height:19px; }
.topAvatar {
  border-color:#ad9158;
  background:linear-gradient(145deg,#dec286,#a9894e);
  color:#15110b;
  font-weight:750;
}
.container { max-width:1720px; padding:28px 32px 88px; }
#backBar { margin:-28px -32px 20px; padding:10px 32px; background:rgba(17,19,24,.96); }

/* CRM surfaces */
.panel,.dashTool,.areaSurface,.refSurface,.metricPanel,.analyticsSurface,.feedbackSurface,.rowList,.detail,.taskLauncher,.workPanel,
.commandPriorityV4,.commandCalendarV4,.customerFilterRailV4,.customerLedgerV4,.cmsQueueV4,.eventOpsGridV4 {
  border-color:var(--border);
  border-radius:var(--radius);
  background:var(--surface-1);
  box-shadow:var(--shadow-panel);
}
.toolHead,.areaSurfaceHead,.refSurfaceHead,.metricHead,.analyticsSurfaceHead,.feedbackSurfaceHead,.commandSectionHeadV4,.cmsQueueHeadV4 {
  min-height:58px;
  padding:12px 16px;
  border-color:#2e343e;
  background:linear-gradient(180deg,#181b21,#14161b);
}
.areaHeader,.refHead,.analyticsHeader,.feedbackHeader,.queueOverviewHead {
  min-height:92px;
  margin-bottom:18px;
  padding:18px 22px;
  border:1px solid #303640;
  border-left:2px solid var(--accent);
  border-radius:var(--radius);
  background:linear-gradient(110deg,#17191f 0%,#101216 74%);
  box-shadow:var(--shadow-panel);
}
.areaHeader h2,.refHead h2,.analyticsHeader h2,.feedbackHeader h2,.queueOverviewHead h2 { font-size:23px; }
.screenKickerV4,.commandKickerV4,.commandSectionHeadV4 span,.serviceDockV4>div span,.customerEyebrowV4,.customerProfileLabelV4,.lineEyebrowV4 {
  color:#bda36a;
  font-size:12px;
  font-weight:700;
}
.sectionTabs,.segTabs,.feedbackTabs,.analyticsModes,.customerHubModes,.dashMode {
  min-height:48px;
  margin-bottom:18px;
  padding:0 4px;
  gap:14px;
  border-bottom:1px solid #2b3038;
}
.sectionTabs button,.segTabs button,.feedbackTabs button,.analyticsModes button,.customerHubMode,.dashMode button {
  padding:8px 5px;
  color:#9299a3;
}
.sectionTabs button.active,.segTabs button.active,.feedbackTabs button.active,.analyticsModes button.active,.customerHubMode.active,.dashMode button.active {
  color:#ead8af;
}
.controlBar,.refToolbar,.recordsFilters,.caseFilterBar,.colFilters {
  min-height:58px;
  margin-bottom:14px;
  padding:8px 12px;
  gap:9px;
  border-color:#2b3039;
  background:#101216;
  box-shadow:var(--shadow-panel);
}
.refButton,.miniBtn,.iconBtn,.areaAction,.areaOpen,.caseAction,.refFilter,.metricLink {
  min-height:42px;
  border-color:#3a414c;
  border-radius:6px;
  background:#181b21;
  color:#c6c8cc;
}
.refButton:hover,.miniBtn:hover,.iconBtn:hover,.areaAction:hover,.areaOpen:hover,.caseAction:hover,.refFilter:hover {
  border-color:#5b6470;
  background:#20242b;
  color:#f5f2eb;
}
.refButton.primary,.miniBtn.primary,.feedbackSubmit,.areaAction.primary {
  border-color:#d0b471!important;
  background:linear-gradient(180deg,#d5b876,#b99859)!important;
  color:#17130d!important;
  box-shadow:0 7px 18px rgba(157,125,66,.13),inset 0 1px rgba(255,255,255,.25);
}
input,select,textarea {
  border-color:#343b46!important;
  border-radius:6px!important;
  background:#0e1014!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28)!important;
}
input:focus,select:focus,textarea:focus { border-color:#756746!important; background:#121419!important; }

/* Tables and rows */
.refTable,.recordsTable,.analyticsDataTable,.metricTable,.miniTable,.impactTable { font-size:13px; }
.refTable th,.recordsTable th,.analyticsDataTable th,.metricTable th,.miniTable th,.impactTable th {
  height:44px;
  padding:9px 14px;
  border-color:#343a44;
  background:#171a20;
  color:#858c97;
  font-weight:650;
}
.refTable td,.recordsTable td,.analyticsDataTable td,.metricTable td,.miniTable td,.impactTable td {
  padding:12px 14px;
  border-color:#292e36;
}
.refTable tbody tr,.recordsTable tbody tr { transition:background .12s ease,box-shadow .12s ease; }
.refTable tbody tr:hover,.recordsTable tbody tr:hover { background:#1a1d23; box-shadow:inset 2px 0 var(--accent); }
.rowItem { min-height:92px; padding:13px 15px; border-color:#292e36; }
.rowItem:hover { background:#171a20; }
.rowItem.sel { border-left-color:var(--accent); background:linear-gradient(90deg,#292318,#191813); }
.riProgress,.paymentState,.feedbackState,.refStatus,.customerTypeTag,.recordsDetailState,.queuePriority {
  border-radius:4px;
}

/* Home */
.homeToplineV4 { min-height:54px; margin-bottom:20px; }
.commandHeroV4 {
  min-height:252px;
  margin-bottom:18px;
  border-color:#3c3528;
  box-shadow:0 28px 70px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035);
  background:linear-gradient(90deg,#08090b 0%,rgba(8,9,11,.96) 44%,rgba(8,9,11,.32) 78%),url("assets/home-command-v4.png") right 42%/cover no-repeat;
}
.commandHeroShadeV4 { padding:36px 42px; }
.commandHeroShadeV4 h1 { font-size:34px; }
.commandPendingV4 { border-color:#64583d; background:rgba(11,12,15,.88); }
.commandGridV4 { gap:16px; }
.serviceDockV4 { border-color:#2c313a; box-shadow:var(--shadow-panel); }
.serviceDockV4>button:hover { background:#191c22; }

/* Domain workspaces */
.lineDeskGridV4 { border-color:#2e343d; box-shadow:0 24px 64px rgba(0,0,0,.26); }
.lineQueueV4,.lineContextV4 { background:#0d0f13; }
.lineConversationV4 { background:#121419; }
.linePersonHeadV4,.lineComposerV4 { background:#101216; }
.lineChatV4 { background:linear-gradient(rgba(18,20,25,.94),rgba(18,20,25,.98)),url("assets/nav-texture-v3.jpg") center/cover; }
.customerDirectoryV4 { gap:16px; }
.customerFilterRailV4 { padding:16px; }
.customerProfileHeroV4 { background:linear-gradient(120deg,#191b21,#0f1115 72%); box-shadow:var(--shadow-panel); }
.schedulePulseV4,.eventStatsV4,.cmsPulseV4,.financePulseV4,.broadcastPulseV4,
.riskStrip,.managementKpis,.analyticsSummary,.analyticsKpis,.feedbackSummary,.refKpis,.compactSummary {
  border-color:#2b3039;
  background:#2b3039;
  box-shadow:var(--shadow-panel);
}
.schedulePulseV4>div,.eventStatsV4>div,.cmsPulseV4>div,.financePulseV4>div,.broadcastPulseV4>div,
.riskBtn,.managementKpi,.analyticsSummaryItem,.analyticsKpi,.feedbackSummary>div,.refKpi {
  background:#121419;
}
.eventRailV4 { background:#0d0f13; }
.eventRailItemV4 { border-color:#292e36; }
.eventRailItemV4.active { background:linear-gradient(90deg,#2b2519,#191813); }
.eventDetailV4 { background:#121419; }
.cmsArticleV4 { border-color:#2a3038; }
.cmsArticleV4:hover { background:#191c22; }
.broadcastStudioV4>section,.broadcastStudioV4>aside { box-shadow:var(--shadow-panel); }
.analyticsWorkspaceV4 .analyticsDiagnosis { background:linear-gradient(145deg,#171a20,#0f1115); }
.feedbackWorkspaceV4 .feedbackQuickWrap { background:linear-gradient(145deg,#121419,#090a0d); box-shadow:var(--shadow-panel); }
.settingsRailV4 { border-color:#2d333c; background:#0e1014; }

/* Notifications and dialogs */
.notificationPanel {
  top:58px;
  width:430px;
  border-color:#39404a;
  background:#111318;
  box-shadow:0 26px 70px rgba(0,0,0,.48);
}
.notificationHead { min-height:58px; background:#171a20; }
.notificationItem { border-color:#2a3038; }
.notificationItem:hover { background:#1a1d23; }
.operationOverlay { background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.operationDialog { border-color:#3a414b; background:#111318; box-shadow:0 40px 100px rgba(0,0,0,.55); }
#toast { border-color:#4a515c; background:#1a1d23; box-shadow:0 18px 48px rgba(0,0,0,.38); }

@media (max-width:1100px) {
  :root { --sidebar:236px; }
  .sideNav { width:var(--sidebar); }
  .container { padding-inline:22px; }
  .commandHeroShadeV4 { width:min(640px,78%); }
}

@media (max-width:900px) {
  :root { --sidebar:0px; --topbar:64px; }
  .sideNav { left:-270px; width:260px; }
  .workspace { width:100%; margin-left:0; }
  .navToggle { display:grid; }
  .topbar { padding:0 14px; }
  .container { padding:20px 16px 72px; }
  #backBar { margin:-20px -16px 16px; padding:10px 16px; }
  .sideBrand { min-height:88px; }
}

@media (max-width:680px) {
  .topbar { gap:8px; }
  .globalSearch { flex:1; min-width:0; width:auto; }
  .globalSearch input { padding-left:36px; }
  .topCreate,.topDate { display:none; }
  .container { padding:16px 12px 64px; }
  .areaHeader,.refHead,.analyticsHeader,.feedbackHeader,.queueOverviewHead { min-height:0; padding:15px; }
  .commandHeroV4 { min-height:322px; background-position:67% center; }
  .commandHeroShadeV4 { width:100%; padding:28px 22px 110px; }
  .commandHeroShadeV4 h1 { font-size:28px; }
  .schedulePulseV4>div,.eventStatsV4>div,.cmsPulseV4>div,.financePulseV4>div,.broadcastPulseV4>div { min-height:68px; }
  .notificationPanel { top:56px; right:8px; left:8px; width:auto; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.01ms!important; }
}