/* A separate material system; the original glass design keeps its own styles. */
.design-picker { padding: 8px 10px 16px; }
.design-picker > span { display:block; margin-bottom:9px; color:var(--muted); font-size:9px; letter-spacing:1px; text-transform:uppercase; }
.design-picker > div { display:flex; padding:3px; gap:3px; border:1px solid var(--line); border-radius:12px; }
.design-picker a { flex:1; padding:9px 5px; font-size:10px; text-align:center; border-radius:9px; color:var(--muted); }
.design-picker a[aria-current] { color:var(--text); background:rgba(160,170,160,.18); }
.core-status-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; margin-bottom:20px; border:1px solid var(--accent); border-radius:16px; background:var(--base); color:var(--text); font-size:12px; line-height:1.6; }
.core-status-banner button { flex-shrink:0; }
.local-state[data-problem='true'] { color:var(--accent); }
.notification-dot.has-count { display:flex; justify-content:center; align-items:center; width:16px; height:16px; right:-3px; top:-3px; font-size:8px; font-weight:650; color:#231c13; border-radius:50%; }
.reminder-date { font-size:11px; color:var(--muted); }
.reminder-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0; }
.reminder-count { padding:15px 12px; background:var(--tint); border:1px solid var(--line); border-radius:17px; }
.reminder-count strong { display:block; font-size:27px; font-weight:500; letter-spacing:-1px; }
.reminder-count span { display:block; font-size:10px; color:var(--muted); margin-top:7px; }
.reminder-count.overdue strong { color:var(--error); }
.reminder-count.today strong { color:var(--accent); }
.reminder-section .task-copy { min-width:0; }
.reminder-section .task-copy .text-btn { white-space:normal; text-align:left; padding-left:0; justify-content:flex-start; }
.reminder-section .task-row { gap:10px; }
:root[data-design='volume'] .reminder-count { background:var(--v-raised); box-shadow:var(--v-shadow); border-color:var(--v-edge); }
@media(max-width:767px) { .reminder-counts { gap:8px; } .reminder-count { padding:12px 9px; } .reminder-count span { font-size:9px; } }
.conflict-panel { margin:18px 0; padding:18px; border:1px solid var(--accent); border-radius:16px; background:var(--base); color:var(--text); }
.conflict-panel h3 { margin:0 0 9px; }
.conflict-panel p { font-size:11px; line-height:1.7; color:var(--secondary); }
.conflict-panel fieldset { border:0; border-top:1px solid var(--line); margin:15px 0; padding:12px 0 0; }
.conflict-panel legend { color:var(--accent); font-size:12px; padding:0 8px 0 0; }
.conflict-panel label { display:flex; align-items:flex-start; gap:9px; padding:10px; border-radius:10px; margin-top:8px; background:var(--tint); cursor:pointer; }
.conflict-panel label input[type=radio] { width:17px; height:17px; margin:0; flex:0 0 17px; }
.conflict-panel label>span { min-width:0; }
.conflict-panel label strong { display:block; font-size:11px; color:var(--text); margin-bottom:5px; }
.conflict-panel label span span { display:block; white-space:pre-wrap; overflow-wrap:anywhere; max-height:150px; overflow:auto; font-size:12px; line-height:1.6; }
.conflict-panel .secondary-btn { white-space:normal; }
.primary-btn:disabled { cursor:not-allowed; opacity:.5; }
:root[data-core='saving'] .project-boards, :root[data-core='saving'] .task-template-list { cursor:progress; }
@media(max-width:767px) { .core-status-banner { flex-direction:column; align-items:stretch; } }
:root[data-design='volume'] {
  --base:#c5b9ad; --text:#292e2a; --secondary:#424c46; --muted:#525b55; --faint:#68716a;
  --accent:#9e3b19; --accent-hover:#bc4b22; --success:#176b5d; --error:#aa302b;
  --line:rgba(67,65,56,.18); --edge:rgba(255,245,226,.65); --focus:#176b5d;
  --v-ink:#263632; --v-orange:#fa7c45; --v-mint:#8bf1d6;
  --v-panel:linear-gradient(132deg,rgba(255,242,224,.55),rgba(202,191,174,.30) 48%,rgba(97,122,119,.18));
  --v-raised:linear-gradient(145deg,#e8d7c4,#c3b3a5);
  --v-input:rgba(58,68,63,.09); --v-edge:rgba(255,247,230,.65);
  --v-shadow:2px 3px 0 rgba(100,79,60,.15),12px 20px 25px rgba(51,46,35,.20),inset 1px 1px 1px rgba(255,251,233,.82),inset -1px -1px 1px rgba(87,79,64,.17);
  --radius:30px;
}
:root[data-design='volume'][data-theme='dark'] {
  --base:#243334; --text:#f1e7d9; --secondary:#d6cbbd; --muted:#c0b7aa; --faint:#a7aaa1;
  --accent:#ffab73; --accent-hover:#ffc39a; --success:#94efda; --error:#ffb1a6;
  --line:rgba(232,216,195,.17); --edge:rgba(238,226,203,.30); --focus:#8bf1d6;
  --v-ink:#f1e7d9; --v-panel:linear-gradient(130deg,rgba(192,169,141,.25),rgba(82,91,84,.24) 50%,rgba(27,47,48,.30));
  --v-raised:linear-gradient(140deg,#6d6d61,#46544f); --v-input:rgba(8,27,28,.28);
  --v-edge:rgba(237,224,201,.34); --v-shadow:2px 4px 0 rgba(6,21,22,.35),12px 22px 28px rgba(5,19,20,.40),inset 1px 1px 1px rgba(241,228,206,.38),inset -1px -1px 1px rgba(4,23,22,.5);
}
:root[data-design='volume'] .crm-scene {
  transform:none; filter:none; background-color:#c0b2a2; background-blend-mode:normal;
  background-image:radial-gradient(ellipse at 7% 0%,rgba(255,240,214,.95),transparent 55%),radial-gradient(ellipse at 100% 100%,#5a7874,transparent 65%),linear-gradient(130deg,#d8c6b0,#b4b5a7 61%,#8a9c92);
}
:root[data-design='volume'] .crm-scene:before {
  content:''; position:absolute; width:55vw; height:90vh; top:-45vh; left:25%; border-radius:90px;
  background:linear-gradient(120deg,rgba(255,246,215,.45),rgba(243,223,189,.05));
  box-shadow:45px 70px 70px rgba(44,55,49,.18),inset 2px 2px 2px rgba(255,247,222,.5); transform:rotate(-35deg);
}
:root[data-design='volume'][data-theme='dark'] .crm-scene {
  background-color:#233537;
  background-image:radial-gradient(ellipse at 3% -5%,rgba(211,181,143,.44),transparent 52%),radial-gradient(ellipse at 90% 100%,rgba(29,109,99,.16),transparent 55%),linear-gradient(130deg,#48564f,#213437 70%);
}
:root[data-design='volume'] .app-shell { max-width:1900px; grid-template-columns:218px minmax(0,1fr); padding:24px; gap:32px; }
:root[data-design='volume'] .glass {
  background:var(--v-panel); border:1px solid var(--v-edge); border-bottom-color:rgba(62,73,64,.24); border-right-color:rgba(62,73,64,.23);
  box-shadow:var(--v-shadow); -webkit-backdrop-filter:blur(22px) saturate(105%); backdrop-filter:blur(22px) saturate(105%);
}
:root[data-design='volume'] .sidebar { top:24px; height:calc(100dvh - 48px); padding:30px 13px 18px; border-radius:32px; background:var(--v-panel); }
:root[data-design='volume'] .brand { font-size:21px; letter-spacing:1.5px; margin:4px 10px 32px; color:var(--text); }
:root[data-design='volume'] .brand-dot { color:var(--accent); }
:root[data-design='volume'] .brand-subtitle { color:var(--muted); font-size:7px; letter-spacing:1.7px; }
:root[data-design='volume'] .workspace-label { padding:4px 7px 24px; font-size:10px; gap:8px; }
:root[data-design='volume'] .workspace-symbol { background:var(--v-raised); color:var(--text); border-color:var(--v-edge); box-shadow:3px 5px 7px rgba(51,46,35,.15),inset 1px 1px 0 var(--v-edge); }
:root[data-design='volume'] .nav-caption { color:var(--muted); font-size:8px; letter-spacing:1.8px; padding-left:14px; }
:root[data-design='volume'] #navigation { gap:10px; }
:root[data-design='volume'] #navigation :is(a,button) { border-radius:17px; padding:12px 13px; min-height:47px; font-size:11px; color:var(--secondary); }
:root[data-design='volume'] #navigation :is(a,button) svg { color:var(--muted); }
:root[data-design='volume'] #navigation :is(a,button):hover { background:rgba(241,228,210,.2); color:var(--text); }
:root[data-design='volume'] #navigation .active {
  color:#fff2e3; border:1px solid rgba(255,220,174,.7); background:linear-gradient(145deg,#ff9860,#e96c3e);
  box-shadow:0 3px 0 #ba5939,7px 11px 16px rgba(109,61,35,.30),inset 1px 1px 1px #ffd1a5; text-shadow:0 1px 1px rgba(102,44,11,.25);
}
:root[data-design='volume'] #navigation .active svg { color:#fff4e8; }
:root[data-design='volume'] #navigation .active:before { display:none; }
:root[data-design='volume'] .nav-count { background:rgba(52,68,59,.08); color:var(--secondary); border-radius:50%; font-size:9px; }
:root[data-design='volume'] #navigation .active .nav-count { background:rgba(103,40,15,.16); color:#fff; }
:root[data-design='volume'] .sidebar-bottom { padding-top:24px; }
:root[data-design='volume'] .workspace-status, :root[data-design='volume'] .workspace-status small { color:var(--muted); font-size:9px; }
:root[data-design='volume'] .workspace-status { padding-bottom:18px; }
:root[data-design='volume'] .status-dot { background:#55c6ab; box-shadow:0 0 7px rgba(72,175,149,.4); }
:root[data-design='volume'] .profile strong { color:var(--text); }
:root[data-design='volume'] .avatar { color:var(--text); background:var(--v-raised); border-color:var(--v-edge); box-shadow:2px 3px 5px rgba(39,53,44,.12); }
:root[data-design='volume'] .profile-avatar { background:linear-gradient(130deg,#53645b,#253e3a); color:#b3f1d9; }
:root[data-design='volume'] .design-picker { padding:0 7px 12px; }
:root[data-design='volume'] .design-picker>div { border-radius:16px; background:var(--v-input); box-shadow:inset 2px 3px 5px rgba(38,48,40,.12),0 1px 0 var(--v-edge); }
:root[data-design='volume'] .design-picker a[aria-current] { border-radius:12px; background:var(--v-raised); box-shadow:2px 4px 5px rgba(38,48,40,.18),inset 1px 1px 0 var(--v-edge); }
:root[data-design='volume'] .main-area { padding:0 4px 0 0; }
:root[data-design='volume'] .topbar { height:52px; margin:0 0 33px; }
:root[data-design='volume'] .breadcrumb { color:var(--muted); font-size:10px; gap:11px; }
:root[data-design='volume'] .breadcrumb strong { font-weight:550; }
:root[data-design='volume'] .topbar-actions { gap:9px; }
:root[data-design='volume'] .global-search { min-height:40px; border-radius:24px; border-color:rgba(65,74,60,.12); background:var(--v-input); box-shadow:inset 2px 3px 6px rgba(38,48,40,.15),0 1px 0 var(--v-edge); padding:0 15px; color:var(--muted); }
:root[data-design='volume'] .global-search input::placeholder { color:var(--muted); }
:root[data-design='volume'] .icon-btn { color:var(--secondary); border-radius:50%; }
:root[data-design='volume'] .topbar .icon-btn { background:var(--v-raised); border:1px solid var(--v-edge); box-shadow:2px 3px 0 rgba(76,70,54,.12),4px 6px 9px rgba(39,49,38,.15),inset 1px 1px 0 rgba(255,243,219,.34); width:38px; height:38px; }
:root[data-design='volume'] .icon-btn:hover { color:var(--text); background:rgba(255,244,225,.14); }
:root[data-design='volume'] .notification-dot { background:var(--v-orange); box-shadow:none; }
:root[data-design='volume'] .page-heading { margin-bottom:30px; }
:root[data-design='volume'] .eyebrow { color:var(--muted); font-size:9px; letter-spacing:2px; }
:root[data-design='volume'] .page-heading h1 { color:var(--text); font-size:40px; letter-spacing:-1.8px; font-weight:520; }
:root[data-design='volume'] .page-heading p { color:var(--muted); }
:root[data-design='volume'] .volume-heading { align-items:center; padding:0 4px; margin-bottom:32px; }
:root[data-design='volume'] .volume-heading h1 { font-size:42px; line-height:1.12; letter-spacing:-1.6px; }
:root[data-design='volume'] .volume-heading h1 em { font-style:normal; color:var(--secondary); font-weight:370; }
:root[data-design='volume'] .volume-heading .eyebrow { display:flex; gap:7px; align-items:center; margin-bottom:16px; }
:root[data-design='volume'] .volume-heading .eyebrow>span { width:6px; height:6px; border-radius:50%; background:var(--accent); }
:root[data-design='volume'] .volume-heading-actions { display:flex; flex-direction:column; align-items:center; gap:19px; padding-right:8px; }
:root[data-design='volume'] .volume-live { display:flex; gap:7px; align-items:center; font-size:10px; color:var(--secondary); }
:root[data-design='volume'] .volume-live>span { width:6px; height:6px; border-radius:50%; background:#2d9e81; }
:root[data-design='volume'] .primary-btn {
  color:#271e16; min-height:45px; padding:12px 21px; font-size:11px; font-weight:650; border-radius:28px;
  background:linear-gradient(150deg,#ffa26a,#f37b43 65%,#ef6d37); border:1px solid #ffc089; border-bottom-color:#d16232;
  box-shadow:0 4px 0 #b65a38,9px 13px 16px rgba(102,56,33,.28),inset 1px 1px 2px #ffd9a6;
  transition:transform .16s,box-shadow .16s;
}
:root[data-design='volume'] .primary-btn:hover { background:linear-gradient(150deg,#ffb07b,#ff864c); transform:translateY(-2px); }
:root[data-design='volume'] .primary-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #b65a38,3px 6px 8px rgba(102,56,33,.22); }
:root[data-design='volume'] .secondary-btn { color:var(--text); background:var(--v-raised); border-color:var(--v-edge); border-radius:24px; box-shadow:2px 3px 0 rgba(88,76,55,.13),4px 7px 10px rgba(50,53,41,.15),inset 1px 1px 0 var(--v-edge); }
:root[data-design='volume'] .text-btn { color:var(--accent); }
:root[data-design='volume'] .text-btn:hover { background:rgba(127,103,76,.09); }
:root[data-design='volume'] .conflict-panel { background:var(--v-input); }
:root[data-design='volume'] .task-shelf { margin-bottom:31px; padding:19px 22px 24px; border-radius:28px; }
:root[data-design='volume'] .task-shelf-heading { margin-bottom:18px; }
:root[data-design='volume'] .task-shelf-heading>div { align-items:baseline; gap:16px; }
:root[data-design='volume'] .task-shelf-heading h2 { font-size:14px; font-weight:600; }
:root[data-design='volume'] .task-shelf-heading p { font-size:10px; }
:root[data-design='volume'] .task-shelf-heading>.pill { font-size:9px; background:var(--v-input); border:0; border-radius:20px; padding:6px 9px; }
:root[data-design='volume'] .task-template-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px 16px; }
:root[data-design='volume'] .task-template {
  border-radius:30px; min-height:55px; padding:9px 16px 9px 11px; gap:9px; background:var(--v-raised); color:var(--text); border:1px solid var(--v-edge);
  box-shadow:0 4px 0 rgba(112,87,66,.32),7px 11px 14px rgba(48,47,36,.23),inset 1px 2px 1px rgba(255,245,223,.65); transition:transform .16s,box-shadow .16s;
}
:root[data-design='volume'] .task-template:hover { transform:translateY(-3px); box-shadow:0 5px 0 rgba(112,87,66,.32),9px 15px 16px rgba(48,47,36,.27),inset 1px 2px 1px rgba(255,245,223,.7); }
:root[data-design='volume'] .task-template:active { transform:translateY(2px); }
:root[data-design='volume'] .task-template strong { font-size:11px; font-weight:600; }
:root[data-design='volume'] .task-template small { display:none; }
:root[data-design='volume'] .template-icon { width:30px; height:30px; flex-basis:30px; border:0; background:rgba(80,74,56,.07); color:var(--secondary); border-radius:50%; }
:root[data-design='volume'] .template-grip { color:var(--muted); }
:root[data-design='volume'] .task-template[data-template-id='ad-avito'] { background:linear-gradient(145deg,#ffad75,#f17b49); border-color:#ffd7ae; color:#382318; box-shadow:0 4px 0 #b45b3e,7px 11px 14px rgba(117,64,39,.25),inset 1px 2px 1px #ffdbb5; }
:root[data-design='volume'] .task-template[data-template-id='ad-avito'] .template-icon, :root[data-design='volume'] .task-template[data-template-id='ad-avito'] .template-grip { color:#65371f; }
:root[data-design='volume'] .task-template[data-template-id='assign'] { color:#aafbe4; background:linear-gradient(145deg,#46665a,#2f4a43); border:1px solid #95ead4; box-shadow:0 4px 0 #2a6257,7px 11px 14px rgba(27,67,56,.24),inset 0 0 3px #b0ffea,0 0 12px rgba(112,232,196,.22); }
:root[data-design='volume'] .task-template[data-template-id='assign'] .template-icon, :root[data-design='volume'] .task-template[data-template-id='assign'] .template-grip { color:#aafbe4; }
:root[data-design='volume'] .volume-section-title { display:flex; justify-content:space-between; align-items:center; margin:0 3px 17px; gap:10px; }
:root[data-design='volume'] .volume-section-title>div { display:flex; gap:10px; align-items:center; }
:root[data-design='volume'] .volume-section-title h2 { font-size:17px; letter-spacing:-.3px; }
:root[data-design='volume'] .volume-section-title>span { font-size:10px; color:var(--muted); }
:root[data-design='volume'] .volume-section-number { font-size:10px; color:var(--muted); letter-spacing:1px; }
:root[data-design='volume'] .volume-count { font-size:10px; background:var(--v-input); border-radius:50%; padding:4px 7px; }
:root[data-design='volume'] .board-toolbar { margin-bottom:19px; }
:root[data-design='volume'] .view-switch { background:var(--v-input); border-color:transparent; border-radius:22px; padding:4px; box-shadow:inset 1px 2px 4px rgba(55,64,51,.19),0 1px 0 var(--v-edge); }
:root[data-design='volume'] .view-switch button { border-radius:18px; color:var(--muted); min-height:30px; }
:root[data-design='volume'] .view-switch .active { color:var(--text); background:var(--v-raised); box-shadow:2px 3px 4px rgba(55,60,44,.2),inset 1px 1px 0 var(--v-edge); }
:root[data-design='volume'] .filter-group .secondary-btn { font-size:10px; min-height:34px; }
:root[data-design='volume'] .team-stack .avatar { border-color:#b8b9a9; }
:root[data-design='volume'] .team-caption { font-size:10px; color:var(--muted); }
:root[data-design='volume'] .project-boards { gap:23px; grid-auto-columns:calc((100% - 46px)/3); padding:0 12px 29px 0; scroll-padding:0 12px; scrollbar-color:rgba(58,83,65,.30) transparent; }
:root[data-design='volume'] .project-board { padding:19px 17px 16px; min-height:510px; height:max(510px,calc(100dvh - 600px)); border-radius:32px; background:var(--v-panel); box-shadow:3px 6px 0 rgba(69,72,56,.12),8px 15px 22px rgba(45,55,41,.23),inset 1px 2px 1px var(--v-edge); }
:root[data-design='volume'] .project-board-header { padding:0 2px 14px; margin:0 0 20px; border-color:var(--line); background:none; border-radius:0; }
:root[data-design='volume'] .project-board-header h2 { font-size:17px; font-weight:560; line-height:1.4; letter-spacing:-.45px; margin:14px 0 7px; }
:root[data-design='volume'] .project-board-header h2 button { color:var(--text); }
:root[data-design='volume'] .project-address { color:var(--muted); font-size:10px; }
:root[data-design='volume'] .badge { border-radius:20px; color:var(--secondary); background:rgba(104,88,65,.08); border:1px solid var(--line); }
:root[data-design='volume'] .badge-rent { color:var(--success); background:rgba(86,181,143,.11); }
:root[data-design='volume'] .project-meta { margin-top:16px; font-size:10px; color:var(--secondary); }
:root[data-design='volume'] .project-meta strong { font-size:15px; color:var(--text); }
:root[data-design='volume'] .project-owner { margin-top:15px; font-size:10px; color:var(--secondary); }
:root[data-design='volume'] .project-owner .text-btn { color:var(--accent); font-size:9px; }
:root[data-design='volume'] .project-progress { color:var(--muted); font-size:9px; margin-top:12px; }
:root[data-design='volume'] .progress-track { height:5px; background:var(--v-input); box-shadow:inset 0 1px 2px rgba(30,61,44,.18); }
:root[data-design='volume'] .progress-fill { background:linear-gradient(90deg,#409b80,#97dfbe); }
:root[data-design='volume'] .project-task-list { gap:30px; padding:0 7px 18px 2px; margin-right:-6px; min-height:160px; }
:root[data-design='volume'] .project-task { margin:0 0 0; padding:13px 15px 14px; border-radius:25px; background:var(--v-raised); border:1px solid var(--v-edge); box-shadow:0 4px 0 rgba(100,81,59,.28),6px 11px 11px rgba(49,51,36,.23),inset 1px 2px 1px rgba(255,245,224,.55); flex-shrink:0; }
:root[data-design='volume'] .project-task+.project-task:before { content:'↓'; position:absolute; top:-27px; left:calc(50% - 6px); font-size:22px; color:var(--secondary); line-height:22px; text-shadow:0 1px 0 var(--v-edge); }
:root[data-design='volume'] .project-task-top { margin-bottom:7px; }
:root[data-design='volume'] .project-task-status { color:var(--secondary); border:0; background:transparent; padding:0; font-size:8px; }
:root[data-design='volume'] .project-task-title { font-size:12px; line-height:1.45; font-weight:600; color:var(--text); }
:root[data-design='volume'] .project-task-meta { color:var(--muted); font-size:8px; margin-top:14px; }
:root[data-design='volume'] .project-task-meta .avatar { width:18px; height:18px; font-size:6px; }
:root[data-design='volume'] .project-task.is-complete { color:#a7f5df; background:linear-gradient(145deg,#3e6155,#2c4842); border-color:#a2f1d9; box-shadow:0 4px 0 #2f6556,6px 11px 13px rgba(29,66,48,.22),inset 0 0 3px #b0ffea,0 0 11px rgba(134,241,203,.2); }
:root[data-design='volume'] .project-task.is-complete :is(.project-task-title,.project-task-status,.project-task-meta,.icon-btn) { color:#b9ffe9; }
:root[data-design='volume'] .project-empty { min-height:165px; color:var(--muted); border:1px dashed var(--line); border-radius:23px; background:rgba(233,220,195,.05); }
:root[data-design='volume'] .project-empty small { color:var(--muted); }
:root[data-design='volume'] .project-dropzone { border:1px dashed rgba(67,106,84,.5); border-radius:23px; background:var(--v-input); color:var(--secondary); box-shadow:inset 1px 2px 4px rgba(53,70,48,.14),0 1px 0 var(--v-edge); padding:12px; margin-top:12px; }
:root[data-design='volume'] .project-dropzone svg { color:var(--success); }
:root[data-design='volume'] .project-dropzone small { color:var(--muted); }
:root[data-design='volume'] .project-board.drop-target { border-color:#9ff9df; box-shadow:inset 0 0 1px 1px #adffe7,0 0 24px rgba(112,255,210,.45),var(--v-shadow); }
:root[data-design='volume'] .project-board.drop-target .project-dropzone { background:rgba(74,182,139,.18); color:var(--success); border-color:var(--success); }
:root[data-design='volume'] .project-board-footer { padding-top:12px; font-size:9px; color:var(--muted); }
:root[data-design='volume'] .project-board-footer .text-btn { font-size:9px; }
:root[data-design='volume'] .project-summary { margin-top:7px; font-size:10px; color:var(--muted); }
:root[data-design='volume'] .app-footer { color:var(--muted); margin-top:30px; font-size:8px; }
:root[data-design='volume'] .local-state { color:var(--muted); }
:root[data-design='volume'] .local-state>span { background:var(--success); }
:root[data-design='volume'] .board-summary .muted { color:var(--muted); }
@media (min-width:1650px) {
  :root[data-design='volume'] .app-shell { grid-template-columns:236px minmax(0,1fr); gap:40px; padding:32px; }
  :root[data-design='volume'] .sidebar { top:32px; height:calc(100dvh - 64px); }
  :root[data-design='volume'] .project-board { padding:24px; }
  :root[data-design='volume'] .project-board-header h2 { font-size:21px; }
  :root[data-design='volume'] .project-task-title { font-size:14px; }
  :root[data-design='volume'] .project-task-meta { font-size:10px; }
}
@media (max-width:1200px) {
  :root[data-design='volume'] .app-shell { grid-template-columns:185px minmax(0,1fr); padding:18px; gap:23px; }
  :root[data-design='volume'] .sidebar { top:18px; height:calc(100dvh - 36px); padding:27px 9px 15px; }
  :root[data-design='volume'] .brand { font-size:18px; letter-spacing:1px; }
  :root[data-design='volume'] .brand-subtitle { font-size:6px; letter-spacing:1.3px; }
  :root[data-design='volume'] .workspace-label { font-size:9px; padding-inline:3px; }
  :root[data-design='volume'] .workspace-label small { font-size:8px; }
  :root[data-design='volume'] .task-template-list { gap:12px; }
  :root[data-design='volume'] .task-template { padding:8px; gap:6px; }
  :root[data-design='volume'] .task-template strong { font-size:10px; }
  :root[data-design='volume'] .project-boards { grid-auto-columns:calc((100% - 23px)/2); }
}
@media (min-width:768px) and (max-width:950px) {
  .design-picker { padding:5px 0 15px; }
  .design-picker>span { display:none; }
  .design-picker>div { flex-direction:column; }
  .design-picker a { font-size:8px; padding:8px 2px; }
  :root[data-design='volume'] .app-shell { grid-template-columns:74px minmax(0,1fr); gap:20px; }
  :root[data-design='volume'] .brand { font-size:0; margin:4px auto 30px; }
  :root[data-design='volume'] .brand:before { color:var(--text); }
  :root[data-design='volume'] #navigation :is(a,button) { font-size:0; padding:12px 0; justify-content:center; }
  :root[data-design='volume'] .design-picker { padding-inline:0; }
  :root[data-design='volume'] .volume-heading h1 { font-size:35px; }
  :root[data-design='volume'] .task-shelf-heading>div { display:block; }
  :root[data-design='volume'] .task-shelf-heading p { text-align:left; max-width:none; margin-top:6px; }
}
@media (max-width:767px) {
  :root[data-design='volume'] .app-shell { display:block; padding:0 16px 18px; }
  :root[data-design='volume'] .sidebar { position:fixed; top:12px; left:12px; height:calc(100dvh - 24px); width:248px; padding:27px 16px 16px; background:linear-gradient(130deg,#dfceba,#acb7a4); }
  :root[data-design='volume'][data-theme='dark'] .sidebar { background:linear-gradient(130deg,#536052,#233b39); }
  :root[data-design='volume'] .sidebar .brand { font-size:22px; margin:4px 10px 28px; }
  :root[data-design='volume'] .brand-subtitle { font-size:7px; letter-spacing:1.8px; }
  :root[data-design='volume'] #navigation :is(a,button) { font-size:12px; }
  :root[data-design='volume'] .workspace-label { font-size:11px; }
  :root[data-design='volume'] .workspace-label small { font-size:9px; }
  :root[data-design='volume'] .main-area { padding:0; }
  :root[data-design='volume'] .topbar { height:126px; margin:0 0 22px; padding-top:18px; }
  :root[data-design='volume'] .topbar .icon-btn { width:43px; height:43px; }
  :root[data-design='volume'] .topbar-actions { gap:8px; }
  :root[data-design='volume'] .global-search { top:78px; height:38px; min-height:38px; }
  :root[data-design='volume'] .volume-heading { gap:12px; align-items:flex-start; padding:0; margin-bottom:25px; }
  :root[data-design='volume'] .volume-heading h1 { font-size:30px; letter-spacing:-1px; }
  :root[data-design='volume'] .volume-heading .eyebrow { font-size:7px; letter-spacing:1px; margin-bottom:11px; }
  :root[data-design='volume'] .volume-heading p { font-size:10px; max-width:215px; }
  :root[data-design='volume'] .volume-heading-actions { padding:30px 0 0; flex-shrink:0; gap:14px; }
  :root[data-design='volume'] .volume-heading-actions .primary-btn { font-size:9px; min-height:39px; padding:8px 12px; margin-top:0; }
  :root[data-design='volume'] .volume-live { font-size:8px; gap:5px; }
  :root[data-design='volume'] .task-shelf { padding:16px 14px 21px; margin-bottom:25px; border-radius:27px; }
  :root[data-design='volume'] .task-shelf-heading { gap:8px; margin-bottom:17px; }
  :root[data-design='volume'] .task-shelf-heading h2 { font-size:13px; }
  :root[data-design='volume'] .task-shelf-heading p { font-size:9px; max-width:190px; text-align:left; margin-top:6px; }
  :root[data-design='volume'] .task-shelf-heading>.pill { font-size:7px; white-space:nowrap; padding:5px; }
  :root[data-design='volume'] .task-template-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
  :root[data-design='volume'] .task-template { min-height:51px; gap:7px; padding:8px; }
  :root[data-design='volume'] .task-template strong { font-size:10px; }
  :root[data-design='volume'] .template-icon { width:27px; height:27px; flex-basis:27px; }
  :root[data-design='volume'] .volume-section-title { align-items:flex-start; flex-direction:column; gap:9px; }
  :root[data-design='volume'] .volume-section-title h2 { font-size:18px; }
  :root[data-design='volume'] .volume-section-title>span { font-size:9px; padding-left:28px; }
  :root[data-design='volume'] .board-toolbar { gap:9px; }
  :root[data-design='volume'] .view-switch button { font-size:9px; padding:7px 9px; gap:5px; }
  :root[data-design='volume'] .filter-group .secondary-btn { font-size:8px; padding:8px; }
  :root[data-design='volume'] .project-boards { grid-auto-columns:minmax(280px,calc(100vw - 65px)); gap:17px; padding:0 23px 26px 0; margin-right:-16px; }
  :root[data-design='volume'] .project-board { height:auto; min-height:515px; padding:21px 17px 16px; }
  :root[data-design='volume'] .project-board-header h2 { font-size:20px; }
  :root[data-design='volume'] .project-task-list { padding-bottom:20px; }
  :root[data-design='volume'] .project-task-title { font-size:13px; }
  :root[data-design='volume'] .project-task-meta { font-size:9px; }
  :root[data-design='volume'] .project-summary { font-size:9px; gap:20px; }
}
:root[data-design='volume'][data-transparency='reduced'] .glass { background:#c3b8a7; backdrop-filter:none; -webkit-backdrop-filter:none; }
:root[data-design='volume'][data-transparency='reduced'][data-theme='dark'] .glass { background:#384c47; }
@media (prefers-reduced-transparency:reduce) {
  :root[data-design='volume'] .glass { background:#c3b8a7; backdrop-filter:none; -webkit-backdrop-filter:none; }
  :root[data-design='volume'][data-theme='dark'] .glass { background:#384c47; }
}
@supports not (backdrop-filter:blur(1px)) {
  :root[data-design='volume'] .glass { background:#c3b8a7; }
  :root[data-design='volume'][data-theme='dark'] .glass { background:#384c47; }
}
@media (forced-colors:active) {
  :root[data-design='volume'] :is(.glass,.task-template,.project-task,.primary-btn,.secondary-btn) { background:Canvas; color:CanvasText; box-shadow:none; border:1px solid CanvasText; }
}