@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#091015;--panel:#101a20;--line:#233943;--text:#edf7f5;--muted:#8fa6ae;--green:#50d499;--cyan:#55cce0;--amber:#e7b25a;--violet:#c27ce8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}button,input,select,textarea{font:inherit}button{padding:9px 12px;color:var(--text);font-weight:700;border:1px solid #334b55;border-radius:6px;background:#1a2931;cursor:pointer}button:hover{background:#243740;border-color:#55717c}.primary{background:#147f59;border-color:#35be82}.primary:hover{background:#189567}.warning{background:#654915;border-color:#b78c2b}.quiet{background:transparent;border:0;color:var(--muted);padding-left:0}input,select,textarea{width:100%;margin-top:5px;padding:10px;color:var(--text);background:#091015;border:1px solid #324650;border-radius:5px}textarea{min-height:88px;resize:vertical}label{display:grid;font-size:12px;font-weight:700;color:#b4c6ca}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 75% 15%,#174134 0,transparent 28%),radial-gradient(circle at 15% 85%,#113842 0,transparent 32%),var(--bg)}.login-card{width:min(430px,92vw);padding:34px;background:#0e191f;border:1px solid #2c464d;border-radius:8px;box-shadow:0 30px 80px #0009}.login-mark,.brand-mark{display:grid;place-items:center;background:var(--green);color:#062218;border-radius:6px;font-weight:900}.login-mark{width:43px;height:43px;font-size:19px;margin-bottom:22px}.eyebrow{font:700 10px ui-monospace,monospace;letter-spacing:1.1px;color:var(--cyan)}.login-card h1{font-size:28px;margin:8px 0}.login-card p{color:var(--muted);line-height:1.5}.login-card form{display:grid;gap:13px;margin:25px 0 15px}.login-card small{color:var(--muted)}code{color:#aef3cc}.error{color:#ff9ca2;margin-top:12px}.shell{display:grid;grid-template-columns:242px minmax(0,1fr);min-height:100vh}.side{height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:20px 12px;background:#0b151b;border-right:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;padding:5px 10px 30px}.brand-mark{width:35px;height:35px}.brand strong,.brand span{display:block}.brand span{font-size:11px;color:var(--muted);margin-top:2px}.nav{display:grid;gap:4px}.nav button{position:relative;display:flex;align-items:center;gap:10px;text-align:left;border:0;background:transparent;color:#91a8b0}.nav button.active,.nav button:hover{background:#143029;color:#aef0cf}.nav button.active:before{content:'';position:absolute;left:0;width:3px;height:17px;background:var(--green)}.nav i{width:7px;height:7px;border:1px solid #63808a;border-radius:50%}.nav .active i{background:var(--green);border-color:var(--green)}.nav b{margin-left:auto;padding:2px 6px;font-size:10px;background:#714229;color:#ffd9ad;border-radius:10px}.side-footer{margin-top:auto;border-top:1px solid var(--line);padding:15px 8px 0}.user-chip{display:flex;gap:9px;align-items:center}.user-chip>span,.team-card>span{display:grid;place-items:center;border-radius:50%;background:#213840;border:1px solid #3d6763;color:#a9f1cc;font-size:10px;font-weight:800}.user-chip>span{width:30px;height:30px}.user-chip strong,.user-chip small{display:block}.user-chip small{color:var(--muted);font-size:10px;margin-top:2px}.main{max-width:1600px;width:100%;margin:auto;padding:0 34px 42px}.topbar{position:relative;z-index:100;height:65px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);margin:0 -34px;padding:0 34px}.crumb span{font:700 10px ui-monospace,monospace;color:var(--cyan)}.top-actions{display:flex;gap:12px;align-items:center;white-space:nowrap}.network{color:#88dab6}.network i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--green)}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0 14px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:14px;flex-wrap:wrap}.page-heading h1{font-size:18px;margin:2px 0 0;font-weight:800;color:#fff}.page-heading .eyebrow{font-size:10px;letter-spacing:.8px;color:var(--cyan)}.page-heading p{display:none!important}.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}.page-actions select{width:auto!important;min-width:150px;margin:0!important;padding:6px 10px;font-size:12px}.page-actions button{white-space:nowrap!important;margin:0!important;padding:6px 12px;font-size:11.5px;font-weight:700}.signals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.signal{padding:18px;background:#0e181e;border:1px solid var(--line);border-top:2px solid #48616a;border-radius:6px}.signal.cyan{border-top-color:var(--cyan)}.signal.amber{border-top-color:var(--amber)}.signal.violet{border-top-color:var(--violet)}.signal.green{border-top-color:var(--green)}.signal span,.metrics span,.workspace-meta span{display:block;color:var(--muted);font:700 10px ui-monospace,monospace;letter-spacing:.7px}.signal strong{display:block;margin:11px 0 7px;font:800 31px ui-monospace,monospace}.signal small{color:#a9bec3}.flow{display:grid;grid-template-columns:280px 1fr;gap:22px;margin:16px 0;padding:20px;border:1px solid #284650;border-radius:7px;background:linear-gradient(105deg,#10252a,#0d181e)}.flow h2,.board h2,.module-toolbar h2,.list-toolbar h2{font-size:17px;margin:7px 0}.flow p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.flow-steps,.kanban{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.flow-steps button,.kanban button{min-height:86px;padding:10px;text-align:left;background:#0a1419;border-color:#29434c}.flow-steps button:hover,.kanban button:hover,.kanban button.selected{background:#133128;border-color:#44a97d}.flow-steps span,.kanban span{display:block;font:700 10px ui-monospace,monospace;color:var(--cyan)}.flow-steps strong,.kanban strong{display:block;margin-top:7px;font-size:11px}.flow-steps em,.kanban em{display:block;margin-top:6px;color:var(--green);font:800 19px ui-monospace,monospace;font-style:normal}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.surface,.activity,.board{background:#0d171d;border:1px solid var(--line);border-radius:7px}.surface-title{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.surface-title h2{margin:0;font-size:15px}.surface-title span{font:10px ui-monospace,monospace;color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;min-width:780px;border-collapse:collapse}th{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);font:700 10px ui-monospace,monospace;color:var(--muted)}td{padding:14px 16px;border-bottom:1px solid #1f3038;vertical-align:middle}tr:last-child td{border:0}tr:hover td{background:#102129}td small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.module-link{padding:0;background:transparent;border:0;color:#ace3ed}.person{display:flex;align-items:center;gap:7px;white-space:nowrap}.person i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#213a43;color:#abe9e7;font-size:9px;font-style:normal}.next{color:#b5c8c9;font-size:12px}.open{padding:5px 8px;background:transparent}.badge{display:inline-flex;padding:4px 8px;border:1px solid #455961;border-radius:99px;color:#cadadd;font:700 10px ui-monospace,monospace;white-space:nowrap}.badge.assigned,.badge.in_progress,.badge.developer{color:#9bdfff;border-color:#34789a}.badge.submitted,.badge.test_assigned,.badge.testing,.badge.tester{color:#ffd47e;border-color:#876826}.badge.tested,.badge.approved{color:#92efbe;border-color:#337f5b}.badge.revision_requested{color:#ff9ca2;border-color:#91414c}.badge.build_failed{color:#f87171;border-color:rgba(239,68,68,0.5);background:rgba(239,68,68,0.12)}.badge.build_queued{color:#f59e0b;border-color:#b45309;background:rgba(245,158,11,0.12)}.badge.building_preflight{color:#38bdf8;border-color:#0284c7;background:rgba(56,189,248,0.15)}.badge.building_release{color:#c084fc;border-color:#9333ea;background:rgba(192,132,252,0.15)}.activity{padding:16px}.activity .surface-title{padding:0 0 13px;background:transparent;border:0}.activity-row{display:flex;gap:9px;padding:13px 0;border-top:1px solid #203038}.activity-row>i{width:7px;height:7px;margin-top:5px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 3px #14313a}.activity-row p{margin:4px 0;color:#b4c7ca;font-size:11px}.activity-row small{color:var(--muted);font:10px ui-monospace,monospace}.empty{display:grid;gap:6px;padding:32px;text-align:center;color:var(--muted)}.empty strong{color:#c4d6d9}.board{padding:20px;margin-bottom:16px}.board header,.module-toolbar,.list-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.board header button.selected{color:#aaf1ca;border-color:var(--green)}.kanban button{min-height:124px}.kanban small{display:block;max-height:30px;overflow:hidden;margin-top:8px;color:var(--muted);font-size:10px;line-height:1.4}.module-toolbar{padding:4px 0 8px}.module-grid,.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.module-card{padding:18px;border:1px solid var(--line);border-radius:7px;background:#0d171d;cursor:pointer;transition:.18s}.module-card:hover{background:#10252a;border-color:#49a77d;transform:translateY(-2px)}.module-card>div:first-child,.module-card footer{display:flex;justify-content:space-between;align-items:center}.token{padding:6px;border:1px solid #3a626c;background:#19313b;border-radius:4px;color:#a3e6ed;font:800 11px ui-monospace,monospace}.module-card h2{margin:20px 0 8px;font-size:17px}.module-card p{min-height:52px;color:var(--muted);font-size:12px;line-height:1.5}.metrics{display:grid;grid-template-columns:1fr 1fr;padding:12px 0;margin:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics strong{display:block;margin-top:6px;font-size:12px}.module-card footer{color:var(--muted);font-size:11px}.module-card footer b{color:#96e4bd}.review-note{margin-bottom:14px;padding:13px 16px;background:#241c10;border-left:3px solid var(--amber)}.review-note span{font:700 10px ui-monospace,monospace;color:#f2c471}.review-note p{margin:5px 0 0;color:#ddca9e;font-size:12px}.team-card{display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;padding:16px;background:#0d171d;border:1px solid var(--line);border-radius:7px}.team-card>span{height:42px;width:42px}.team-card h2{margin:0;font-size:14px}.team-card p{margin:4px 0 0;color:var(--muted);font-size:11px}.team-card>div:last-child{text-align:right}.team-card small{display:block;margin-top:5px;color:var(--muted);font-size:10px}.modal{width:min(920px,94vw);max-width:94vw;max-height:min(90vh,880px);margin:auto;overflow-y:auto;overflow-x:hidden;padding:0;color:var(--text);background:#0d171d;border:1px solid #36505a;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,0.75)}.modal::backdrop{background:rgba(0,0,0,0.75);backdrop-filter:blur(4px)}.modal.modal-sm{width:min(480px,94vw)!important}.modal.modal-md{width:min(640px,94vw)!important}.modal.modal-lg{width:min(880px,94vw)!important}.modal.modal-xl{width:min(1060px,95vw)!important}.modal form,.workspace,.taskdetail{display:grid;gap:14px;padding:24px;width:100%;box-sizing:border-box}.modal header,.workspace header,.taskdetail header{display:flex;justify-content:space-between;align-items:start;gap:16px}.modal h2{margin:5px 0;font-size:21px}.formgrid,.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.workspace-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.workspace-meta strong{display:block;margin-top:5px;font-size:12px}.workspace-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.workspace-flow div{padding:10px;background:#102129;border:1px solid #2d4851;border-radius:5px}.workspace-flow span,.workspace-flow small{display:block;color:var(--muted);font:10px ui-monospace,monospace}.workspace-flow strong{display:block;margin:5px 0;color:var(--green);font-size:20px}.note{display:grid;gap:4px;padding:11px;color:#b9eaca;background:#10251e;border:1px solid #2e5b48;border-radius:5px;font-size:12px}.detailgrid .wide{grid-column:1/-1}.detailgrid h3,.workspace h3{margin:2px 0 7px;font-size:13px}.detailgrid article,.evidence article{padding:12px;color:#c7d8db;white-space:pre-wrap;line-height:1.55;font-size:12px;background:#091217;border:1px solid #243944}.test-exec-result { background: rgba(0,0,0,0.2); border: 1px solid var(--line); border-radius: 4px; padding: 12px; }.dev-scenarios-inner { background: rgba(0,0,0,0.15); border: 1px solid var(--line); padding: 12px; border-radius: 4px; }.evidence{padding-top:14px;border-top:1px solid var(--line)}.evidence .eyebrow{margin-bottom:8px}.files{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.files a{padding:5px 8px;color:#a9e7ef;border:1px solid #34545f;border-radius:4px;text-decoration:none;font-size:11px}.side-actions{display:flex;gap:8px;margin-top:15px}.side-actions button{flex:1;font-size:11px;padding:7px;text-align:center;border-radius:5px}@media(max-width:1000px){.flow{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr}.activity{display:none}.flow-steps,.kanban{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;padding:10px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:3px 8px 12px}.side-footer{display:none}.nav{display:flex;overflow:auto}.nav button{white-space:nowrap}.main{padding:0 16px 30px}.topbar{height:54px}.top-actions span:last-child{display:none}.page-heading{align-items:start;flex-direction:column;padding:24px 0 18px}.signals{grid-template-columns:repeat(2,1fr)}.flow-steps,.kanban{grid-template-columns:repeat(2,1fr)}.formgrid,.detailgrid,.workspace-meta{grid-template-columns:1fr}.detailgrid .wide{grid-column:auto}.workspace-flow{grid-template-columns:repeat(3,1fr)}.modal form,.workspace,.taskdetail{padding:18px}}
.task-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px}.task-tabs button{background:transparent;color:var(--muted);border-color:transparent}.task-tabs button.active{color:#aef0cf;background:#143029;border-color:#2b6d57}.task-activity{display:grid;gap:14px}.task-activity ol{list-style:none;margin:0;padding:0;display:grid;gap:0}.task-activity li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:0 0 18px}.task-activity li:not(:last-child):before{content:"";position:absolute;left:7px;top:16px;bottom:-3px;width:1px;background:#2b4650}.task-activity li i{width:15px;height:15px;margin-top:2px;border:3px solid #0d171d;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 1px #39778a;z-index:1}.task-activity strong{display:block;color:#e4f0ef;font-size:13px}.task-activity p{margin:5px 0;color:#b9cbce;font-size:12px;line-height:1.45}.task-activity small{color:var(--muted);font:10px ui-monospace,monospace}.related-tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.related-task{display:grid;gap:5px;text-align:left;background:#102129;border-color:#315966}.related-task span{color:var(--cyan);font:700 10px ui-monospace,monospace;letter-spacing:.7px}.related-task strong{font-size:13px}.related-task small{display:flex;align-items:center}@keyframes taskPanelEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}[data-task-panel].panel-enter{animation:taskPanelEnter .22s ease-out both}@media(prefers-reduced-motion:reduce){[data-task-panel].panel-enter{animation:none}}[data-task-panel][hidden]{display:none!important}#test-routing[hidden]{display:none!important}
.calendar-wrapper{margin-top:20px;background:linear-gradient(135deg, rgba(13,23,29,0.8), rgba(16,33,41,0.9));border:1px solid rgba(85,204,224,0.15);border-radius:12px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,0.4);backdrop-filter:blur(10px)}.calendar-header{display:flex;background:rgba(10,18,22,0.85);border-bottom:1px solid rgba(85,204,224,0.1)}.cal-tester-col{width:220px;padding:16px;font:700 11px ui-monospace,monospace;color:#a2efff;border-right:1px solid rgba(85,204,224,0.1);flex-shrink:0}.cal-time-col{flex:1;display:flex;position:relative}.cal-time-col span{flex:1;padding:16px 0 16px 2px;text-align:left;font:700 8.5px ui-monospace,monospace;color:var(--muted);border-right:1px solid rgba(255,255,255,0.03)}.cal-time-col span:last-child{border-right:0}.cal-row{display:flex;border-bottom:1px solid rgba(255,255,255,0.03);transition:background .2s}.cal-row:last-child{border-bottom:0}.cal-row:hover{background:rgba(85,204,224,0.03)}.cal-tester{width:220px;padding:16px;display:flex;align-items:center;gap:12px;border-right:1px solid rgba(85,204,224,0.1);flex-shrink:0}.cal-tester .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg, #1d313a, #233943);color:#a9f1cc;display:grid;place-items:center;font-size:12px;font-weight:800;border:1px solid #3d6763;box-shadow:inset 0 2px 4px rgba(255,255,255,0.05)}.cal-tester strong{color:#e4f0ef;font-size:13px;letter-spacing:0.3px}.cal-tester small{display:block;margin-top:4px;color:#7e9c9c;font-size:11px}.cal-timeline{flex:1;position:relative;background:repeating-linear-gradient(to right, transparent, transparent calc(4.1666% - 1px), rgba(255,255,255,0.03) calc(4.1666% - 1px), rgba(255,255,255,0.03) 4.1666%)}.cal-bar{position:absolute;height:28px;border-radius:6px;padding:0 10px;display:flex;align-items:center;font-size:11px;font-weight:700;white-space:nowrap;color:#fff;box-shadow:0 3px 12px rgba(0,0,0,0.45);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,z-index .2s;z-index:2;backdrop-filter:blur(4px);min-width:44px;box-sizing:border-box}.cal-bar-inner{display:flex;flex-direction:column;width:100%}.cal-bar-title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cal-bar-time{display:none;font-size:9.5px;color:rgba(255,255,255,0.7);margin-top:3px;font-weight:600}.cal-bar:hover{transform:scale(1.02);z-index:100;width:auto!important;min-width:180px;height:auto;padding:8px 12px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.75);filter:brightness(1.15)}.cal-bar:hover .cal-bar-inner{align-items:flex-start}.cal-bar:hover .cal-bar-title{white-space:normal;text-overflow:clip;overflow:visible}.cal-bar:hover .cal-bar-time{display:block}.cal-bar.testing{background:linear-gradient(90deg, rgba(231,178,90,0.15), rgba(231,178,90,0.4));border:1px solid rgba(231,178,90,0.6);color:#ffd996;box-shadow:0 0 20px rgba(231,178,90,0.2), inset 0 0 8px rgba(231,178,90,0.1)}.cal-bar.test_assigned{background:linear-gradient(90deg, rgba(85,204,224,0.15), rgba(85,204,224,0.4));border:1px solid rgba(85,204,224,0.6);color:#a2efff;box-shadow:0 0 20px rgba(85,204,224,0.2), inset 0 0 8px rgba(85,204,224,0.1)}.cal-bar.tested{background:linear-gradient(90deg, rgba(80,212,153,0.15), rgba(80,212,153,0.4));border:1px solid rgba(80,212,153,0.6);color:#92efbe;box-shadow:0 0 20px rgba(80,212,153,0.2), inset 0 0 8px rgba(80,212,153,0.1)}

/* Global Team Card Redesign */
.team-grid { gap: 24px; }
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; gap: 16px; }
.team-card > span { width: 64px; height: 64px; font-size: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.team-card > div:nth-child(2) { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.team-card h2 { font-size: 16px; margin: 0; }
.team-card p { font-size: 13px; margin: 0; }
.team-card > div:last-child { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: auto; text-align: center; }
.team-card .badge { margin: 2px; }
.team-card small { font-size: 12px; font-weight: 500; margin-bottom: 8px; }
.team-card button { width: 100%; padding: 10px; justify-content: center; display: block; text-align: center; }
.quick-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 14px;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}
.chip:hover {
  background: rgba(255,255,255,0.08);
  color: #f8fafc;
}
.chip.status-chip.pass-chip.active, button.chip.status-chip.pass-chip.active {
  background: rgba(34, 197, 94, 0.25) !important;
  border-color: #22c55e !important;
  color: #4ade80 !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3) !important;
  opacity: 1 !important;
}
.chip.status-chip.fail-chip.active, button.chip.status-chip.fail-chip.active {
  background: rgba(244, 63, 94, 0.25) !important;
  border-color: #f43f5e !important;
  color: #fb7185 !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.3) !important;
  opacity: 1 !important;
}
/* Default / Mühendislik Theme Custom Animations */
@keyframes eng-page-enter {
  0% { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes eng-modal-enter {
  0% { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Workflow Type Filter Tabs (Yazılım Geliştirme / Test / Destek) */
.workflow-type-tabs {
  display: flex;
  gap: 8px;
  margin: -10px 0 14px;
  flex-wrap: wrap;
}
.workflow-type-tabs button {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  transition: all 0.2s;
}
.workflow-type-tabs button:hover {
  background: rgba(255,255,255,0.05);
  border-color: #44697a;
  color: var(--text);
  transform: none;
}
.workflow-type-tabs button.active {
  background: rgba(80,212,153,0.12);
  border-color: var(--green);
  color: #a4f3cf;
}

/* Team Member Chips (Kişi Bazlı Filtre) */
.team-member-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 16px;
  flex-wrap: wrap;
}
.team-member-chips .team-chip-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.team-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.4);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.team-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #44697a;
  color: var(--text);
  transform: none;
}
.team-chip.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}
.team-chip-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #334155;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.team-chip.active .team-chip-avatar {
  background: var(--cyan);
  color: #0f172a;
}
.team-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.team-member-select {
  background: #0e181e;
  border: 1px solid #233943;
  color: #edf7f5;
  border-radius: 6px;
  padding: 5px 30px 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  min-width: 220px;
  height: 32px;
  box-sizing: border-box;
  transition: all 0.2s;
}
.team-member-select:hover {
  border-color: #55cce0;
  background: #14242b;
}
.team-member-select:focus {
  border-color: #55cce0;
  box-shadow: 0 0 0 2px rgba(85, 204, 224, 0.2);
}
.team-select-arrow {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: var(--cyan);
}
.clear-team-filter {
  height: 32px;
  box-sizing: border-box;
}

html:not([class*="theme-"]) #content,
html:not([class*="theme-"]) .page-heading,
html.theme-default #content,
html.theme-default .page-heading {
  animation: eng-page-enter 0.3s ease-out both;
}
html:not([class*="theme-"]) .modal,
html.theme-default .modal {
  animation: eng-modal-enter 0.3s ease-out both;
  overflow-y: auto !important;
  max-height: calc(100vh - 100px) !important;
}

/* macOS Tahoe Dark Mode */
html.theme-liquid body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Android Emoji", sans-serif !important; background-size: cover !important; background-attachment: fixed !important; background-position: center !important; color: #ececec; transition: background 1s ease; }

/* Wallpapers */
html.theme-liquid.bg-blue body {
  background-image: radial-gradient(circle at 50% -20%, #2f6a96 0%, #0d1b2a 60%, #050b14 100%);
}
html.theme-liquid.bg-purple body {
  background-image: radial-gradient(circle at 80% 0%, #4a2b6e 0%, #150929 60%, #080310 100%);
}
html.theme-liquid.bg-sunset body {
  background-image: radial-gradient(circle at 10% 20%, #7a3a24 0%, #29100a 60%, #120402 100%);
}

/* macOS Windows (Surfaces) */
html.theme-liquid .surface, html.theme-liquid .board, html.theme-liquid .module-card, html.theme-liquid .team-card, html.theme-liquid .modal, html.theme-liquid .activity, html.theme-liquid .login-card, html.theme-liquid .calendar-wrapper, html.theme-liquid .signal, html.theme-liquid .member-summary button, html.theme-liquid .flow { background: rgba(30, 30, 30, 0.65) !important; backdrop-filter: blur(40px) saturate(150%) !important; -webkit-backdrop-filter: blur(40px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.4) !important; text-shadow: none !important; border-radius: 12px; }
html.theme-liquid .side { background: rgba(25, 25, 25, 0.5) !important; backdrop-filter: blur(50px) saturate(150%) !important; -webkit-backdrop-filter: blur(50px) saturate(150%) !important; border-radius: 0; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; }
html.theme-liquid .topbar, html.theme-liquid .surface-title, html.theme-liquid th, html.theme-liquid .calendar-header { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; background: transparent !important; }

/* macOS Sidebar Styling */
html.theme-liquid .nav button { background: transparent !important; border: transparent !important; box-shadow: none !important; text-shadow: none !important; border-radius: 6px !important; margin: 2px 12px !important; width: calc(100% - 24px) !important; padding-left: 12px !important; transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); font-weight: 500 !important; letter-spacing: -0.01em; }
html.theme-liquid .nav button:hover { background: rgba(255, 255, 255, 0.1) !important; transform: scale(0.98); }
html.theme-liquid .nav button.active { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; transform: scale(0.98); box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; }
html.theme-liquid .nav button.active:before { display: none !important; }
html.theme-liquid .nav button.active i { display: none !important; }
html.theme-liquid .nav button i { display: none !important; }
html.theme-liquid .nav-role { border: none !important; margin-bottom: 4px; }
html.theme-liquid .role-switch { background: transparent !important; color: rgba(255,255,255,0.5) !important; font-size: 11px !important; text-transform: uppercase; font-weight: 600 !important; padding-left: 12px !important; border: none !important; box-shadow: none !important; text-shadow: none !important; margin-top: 12px; letter-spacing: 0.04em !important; pointer-events: auto; transform: none !important; }
html.theme-liquid .role-switch:hover { background: transparent !important; color: #fff !important; transform: none !important; }
html.theme-liquid .side-footer { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }
html.theme-liquid .side-actions button { background: transparent !important; border: none !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.7) !important; padding: 6px 12px !important; text-align: left; }
html.theme-liquid .side-actions button:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }

/* Cards & Interactions */
html.theme-liquid .kanban button, html.theme-liquid .flow-steps button { background: rgba(30, 30, 30, 0.5) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 20px rgba(0, 0, 0, 0.3) !important; text-shadow: none !important; border-radius: 12px; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.theme-liquid .module-card, html.theme-liquid .team-card { transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: 12px; }
html.theme-liquid .kanban button:hover, html.theme-liquid .member-summary button:hover, html.theme-liquid .member-summary button.selected, html.theme-liquid .module-card:hover, html.theme-liquid .team-card:hover { transform: scale(0.99); background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; z-index: 10; position: relative; }

/* Tables */
html.theme-liquid td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.1s; }
html.theme-liquid tr:hover td { background: rgba(255, 255, 255, 0.08) !important; }

/* macOS Buttons & Badges */
html.theme-liquid button, html.theme-liquid .user-chip > span { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; border-radius: 6px; transition: all 0.15s ease-out; font-weight: 500; text-shadow: 0 1px 1px rgba(0,0,0,0.2); }
html.theme-liquid .user-chip > span { border-radius: 50%; width: 36px; height: 36px; }
html.theme-liquid button:hover { background: rgba(255, 255, 255, 0.15) !important; }
html.theme-liquid button:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.08) !important; }

html.theme-liquid button.primary { background: linear-gradient(180deg, #2b8ffb 0%, #0066cc 100%) !important; border: 1px solid #005bb5 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0,0,0,0.3) !important; color: #fff !important; }
html.theme-liquid button.primary:hover { background: linear-gradient(180deg, #3a98fc 0%, #0070df 100%) !important; }
html.theme-liquid button.primary:active { background: #005bb5 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important; transform: scale(0.96); border-color: #004c99 !important; }

html.theme-liquid button.warning { background: linear-gradient(180deg, #fb9a2b 0%, #cc7a00 100%) !important; border: 1px solid #b56a00 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0,0,0,0.3) !important; color: #fff !important; }
html.theme-liquid button.warning:hover { background: linear-gradient(180deg, #fca63a 0%, #df8500 100%) !important; }
html.theme-liquid button.warning:active { background: #b56a00 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important; transform: scale(0.96); border-color: #995900 !important; }

/* Typography & Forms */
/* macOS Tahoe Animations */
@keyframes mac-page-enter {
  0% { opacity: 0; transform: scale(0.975); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mac-modal-enter {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
html.theme-liquid #content,
html.theme-liquid .page-heading {
  animation: mac-page-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
html.theme-liquid .modal {
  border-radius: 18px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
  animation: mac-modal-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 100px) !important;
}

/* ===========================
   VUEXY DARK THEME
   =========================== */
html.theme-vuexy {
  --vx-bg: #25293c;
  --vx-card: #2f3349;
  --vx-sidebar: #2f3349;
  --vx-border: #434968;
  --vx-text: #cfd3ec;
  --vx-muted: #7983bb;
  --vx-primary: #7367f0;
  --vx-primary-hover: #655bd3;
  --vx-primary-soft: rgba(115,103,240,0.16);
  --vx-success: #28c76f;
  --vx-warning: #ff9f43;
  --vx-danger: #ea5455;
  --vx-info: #00cfe8;
  --vx-heading: #e7e3ff;
  --vx-shadow: 0 4px 18px 0 rgba(15, 20, 34, 0.2);
  --vx-shadow-hover: 0 4px 18px 0 rgba(15, 20, 34, 0.4);
}
html.theme-vuexy * { font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Android Emoji", sans-serif !important; }
html.theme-vuexy body { background: var(--vx-bg) !important; color: var(--vx-text) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Sidebar */
html.theme-vuexy .side { background: var(--vx-sidebar) !important; border-right: 0 !important; box-shadow: 0 0 15px 0 rgba(15, 20, 34, 0.4); z-index: 10; padding-top: 10px; }
html.theme-vuexy .brand { margin-bottom: 20px; padding: 0 24px; }
html.theme-vuexy .brand strong { color: var(--vx-heading); font-weight: 700; letter-spacing: 0.5px; }
html.theme-vuexy .brand span { color: var(--vx-muted); }
html.theme-vuexy .brand-mark { background: var(--vx-primary) !important; box-shadow: 0 0 10px rgba(115,103,240,0.4); }

/* Nav */
html.theme-vuexy .nav { gap: 4px; padding: 0 14px; }
html.theme-vuexy .nav button { color: var(--vx-text); border-radius: 8px; transition: all 0.2s ease-in-out; font-weight: 500; padding: 10px 16px; justify-content: flex-start; width: 100%; border: 0 !important; background: transparent !important; }
html.theme-vuexy .nav button:hover { background: rgba(207, 211, 236, 0.04) !important; color: var(--vx-heading) !important; transform: translateX(4px); }
html.theme-vuexy .nav button.active { background: linear-gradient(72.47deg, #7367f0 22.16%, rgba(115,103,240,0.7) 76.47%) !important; color: #fff !important; font-weight: 600; box-shadow: 0 2px 6px 0 rgba(115,103,240,0.48); transform: none; }
html.theme-vuexy .nav button.active::before { display: none; }
html.theme-vuexy .nav .active i { background: transparent !important; border: 0 !important; color: #fff; }
html.theme-vuexy .nav b { background: rgba(234,84,85,0.16); color: #ea5455; border-radius: 4px; padding: 2px 8px; font-weight: 600; margin-left: auto; }

/* Cards / Surfaces */
html.theme-vuexy .surface, html.theme-vuexy .board, html.theme-vuexy .activity, html.theme-vuexy .flow, html.theme-vuexy .module-card, html.theme-vuexy .team-card, html.theme-vuexy .signal, html.theme-vuexy .login-card, html.theme-vuexy .calendar-wrapper, html.theme-vuexy .related-task { background: var(--vx-card) !important; border: 0 !important; border-radius: 8px; box-shadow: var(--vx-shadow); transition: all 0.3s ease-in-out; }
html.theme-vuexy .module-card:hover, html.theme-vuexy .team-card:hover { transform: translateY(-4px); box-shadow: var(--vx-shadow-hover); }
html.theme-vuexy .surface { padding: 24px; }
html.theme-vuexy .team-card > span { box-shadow: 0 4px 12px rgba(115,103,240,0.3); }

/* Topbar */
html.theme-vuexy .topbar { border-bottom: 1px solid var(--vx-border) !important; background: var(--vx-card) !important; padding: 0 24px; box-shadow: 0 4px 18px 0 rgba(15, 20, 34, 0.1); }
html.theme-vuexy .surface-title { border-bottom: 1px solid var(--vx-border) !important; background: transparent !important; padding: 0 0 16px 0; margin-bottom: 16px; }
html.theme-vuexy th { border-bottom: 1px solid var(--vx-border) !important; color: var(--vx-heading) !important; background: transparent !important; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; padding-bottom: 12px; }
html.theme-vuexy td { border-bottom: 1px solid var(--vx-border) !important; color: var(--vx-text) !important; padding: 12px 8px; }
html.theme-vuexy tr:hover td { background: rgba(207,211,236,0.04) !important; }

/* Buttons */
html.theme-vuexy button { background: rgba(207,211,236,0.08) !important; border: 0 !important; color: var(--vx-heading) !important; border-radius: 6px; transition: all 0.2s ease-in-out; font-weight: 500; padding: 9px 20px; }
html.theme-vuexy button:hover { background: rgba(207,211,236,0.12) !important; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,20,34,0.1); }
html.theme-vuexy button.primary { background: var(--vx-primary) !important; color: #fff !important; box-shadow: 0 2px 6px 0 rgba(115,103,240,0.48) !important; }
html.theme-vuexy button.primary:hover { background: var(--vx-primary-hover) !important; box-shadow: 0 4px 10px 0 rgba(115,103,240,0.6) !important; transform: translateY(-1px); }
html.theme-vuexy button.warning { background: rgba(255,159,67,0.16) !important; color: var(--vx-warning) !important; }
html.theme-vuexy button.warning:hover { background: rgba(255,159,67,0.25) !important; }

/* Badges */
html.theme-vuexy .badge { border-radius: 4px !important; font-weight: 600; padding: 5px 10px; border: 0 !important; letter-spacing: 0.5px; text-transform: uppercase; font-size: 10px; }
html.theme-vuexy .badge.assigned, html.theme-vuexy .badge.in_progress, html.theme-vuexy .badge.developer { background: rgba(0,207,232,0.16); color: var(--vx-info) !important; }
html.theme-vuexy .badge.submitted, html.theme-vuexy .badge.test_assigned, html.theme-vuexy .badge.testing, html.theme-vuexy .badge.tester { background: rgba(255,159,67,0.16); color: var(--vx-warning) !important; }
html.theme-vuexy .badge.tested, html.theme-vuexy .badge.approved { background: rgba(40,199,111,0.16); color: var(--vx-success) !important; }
html.theme-vuexy .badge.revision_requested { background: rgba(234,84,85,0.16); color: var(--vx-danger) !important; }
html.theme-vuexy .badge.build_failed { background: rgba(234,84,85,0.2) !important; color: var(--vx-danger) !important; border: 1px solid rgba(234,84,85,0.4) !important; }
html.theme-vuexy .badge.build_queued { background: rgba(255,159,67,0.16) !important; color: var(--vx-warning) !important; border: 1px dashed rgba(255,159,67,0.5) !important; }
html.theme-vuexy .badge.building_preflight { background: rgba(0,207,232,0.18) !important; color: var(--vx-info) !important; border: 1px solid rgba(0,207,232,0.5) !important; }
html.theme-vuexy .badge.building_release { background: rgba(115,103,240,0.18) !important; color: var(--vx-primary) !important; border: 1px solid rgba(115,103,240,0.5) !important; }

.developer-guidance-callout {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: ev-page-enter 0.25s ease-out;
}
.developer-guidance-callout:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #38bdf8;
}
html.theme-vuexy .developer-guidance-callout {
  background: rgba(0, 207, 232, 0.08) !important;
  border-color: rgba(0, 207, 232, 0.3) !important;
}
html.theme-vuexy .developer-guidance-callout:before {
  background: var(--vx-info);
}
html.theme-neon .developer-guidance-callout {
  background: rgba(0, 245, 255, 0.06) !important;
  border-color: rgba(0, 245, 255, 0.4) !important;
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.15) !important;
}
html.theme-neon .developer-guidance-callout:before {
  background: var(--np-cyan);
  box-shadow: 0 0 8px var(--np-cyan);
}
html.theme-echovision .developer-guidance-callout {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

/* Kanban & Flow Steps */
html.theme-vuexy .kanban button { background: rgba(207,211,236,0.04) !important; border: 1px dashed var(--vx-border) !important; border-radius: 6px; transition: all 0.25s ease-in-out; }
html.theme-vuexy .kanban button:hover, html.theme-vuexy .kanban button.selected { background: rgba(115,103,240,0.08) !important; border: 1px solid var(--vx-primary) !important; transform: translateY(-3px); box-shadow: 0 4px 12px 0 rgba(115,103,240,0.2); }
html.theme-vuexy .kanban span, html.theme-vuexy .kanban em, html.theme-vuexy .flow-steps span { color: var(--vx-primary) !important; }
html.theme-vuexy .flow-steps button { background: rgba(207,211,236,0.04) !important; border: 1px dashed var(--vx-border) !important; border-radius: 6px; transition: all 0.25s; }
html.theme-vuexy .flow-steps button:hover { background: rgba(115,103,240,0.08) !important; border: 1px solid var(--vx-primary) !important; transform: translateY(-2px); }

/* Typography */
html.theme-vuexy h1, html.theme-vuexy h2, html.theme-vuexy h3 { color: var(--vx-heading) !important; font-weight: 600; letter-spacing: -0.3px; }
html.theme-vuexy .page-heading h1 { font-weight: 700; font-size: 26px; }
html.theme-vuexy .eyebrow { color: var(--vx-muted) !important; font-weight: 600; letter-spacing: 1px; }
html.theme-vuexy .muted, html.theme-vuexy small { color: var(--vx-muted); }

/* Inputs */
html.theme-vuexy input, html.theme-vuexy textarea, html.theme-vuexy select { background: transparent !important; border: 1px solid var(--vx-border) !important; color: var(--vx-text) !important; border-radius: 6px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; padding: 10px 14px; }
html.theme-vuexy input:focus, html.theme-vuexy textarea:focus, html.theme-vuexy select:focus { border-color: var(--vx-primary) !important; box-shadow: 0 0 0 3px var(--vx-primary-soft) !important; outline: 0; }

/* Vuexy Animations */
@keyframes vx-page-enter {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes vx-modal-enter {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
html.theme-vuexy #content,
html.theme-vuexy .page-heading {
  animation: vx-page-enter 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html.theme-vuexy .modal { 
  background: var(--vx-card) !important; 
  border: 0 !important; 
  border-radius: 12px !important; 
  box-shadow: 0 10px 40px 0 rgba(15,20,34,0.6) !important; 
  padding: 24px; 
  animation: vx-modal-enter 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 100px) !important;
}

/* Signals */
html.theme-vuexy .signal { border: 0 !important; box-shadow: var(--vx-shadow); position: relative; overflow: hidden; padding: 20px; }
html.theme-vuexy .signal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--vx-border); }
html.theme-vuexy .signal.green::before { background: var(--vx-success); }
html.theme-vuexy .signal.cyan::before { background: var(--vx-info); }
html.theme-vuexy .signal.amber::before { background: var(--vx-warning); }
html.theme-vuexy .signal.violet::before { background: var(--vx-primary); }
html.theme-vuexy .signal strong { color: var(--vx-heading); font-size: 28px; display: block; margin-bottom: 4px; }

/* Note / activity */
html.theme-vuexy .note { background: rgba(115,103,240,0.08) !important; border: 0 !important; border-left: 3px solid var(--vx-primary) !important; color: var(--vx-primary) !important; border-radius: 4px; padding: 12px 16px; margin: 16px 0; }
html.theme-vuexy .activity-row > i { background: var(--vx-primary) !important; box-shadow: 0 0 0 4px rgba(115,103,240,0.16); }
html.theme-vuexy .review-note { background: rgba(255,159,67,0.1) !important; border: 1px solid rgba(255,159,67,0.2) !important; border-left: 4px solid var(--vx-warning) !important; border-radius: 6px; }
html.theme-vuexy .review-note span { color: var(--vx-warning); }

/* User chip */
html.theme-vuexy .user-chip > span, html.theme-vuexy .team-card > span { background: rgba(115,103,240,0.16) !important; border: 0 !important; color: var(--vx-primary) !important; font-weight: 700; }

/* Side footer */
html.theme-vuexy .side-footer { border-top: 1px solid var(--vx-border) !important; }

/* Login */
html.theme-vuexy .login { background: var(--vx-bg) !important; }
html.theme-vuexy .login-card { background: var(--vx-card) !important; border: 0 !important; box-shadow: var(--vx-shadow); }
html.theme-vuexy .login-mark { background: var(--vx-primary) !important; color: #fff !important; box-shadow: 0 4px 10px 0 rgba(115,103,240,0.4); }

/* ===========================
   NEON PULSE THEME — Full Animations
   =========================== */

/* === KEYFRAMES === */
@keyframes np-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes np-page-enter {
  0% { opacity: 0; transform: translateY(14px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes np-modal-enter {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
html.theme-neon #content,
html.theme-neon .page-heading {
  animation: np-page-enter 0.4s ease-out both;
}
@keyframes np-nav-slide {
  from { width: 0; opacity: 0; }
  to   { width: 3px; opacity: 1; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes ring {
  0% { transform: rotate(0); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(5deg); }
  40% { transform: rotate(-5deg); }
  50% { transform: rotate(2deg); }
  60% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.notifications-dropdown-container {
  position: relative;
  display: flex;
  align-items: center;
}
#notification-bell {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
#notification-bell:hover { background: rgba(255,255,255,0.05); }
.bell-ringing {
  animation: ring 2s ease-in-out infinite;
  transform-origin: top center;
  color: #fbbf24;
}
#notification-bell .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg);
}

.notifications-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 360px;
  max-width: 92vw;
  background: rgba(13, 23, 29, 0.95);
  border: 1px solid var(--line, #233943);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  z-index: 99999;
  overflow: hidden;
}
.notifications-dropdown.show {
  display: flex;
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.notifications-header {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line, #233943);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notifications-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #edf7f5);
}
.notifications-list {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 12px;
  transition: background 0.2s;
  background: rgba(85, 204, 224, 0.04);
  min-width: 0;
  align-items: flex-start;
}
.notification-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.notification-item.read {
  background: transparent;
  opacity: 0.75;
}
.notification-icon {
  color: var(--cyan, #55cce0);
  flex-shrink: 0;
  margin-top: 2px;
}
.notification-item.read .notification-icon {
  color: var(--muted, #8fa6ae);
}
.notification-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.notification-content strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #edf7f5);
}
.notification-content p {
  font-size: 12px;
  color: var(--muted, #8fa6ae);
  margin: 2px 0 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-content small {
  font-size: 10px;
  color: var(--muted, #8fa6ae);
  opacity: 0.7;
  margin-top: 4px;
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes np-badge-enter {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

html.theme-neon {
  --np-bg: #060910;
  --np-panel: #0c1018;
  --np-card: #0e1520;
  --np-border: rgba(0,245,255,0.2);
  --np-text: #c8f0f8;
  --np-muted: #4a7a8a;
  --np-cyan: #00f5ff;
  --np-pink: #f542e0;
  --np-green: #00ff88;
  --np-amber: #ffb800;
  --np-heading: #e8faff;
}

/* Base */
html.theme-neon body {
  color: var(--np-text) !important;
  /* Ambient Cyberpunk Glows (Static for Performance) */
  background: 
    radial-gradient(circle at 15% 15%, rgba(0, 245, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(245, 66, 224, 0.08) 0%, transparent 40%),
    linear-gradient(rgba(0,245,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.02) 1px, transparent 1px),
    var(--np-bg) !important;
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px, 100% 100% !important;
  background-attachment: fixed !important;
}

/* Entrance animation on main content */
html.theme-neon .main > * {
  animation: np-enter 0.4s ease-out both;
}
html.theme-neon .main > *:nth-child(1) { animation-delay: 0.05s; }
html.theme-neon .main > *:nth-child(2) { animation-delay: 0.1s; }
html.theme-neon .main > *:nth-child(3) { animation-delay: 0.15s; }
html.theme-neon .main > *:nth-child(4) { animation-delay: 0.2s; }

/* Sidebar */
html.theme-neon .side {
  background: var(--np-panel) !important;
  border-right: 1px solid var(--np-border) !important;
  box-shadow: 4px 0 30px rgba(0,245,255,0.06) !important;
}
html.theme-neon .brand strong { color: var(--np-cyan); text-shadow: 0 0 10px rgba(0,245,255,0.6); }
html.theme-neon .brand-mark { background: var(--np-cyan) !important; color: #000 !important; box-shadow: 0 0 16px rgba(0,245,255,0.6); }

/* Nav */
html.theme-neon .nav button { background: transparent !important; border: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--np-muted) !important; border-radius: 4px; transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); font-weight: 500 !important; }
html.theme-neon .nav button:hover { background: rgba(0,245,255,0.05) !important; color: var(--np-cyan) !important; transform: translateX(4px); text-shadow: 0 0 8px rgba(0,245,255,0.4) !important; }
html.theme-neon .nav button.active {
  background: linear-gradient(90deg, rgba(0,245,255,0.15) 0%, transparent 100%) !important;
  border-left: 2px solid var(--np-cyan) !important;
  color: var(--np-cyan) !important;
  text-shadow: 0 0 10px rgba(0,245,255,0.8);
  border-radius: 0 4px 4px 0 !important;
}
html.theme-neon .nav button.active::before { display: none !important; }
html.theme-neon .nav .active i { display: none !important; }
html.theme-neon .nav button i { display: none !important; }
html.theme-neon .nav-role { border: none !important; margin-bottom: 4px; }
html.theme-neon .role-switch { background: transparent !important; color: var(--np-cyan) !important; font-size: 11px !important; text-transform: uppercase; font-weight: 700 !important; padding-left: 12px !important; border: none !important; box-shadow: none !important; text-shadow: 0 0 10px rgba(0,245,255,0.4) !important; margin-top: 12px; letter-spacing: 0.1em !important; pointer-events: auto; transform: none !important; }
html.theme-neon .role-switch:hover { background: transparent !important; color: #fff !important; transform: none !important; text-shadow: 0 0 15px rgba(0,245,255,0.8) !important; }

/* Cards — Static Neon Borders (Optimized for Performance) */
html.theme-neon .surface,
html.theme-neon .board,
html.theme-neon .activity,
html.theme-neon .module-card,
html.theme-neon .team-card,
html.theme-neon .signal,
html.theme-neon .login-card,
html.theme-neon .calendar-wrapper,
html.theme-neon .related-task {
  background: var(--np-card) !important;
  border: 1px solid rgba(0,245,255,0.3) !important;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,245,255,0.1), inset 0 0 6px rgba(0,245,255,0.05);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.theme-neon .flow { background: var(--np-card) !important; border: 1px solid rgba(0,245,255,0.3) !important; border-radius: 8px; box-shadow: 0 0 10px rgba(0,245,255,0.1); }

/* Card hover — spring + mega glow */
html.theme-neon .module-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 0 30px rgba(0,245,255,0.3), 0 20px 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,245,255,0.05) !important;
  border-color: var(--np-cyan) !important;
  animation: none !important;
}
html.theme-neon .team-card:hover {
  transform: translateX(6px) !important;
  border-color: var(--np-cyan) !important;
  box-shadow: 0 0 20px rgba(0,245,255,0.25) !important;
  animation: none !important;
}

/* Topbar */
html.theme-neon .topbar {
  background: var(--np-panel) !important;
  border-bottom: 1px solid var(--np-border) !important;
  box-shadow: 0 1px 20px rgba(0,245,255,0.08) !important;
}
html.theme-neon .surface-title { border-bottom: 1px solid var(--np-border) !important; background: transparent !important; }
html.theme-neon th { border-bottom: 1px solid var(--np-border) !important; color: var(--np-cyan) !important; font-size: 10px; letter-spacing: 1px; }
html.theme-neon td { border-bottom: 1px solid rgba(0,245,255,0.05) !important; transition: background 0.2s; }
html.theme-neon tr:hover td { background: rgba(0,245,255,0.04) !important; }

/* Buttons — shimmer on primary */
html.theme-neon button {
  background: rgba(0,245,255,0.06) !important;
  border: 1px solid rgba(0,245,255,0.2) !important;
  color: var(--np-text) !important;
  border-radius: 4px;
  transition: all 0.25s;
  overflow: hidden;
  position: relative;
}
html.theme-neon button:hover {
  background: rgba(0,245,255,0.12) !important;
  border-color: rgba(0,245,255,0.5) !important;
  color: var(--np-cyan) !important;
  box-shadow: 0 0 14px rgba(0,245,255,0.2);
  transform: translateY(-1px);
}
html.theme-neon button.primary {
  background: linear-gradient(90deg, #00b4cc, #00f5ff, #7b2fff, #00f5ff, #00b4cc) !important;
  background-size: 300% auto !important;
  border: none !important;
  color: #000 !important;
  font-weight: 800 !important;
  animation: np-shimmer 3s linear infinite;
  box-shadow: 0 0 20px rgba(0,245,255,0.4), 0 4px 15px rgba(0,0,0,0.3);
}
html.theme-neon button.primary:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 0 40px rgba(0,245,255,0.6), 0 8px 25px rgba(0,0,0,0.4) !important;
  animation-duration: 1.5s;
}
html.theme-neon button.warning {
  background: rgba(255,184,0,0.1) !important;
  border-color: rgba(255,184,0,0.4) !important;
  color: var(--np-amber) !important;
}
html.theme-neon button.warning:hover { background: rgba(255,184,0,0.18) !important; box-shadow: 0 0 16px rgba(255,184,0,0.3); }

/* Badges — animated entrance */
html.theme-neon .badge {
  border-radius: 4px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: np-badge-enter 0.3s ease-out both;
}
html.theme-neon .badge.assigned, html.theme-neon .badge.in_progress, html.theme-neon .badge.developer { background: rgba(0,245,255,0.08); color: var(--np-cyan) !important; border-color: rgba(0,245,255,0.4) !important; box-shadow: 0 0 8px rgba(0,245,255,0.2); }
html.theme-neon .badge.submitted, html.theme-neon .badge.test_assigned, html.theme-neon .badge.testing, html.theme-neon .badge.tester { background: rgba(255,184,0,0.1); color: var(--np-amber) !important; border-color: rgba(255,184,0,0.4) !important; box-shadow: 0 0 8px rgba(255,184,0,0.2); }
html.theme-neon .badge.tested, html.theme-neon .badge.approved { background: rgba(0,255,136,0.08); color: var(--np-green) !important; border-color: rgba(0,255,136,0.4) !important; box-shadow: 0 0 8px rgba(0,255,136,0.2); }
html.theme-neon .badge.revision_requested { background: rgba(245,66,224,0.08); color: var(--np-pink) !important; border-color: rgba(245,66,224,0.4) !important; box-shadow: 0 0 8px rgba(245,66,224,0.2); }
html.theme-neon .badge.build_failed { background: rgba(255,50,75,0.12); color: #ff4d6d !important; border-color: rgba(255,50,75,0.5) !important; box-shadow: 0 0 10px rgba(255,50,75,0.3); }
html.theme-neon .badge.build_queued { background: rgba(255,184,0,0.12) !important; color: var(--np-amber) !important; border-color: rgba(255,184,0,0.5) !important; box-shadow: 0 0 8px rgba(255,184,0,0.25); }
html.theme-neon .badge.building_preflight { background: rgba(0,245,255,0.12) !important; color: var(--np-cyan) !important; border-color: rgba(0,245,255,0.5) !important; box-shadow: 0 0 10px rgba(0,245,255,0.3); }
html.theme-neon .badge.building_release { background: rgba(168,85,247,0.15) !important; color: #c084fc !important; border-color: rgba(168,85,247,0.5) !important; box-shadow: 0 0 10px rgba(168,85,247,0.3); }

/* Kanban */
html.theme-neon .kanban button { background: rgba(0,245,255,0.03) !important; border-color: rgba(0,245,255,0.12) !important; border-radius: 6px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.theme-neon .kanban button:hover, html.theme-neon .kanban button.selected { background: rgba(0,245,255,0.08) !important; border-color: var(--np-cyan) !important; transform: translateY(-4px) scale(1.02); box-shadow: 0 0 20px rgba(0,245,255,0.2), 0 8px 20px rgba(0,0,0,0.3); }
html.theme-neon .kanban span { color: var(--np-cyan) !important; }
html.theme-neon .kanban strong { color: var(--np-heading) !important; }
html.theme-neon .flow-steps button { background: rgba(0,245,255,0.03) !important; border-color: rgba(0,245,255,0.12) !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.theme-neon .flow-steps button:hover { background: rgba(0,245,255,0.1) !important; border-color: var(--np-cyan) !important; transform: translateY(-3px); box-shadow: 0 0 16px rgba(0,245,255,0.2); }
html.theme-neon .flow-steps span { color: var(--np-cyan) !important; }
html.theme-neon .kanban em { color: var(--np-cyan) !important; }

/* Typography */
html.theme-neon h1, html.theme-neon h2 { color: var(--np-heading) !important; letter-spacing: -0.5px; }
html.theme-neon h3 { color: var(--np-cyan) !important; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
html.theme-neon .eyebrow { color: var(--np-cyan) !important; }

/* Inputs */
html.theme-neon input, html.theme-neon textarea, html.theme-neon select { background: rgba(0,245,255,0.03) !important; border: 1px solid rgba(0,245,255,0.15) !important; color: var(--np-text) !important; border-radius: 4px; transition: all 0.2s; }
html.theme-neon input:focus, html.theme-neon textarea:focus { border-color: var(--np-cyan) !important; box-shadow: 0 0 0 3px rgba(0,245,255,0.12), 0 0 20px rgba(0,245,255,0.1) !important; outline: none; }

/* Modal */
html.theme-neon .modal { background: #080e18 !important; border: 1px solid rgba(0,245,255,0.3) !important; border-radius: 10px; box-shadow: 0 0 60px rgba(0,245,255,0.15), 0 30px 80px rgba(0,0,0,0.6) !important; animation: np-enter 0.3s ease-out both; overflow-y: auto !important; max-height: calc(100vh - 100px) !important; }

/* Signals */
html.theme-neon .signal { border-top: 2px solid var(--np-cyan) !important; }
html.theme-neon .signal.green { border-top-color: var(--np-green) !important; }
html.theme-neon .signal.amber { border-top-color: var(--np-amber) !important; }
html.theme-neon .signal.violet { border-top-color: var(--np-pink) !important; }
html.theme-neon .signal strong { color: var(--np-heading) !important; }
html.theme-neon .signal span { color: var(--np-muted) !important; }

/* Note */
html.theme-neon .note { background: rgba(0,245,255,0.05) !important; border: 1px solid rgba(0,245,255,0.2) !important; color: var(--np-text) !important; }
html.theme-neon .activity-row > i { background: var(--np-cyan) !important; box-shadow: 0 0 0 3px rgba(0,245,255,0.15), 0 0 12px var(--np-cyan); }
html.theme-neon .review-note { background: rgba(255,184,0,0.05) !important; border-left-color: var(--np-amber) !important; }

/* User avatar */
html.theme-neon .user-chip > span, html.theme-neon .team-card > span { background: rgba(0,245,255,0.1) !important; border-color: rgba(0,245,255,0.3) !important; color: var(--np-cyan) !important; box-shadow: 0 0 10px rgba(0,245,255,0.2); }

/* Side footer & nav badge */
html.theme-neon .side-footer { border-top-color: rgba(0,245,255,0.1) !important; }
html.theme-neon .nav b { background: rgba(245,66,224,0.15); color: var(--np-pink); box-shadow: 0 0 8px rgba(245,66,224,0.3); }

/* Login */
html.theme-neon .login { background: var(--np-bg) !important; }
html.theme-neon .login-mark { background: var(--np-cyan) !important; color: #000 !important; box-shadow: 0 0 20px rgba(0,245,255,0.5); }


.role-switch {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Modern Calendar Styles */
.cal-now-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  z-index: 100;
  pointer-events: none;
}
.cal-now-indicator::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(239, 68, 68);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

.cal-interactive-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  border-right: 1px dashed rgba(255,255,255,0.05);
  transition: background 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-interactive-slot:hover {
  background: rgba(80, 212, 153, 0.15);
}
.cal-interactive-slot span {
  opacity: 0;
  font-size: 10px;
  color: #50d499;
  font-weight: 600;
  transform: translateY(5px);
  transition: all 0.2s ease;
  pointer-events: none;
}
.cal-interactive-slot:hover span {
  opacity: 1;
  transform: translateY(0);
}

.calendar-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.calendar-header {
  border-bottom: 1px solid var(--border-color);
  background: rgba(0,0,0,0.2);
}
.cal-row {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.2s ease;
}
.cal-row:hover {
  background: rgba(255,255,255,0.01);
}
.cal-timeline {
  background-image: repeating-linear-gradient(to right, transparent, transparent calc(100%/24 - 1px), rgba(255,255,255,0.03) calc(100%/24 - 1px), rgba(255,255,255,0.03) calc(100%/24));
}

/* Custom Scrollbar for Calendar */
.custom-scrollbar::-webkit-scrollbar {
  display: none; /* Hide scrollbar entirely */
}
.custom-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Mobile Responsiveness for Calendar */
@media (max-width: 768px) {
  .cal-tester-col, .cal-tester {
    width: 140px !important;
    padding: 8px !important;
    font-size: 11px !important;
  }
  .cal-tester .avatar {
    display: none !important;
  }
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) scale(0.8);
  background: rgba(13, 23, 29, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(80, 212, 153, 0.6);
  color: #fff;
  padding: 24px 48px;
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 60px rgba(80, 212, 153, 0.25);
  z-index: 999999;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.toast-error {
  border-color: rgba(255, 156, 162, 0.8);
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 60px rgba(255, 156, 162, 0.25);
}

.toast.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* ===========================
   ECHOVISION THEME — Premium Glass & Flow
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html.theme-echovision {
  --ev-bg: #030712;
  --ev-panel: rgba(15, 23, 42, 0.75);
  --ev-panel-border: rgba(255, 255, 255, 0.08);
  --ev-card: rgba(17, 24, 39, 0.7);
  --ev-card-hover: rgba(30, 41, 59, 0.85);
  --ev-text: #f8fafc;
  --ev-muted: #94a3b8;
  --ev-line: rgba(255, 255, 255, 0.07);
  --ev-cyan: #06b6d4;
  --ev-emerald: #10b981;
  --ev-amber: #f59e0b;
  --ev-rose: #f43f5e;
  --ev-blue: #3b82f6;
  --ev-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --ev-glow-cyan: 0 0 25px rgba(6, 182, 212, 0.25);
  --ev-glow-emerald: 0 0 25px rgba(16, 185, 129, 0.25);
}

html.theme-echovision body {
  background: 
    radial-gradient(circle at 15% 15%, rgba(6, 182, 212, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(16, 185, 129, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
    var(--ev-bg) !important;
  background-attachment: fixed !important;
  color: var(--ev-text) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Android Emoji", sans-serif !important;
  letter-spacing: -0.01em;
}

/* Layout Grid & Viewport Containment */
@media (min-width: 761px) {
  html, body {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .shell, html.theme-echovision .shell {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .side, html.theme-echovision .side {
    background: rgba(11, 17, 29, 0.85) !important;
    border: 1px solid var(--ev-panel-border, rgba(255,255,255,0.08)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    margin: 16px 0 16px 16px !important;
    height: calc(100vh - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    padding: 22px 14px !important;
    z-index: 100;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-shrink: 0 !important;
  }

  .main, html.theme-echovision .main {
    padding: 0 32px 0 24px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .topbar, html.theme-echovision .topbar {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 64px !important;
    padding: 0 28px !important;
    background: rgba(11, 17, 29, 0.85) !important;
    border: 1px solid var(--ev-panel-border, rgba(255, 255, 255, 0.08)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 90 !important;
  }

  .main-scroll-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 16px !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  #content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .dashboard-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .dashboard-wrapper .signals {
    flex-shrink: 0 !important;
  }

  .dashboard-wrapper .flow {
    flex-shrink: 0 !important;
  }

  .dashboard-wrapper .content-grid {
    flex: 1 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .dashboard-wrapper .dash-activity-card {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .dashboard-wrapper .dash-activity-card .activity-rows-list {
    overflow-y: hidden !important;
  }

  .dashboard-wrapper .dash-table-wrap {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .dashboard-wrapper .dash-table-wrap .surface {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .dashboard-wrapper .dash-table-wrap .table-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Compact Dashboard layout for Low-Height Screens & Laptops */
@media (min-width: 761px) and (max-height: 950px) {
  .page-heading {
    padding: 10px 0 14px !important;
  }
  .page-heading h1 {
    font-size: 18px !important;
    margin: 2px 0 0 !important;
  }
  .signals {
    gap: 10px !important;
  }
  .signal {
    padding: 12px 14px !important;
  }
  .signal strong {
    font-size: 24px !important;
    margin: 4px 0 2px !important;
  }
  .flow {
    display: grid !important;
    margin: 10px 0 !important;
    padding: 12px 16px !important;
  }
  .flow h2 {
    font-size: 15px !important;
    margin: 2px 0 !important;
  }
  .flow-steps button, .kanban button {
    min-height: 56px !important;
    padding: 6px 10px !important;
  }
  .surface-title {
    padding: 10px 14px !important;
  }
  td, th {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .activity {
    padding: 12px !important;
  }
  .activity-row {
    padding: 6px 0 !important;
  }
}

/* Brand Logo area */
html.theme-echovision .brand {
  padding: 8px 12px 24px !important;
  border-bottom: 1px solid var(--ev-line);
  margin-bottom: 16px;
}
html.theme-echovision .brand span {
  color: var(--ev-cyan) !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 11px;
  text-transform: uppercase;
}

/* Navigation items */
html.theme-echovision .nav {
  gap: 6px !important;
}

html.theme-echovision .nav button {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--ev-muted) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.theme-echovision .nav button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--ev-text) !important;
  transform: translateX(4px) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

html.theme-echovision .nav button.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.15) !important;
}

html.theme-echovision .nav button.active::before { display: none !important; }
html.theme-echovision .nav .active i { display: none !important; }
html.theme-echovision .nav button i { display: none !important; }

/* Accordion Role Headers */
html.theme-echovision .nav-role {
  border: none !important;
  margin-bottom: 6px !important;
}

html.theme-echovision .role-switch {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #34d399 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.theme-echovision .role-switch:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important;
  color: #ffffff !important;
}

/* Side Footer User Avatar & Actions */
html.theme-echovision .side-footer {
  border-top: 1px solid var(--ev-line) !important;
  padding-top: 16px !important;
}

html.theme-echovision .user-chip > span {
  background: linear-gradient(135deg, #06b6d4, #10b981) !important;
  border: none !important;
  color: #030712 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.4) !important;
}

html.theme-echovision .side-actions button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ev-line) !important;
  color: var(--ev-muted) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

html.theme-echovision .side-actions button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--ev-text) !important;
}

/* Topbar Header Floating Glass Capsule Symmetrical with Left Oval Menu */
html.theme-echovision .topbar {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: 64px !important;
  padding: 0 28px !important;
  background: rgba(11, 17, 29, 0.85) !important;
  border: 1px solid var(--ev-panel-border, rgba(255, 255, 255, 0.08)) !important;
  border-bottom: 1px solid var(--ev-panel-border, rgba(255, 255, 255, 0.08)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html.theme-echovision .crumb span {
  color: var(--ev-cyan) !important;
  font-weight: 700 !important;
}

html.theme-echovision select#company-filter {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 8px !important;
  color: var(--ev-text) !important;
  padding: 6px 12px !important;
}

/* Buttons System */
html.theme-echovision button.primary {
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%) !important;
  border: none !important;
  color: #030712 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.theme-echovision button.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5) !important;
  filter: brightness(1.1) !important;
}

html.theme-echovision button.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #030712 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3) !important;
  transition: all 0.35s ease !important;
}

html.theme-echovision button.warning:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.45) !important;
}

/* Cards, Modules & Kanban Steps (Solid background for maximum performance) */
html.theme-echovision .surface,
html.theme-echovision .board,
html.theme-echovision .activity,
html.theme-echovision .module-card,
html.theme-echovision .team-card,
html.theme-echovision .signal,
html.theme-echovision .login-card,
html.theme-echovision .calendar-wrapper,
html.theme-echovision .related-task,
html.theme-echovision .flow {
  background: #0b1322 !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Signal / Metric Cards */
html.theme-echovision .signal {
  padding: 22px !important;
  position: relative;
  overflow: hidden;
}

html.theme-echovision .signal::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-cyan), var(--ev-emerald));
}

html.theme-echovision .signal strong {
  font-size: 36px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Module & Team Hover Effects */
html.theme-echovision .module-card:hover,
html.theme-echovision .team-card:hover,
html.theme-echovision .related-task:hover,
html.theme-echovision .kanban button:hover,
html.theme-echovision .flow-steps button:hover {
  background: var(--ev-card-hover) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  transform: translateY(-3px) scale(1.005) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(6, 182, 212, 0.15) !important;
}

/* Kanban & Step Buttons */
html.theme-echovision .flow-steps button,
html.theme-echovision .kanban button {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 12px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.theme-echovision .flow-steps button:hover span,
html.theme-echovision .kanban button:hover span {
  color: #38bdf8 !important;
}

/* Tables */
html.theme-echovision th {
  border-bottom: 1px solid var(--ev-line) !important;
  color: var(--ev-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html.theme-echovision td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

html.theme-echovision tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Badges */
html.theme-echovision .badge.assigned, 
html.theme-echovision .badge.in_progress, 
html.theme-echovision .badge.developer { 
  color: #38bdf8 !important; 
  border-color: rgba(56, 189, 248, 0.3) !important; 
  background: rgba(56, 189, 248, 0.1) !important; 
}

html.theme-echovision .badge.submitted, 
html.theme-echovision .badge.test_assigned, 
html.theme-echovision .badge.testing, 
html.theme-echovision .badge.tester { 
  color: #fbbf24 !important; 
  border-color: rgba(251, 191, 36, 0.3) !important; 
  background: rgba(251, 191, 36, 0.1) !important; 
}

html.theme-echovision .badge.tested, 
html.theme-echovision .badge.approved { 
  color: #34d399 !important; 
  border-color: rgba(52, 211, 153, 0.3) !important; 
  background: rgba(52, 211, 153, 0.1) !important; 
}

html.theme-echovision .badge.revision_requested {
  color: #fb7185 !important;
  border-color: rgba(251, 113, 133, 0.35) !important;
  background: rgba(251, 113, 133, 0.1) !important;
}

html.theme-echovision .badge.build_failed {
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
}

html.theme-echovision .badge.build_queued {
  color: #f59e0b !important;
  border: 1px dashed rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.12) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}

html.theme-echovision .badge.building_preflight {
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  background: rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}

html.theme-echovision .badge.building_release {
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  background: rgba(192, 132, 252, 0.15) !important;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.15);
}

/* Page & Modal Entrance Animations (Hardware-accelerated, blur-free for performance) */
@keyframes ev-page-enter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ev-modal-open {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ev-backdrop-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

html.theme-echovision #content,
html.theme-echovision .page-heading,
html.theme-echovision .signals {
  animation: ev-page-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Modal / Dialog Styling in EchoVision Theme - Optimized GPU Performance */
html.theme-echovision .modal {
  background: #0b1322 !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  color: var(--ev-text) !important;
  animation: ev-modal-open 0.2s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  will-change: transform, opacity;
  contain: layout paint;
}

/* Keep task actions reachable when a dialog opens in a short viewport.
   Applies to ALL themes — each theme may further override visual style
   but these scroll/height rules always win. */
.modal[open], dialog.modal[open] {
  margin: 15px auto 85px auto !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  z-index: 99999 !important;
}

dialog.modal::backdrop, .modal::backdrop {
  z-index: 99998 !important;
}

dialog:not([open]) {
  display: none !important;
}

dialog.confirm-dialog, dialog.success-dialog {
  max-width: 500px !important;
  width: 92vw !important;
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

dialog.confirm-dialog.danger-dialog {
  border-color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 40px rgba(239, 68, 68, 0.2) !important;
}

dialog.success-dialog {
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 40px rgba(16, 185, 129, 0.2) !important;
}

#modern-prompt-input:focus {
  border-color: var(--cyan, #06b6d4) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25) !important;
}

dialog[open].modal:has(.subtask-modal-form),
dialog[open].modal:has(.module-form-modal),
dialog[open].modal:has(#qa-matrix-form),
dialog[open].modal:has(#release-modal-form),
dialog[open]#settings-modal,
dialog[open].modal:has(.taskdetail) {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  height: calc(100vh - 100px) !important;
  max-height: calc(100vh - 100px) !important;
  margin: 15px auto 85px auto !important;
}

dialog[open]#submodal:not(:has(.subtask-modal-form)):not(:has(.module-form-modal)):not(:has(#release-modal-form)):not(:has(#qa-matrix-form)) {
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
}

dialog[open].modal:has(#qa-matrix-form) {
  width: min(1200px, 95vw) !important;
  max-width: 95vw !important;
}

dialog[open].modal:has(#release-modal-form) {
  width: min(1060px, 95vw) !important;
  max-width: 95vw !important;
}

.modal form.subtask-modal-form,
.modal form.module-form-modal,
.modal form#qa-matrix-form,
.modal form#release-modal-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: calc(100vh - 100px) !important;
  overflow: hidden !important;
}

.modal form.subtask-modal-form > header,
.modal form#release-modal-form > header {
  flex-shrink: 0 !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.modal form.subtask-modal-form > .subtask-modal-body,
.modal form#release-modal-form > .release-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.modal form.subtask-modal-form > footer,
.modal form#release-modal-form > footer {
  flex-shrink: 0 !important;
  padding: 14px 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0f172a !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
}

.modal form#qa-matrix-form > header {
  flex-shrink: 0 !important;
  padding: 20px 24px 16px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal form#qa-matrix-form > .qa-matrix-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
}

.modal form.module-form-modal > footer,
.modal form#qa-matrix-form > footer {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  background: #0f172a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 16px 24px !important;
}

/* Custom Slim Scrollbars */
html.theme-echovision ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html.theme-echovision ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
}
html.theme-echovision ::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.3);
  border-radius: 10px;
}
html.theme-echovision ::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.7);
}

html.theme-echovision .modal::backdrop {
  background: rgba(3, 7, 18, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  animation: ev-backdrop-enter 0.2s ease both !important;
}

/* Secondary modals stacked on top of mainModal don't need redundant blur passes */
html.theme-echovision #submodal::backdrop,
#submodal::backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}

/* Form Controls & Inputs inside Modal - Solid background for instant typing without re-compositing */
html.theme-echovision .modal input,
html.theme-echovision .modal select,
html.theme-echovision .modal textarea,
html.theme-echovision .detailgrid article,
html.theme-echovision .evidence article {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--ev-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  contain: paint;
}

html.theme-echovision .modal input:focus,
html.theme-echovision .modal select:focus,
html.theme-echovision .modal textarea:focus {
  border-color: rgba(6, 182, 212, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25) !important;
  outline: none !important;
}

html.theme-echovision .modal header {
  border-bottom: 1px solid var(--ev-line);
  padding-bottom: 16px;
}

/* Compact manager filter, with a viewport-safe menu on smaller screens. */
.task-status-filter { position: relative; z-index: 20; width: auto; display: inline-flex; }
.task-status-filter summary { box-sizing: border-box; list-style: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; }
.task-status-filter summary::-webkit-details-marker { display: none; }
.task-status-filter.task-scope-toggle { background: #0f1922; border: 1px solid #233943; border-radius: 8px; padding: 3px; }
.task-status-filter.task-scope-toggle summary { background: transparent; border: none; border-radius: 6px; padding: 6px 12px; transition: all 0.2s ease; }
.task-status-filter.task-scope-toggle summary:hover { background: rgba(255, 255, 255, 0.05); color: #edf7f5; }
.task-status-filter.task-scope-toggle[open] summary { border: none; }
.task-status-filter.task-scope-toggle .task-status-filter-menu { box-sizing: border-box; position: absolute; right: 0; top: calc(100% + 4px); min-width: 210px; width: max-content; padding: 6px; background: #0d171d; border: 1px solid #233943; border-radius: 8px; box-shadow: 0 16px 34px rgba(0,0,0,0.7); z-index: 30; }
.task-status-filter-menu button { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--text); font-size: 12px; text-align: left; }
.task-status-filter-menu button:hover, .task-status-filter-menu button.selected { background: #143029; color: #aef0cf; }
.task-status-filter-menu b { padding: 2px 7px; color: var(--cyan); background: #122b35; border-radius: 99px; font: 700 10px ui-monospace, monospace; }
@media (max-width: 760px) { .list-toolbar { align-items: flex-start; flex-direction: column; } .task-status-filter, .task-status-filter summary { width: 100%; } .task-status-filter-menu { left: 0; right: auto; width: 100%; } }

.task-scope-toggle {
  display: inline-flex;
  align-items: center;
  background: #0f1922;
  border: 1px solid #233943;
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}
.task-scope-toggle .scope-btn {
  padding: 6px 14px;
  border: 1px solid transparent !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: transparent !important;
  color: #8fa6ae !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: none !important;
}
.task-scope-toggle .scope-btn:hover {
  color: #edf7f5 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: transparent !important;
}
.task-scope-toggle .scope-btn.active {
  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.4) !important;
}
.task-scope-toggle .scope-btn.active svg {
  stroke: #ffffff !important;
}
html.theme-neon .task-scope-toggle .scope-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #8fa6ae !important;
  box-shadow: none !important;
}
html.theme-neon .task-scope-toggle .scope-btn:hover {
  color: #edf7f5 !important;
  background: rgba(0, 245, 255, 0.08) !important;
}
html.theme-neon .task-scope-toggle .scope-btn.active {
  background: linear-gradient(135deg, #00b4cc, #00f5ff) !important;
  border: 1px solid #00f5ff !important;
  color: #041017 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(0, 245, 255, 0.55) !important;
}
html.theme-neon .task-scope-toggle .scope-btn.active svg {
  stroke: #041017 !important;
}
html.theme-echovision .task-scope-toggle .scope-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #8fa6ae !important;
  box-shadow: none !important;
}
html.theme-echovision .task-scope-toggle .scope-btn:hover {
  color: #edf7f5 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html.theme-echovision .task-scope-toggle .scope-btn.active {
  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
  border: 1px solid rgba(56, 189, 248, 0.7) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 12px rgba(6, 182, 212, 0.45) !important;
}
html.theme-echovision .task-scope-toggle .scope-btn.active svg {
  stroke: #ffffff !important;
}
html.theme-vuexy .task-scope-toggle .scope-btn.active {
  background: linear-gradient(72.47deg, #7367f0 22.16%, rgba(115, 103, 240, 0.7) 76.47%) !important;
  border: 1px solid #7367f0 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(115, 103, 240, 0.4) !important;
}
html.theme-vuexy .task-scope-toggle .scope-btn.active svg {
  stroke: #ffffff !important;
}
.task-scope-toggle .scope-btn svg {
  display: inline-block;
  vertical-align: -2px;
}

html.theme-echovision .task-tabs button {
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

html.theme-echovision .task-tabs button.active {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2) !important;
}



/* Premium Top Actions Area styling */
.top-actions {
    gap: 12px;
}
.top-actions span {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.02) !important;
    backdrop-filter: blur(8px) !important;
}
.top-actions span.network {
    color: var(--green) !important;
    background: rgba(80, 212, 153, 0.08) !important;
    border-color: rgba(80, 212, 153, 0.25) !important;
    text-shadow: 0 0 10px rgba(80, 212, 153, 0.2) !important;
}
.top-actions span.network i {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--green) !important;
    box-shadow: 0 0 8px var(--green), 0 0 12px var(--green) !important;
    margin: 0 !important;
}
.top-actions select#company-filter {
    appearance: none !important;
    background: rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fa6ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 6px 32px 6px 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.02) !important;
    backdrop-filter: blur(8px) !important;
}
.top-actions select#company-filter:hover {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    transform: translateY(-1px);
}
.top-actions select#company-filter:focus {
    outline: none !important;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 2px rgba(85,204,224,0.2) !important;
}
.top-actions select#company-filter option {
    background: #0f172a !important;
    color: #f8fafc !important;
    font-weight: 500 !important;
}

select option {
    background: #0f172a !important;
    color: #f8fafc !important;
}

select optgroup {
    background-color: #172433 !important;
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-style: normal !important;
    padding: 6px 10px !important;
}

select optgroup option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    font-weight: normal !important;
}

select option:disabled,
select option.select-section-header {
    background-color: #172433 !important;
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.5px !important;
    opacity: 1 !important;
    cursor: default !important;
    padding: 6px 10px !important;
}
#settings-modal {
    width: min(1100px, 92vw) !important;
    max-width: 92vw !important;
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    margin: 15px auto 85px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.15) !important;
}

#settings-modal form {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Quick Note Drawer */
.drawer {
  position: fixed;
  top: 0;
  right: -360px;
  width: 340px;
  height: 100vh;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255,255,255,0.1);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  z-index: 9999;
  transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  display: flex;
  flex-direction: column;
}
html.theme-light .drawer {
  background: rgba(255,255,255,0.85);
  border-left: 1px solid rgba(0,0,0,0.1);
  box-shadow: -10px 0 30px rgba(0,0,0,0.05);
}
.drawer.open { right: 0; }
.drawer-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html.theme-light .drawer-header { border-bottom: 1px solid rgba(0,0,0,0.05); }
.drawer-header h3 { margin: 0; font-size: 16px; color: #fff; }
html.theme-light .drawer-header h3 { color: #0f172a; }
#close-drawer {
  background: transparent !important;
  border: 0 !important;
  color: #94a3b8 !important;
  font-size: 24px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.drawer-body { padding: 20px; flex: 1; overflow-y: auto; }
html.theme-light .drawer-body { color: #333; }

/* Notes Masonry Grid */
.notes-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}
.notes-masonry .note-card {
  resize: vertical;
}
.note-card {
  border-radius: 12px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  color: #1e293b;
  display: flex;
  flex-direction: column;
}
.note-card:not([style*="height"]) {
  max-height: 400px;
}
.note-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.note-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}
.note-card p { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; outline: none; }
.note-card [contenteditable="true"]:focus {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}
html[data-theme="dark"] .note-card [contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}
.note-card small { color: rgba(0,0,0,0.5); font-size: 11px; font-weight: 600; text-align: right; }
.note-header {
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
html[data-theme="light"] .note-header {
  background: rgba(0, 0, 0, 0.1);
  color: #000;
}
.note-title-text {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}
.note-actions {
  display: flex;
  gap: 4px;
}
.note-card:hover .note-actions { opacity: 1; }
.note-actions button {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 0 !important;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  color: #fff !important;
  opacity: 1;
  transition: background 0.2s, transform 0.2s;
}
.note-actions button:hover {
  background: rgba(0, 0, 0, 0.4) !important;
  transform: scale(1.1);
}
html[data-theme="light"] .note-actions button {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #000 !important;
}
html[data-theme="light"] .note-actions button:hover {
  background: rgba(255, 255, 255, 0.8) !important;
}

/* Freeform Notes Mode */
.notes-freeform {
  position: relative;
  min-height: calc(100vh - 150px);
  width: 100%;
}
.notes-freeform .note-card {
  position: absolute;
  width: 280px;
  z-index: 10;
  resize: both;
  overflow: hidden;
}
.note-card::-webkit-resizer {
  background-color: transparent;
  background-image: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 60%, transparent 60%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1) 85%, transparent 85%);
  width: 24px;
  height: 24px;
}
.notes-freeform .note-header {
  cursor: grab;
}
.notes-freeform .note-header:active {
  cursor: grabbing;
}
.notes-freeform .note-card.dragging {
  opacity: 0.9;
  z-index: 100 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}
.note-view-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.note-view-toggle button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.note-view-toggle button:hover {
  background: rgba(255, 255, 255, 0.2);
}
html[data-theme="light"] .note-view-toggle button {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #000;
}
html[data-theme="light"] .note-view-toggle button:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Note Colors */
.note-c-yellow { background: linear-gradient(135deg, #fef08a, #fde047); }
.note-c-blue { background: linear-gradient(135deg, #bfdbfe, #93c5fd); }
.note-c-green { background: linear-gradient(135deg, #bbf7d0, #86efac); }
.note-c-pink { background: linear-gradient(135deg, #fbcfe8, #f9a8d4); }


/* Color Picker Buttons Override for Themes */
button.color-btn {
  border: 2px solid transparent !important;
  transform: scale(1);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
button.color-btn.active {
  transform: scale(1.15);
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
  z-index: 2;
}
html[data-theme="light"] button.color-btn.active {
  border-color: #000 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) !important;
}
button.color-btn[data-c="yellow"] { background: #fef08a !important; }
button.color-btn[data-c="blue"] { background: #bfdbfe !important; }
button.color-btn[data-c="green"] { background: #bbf7d0 !important; }
button.color-btn[data-c="pink"] { background: #fbcfe8 !important; }
/* Draggable FAB */
.fab-draggable {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: grab;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
}
html[data-theme="light"] .fab-draggable {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  color: #000;
}
.fab-draggable:active {
  cursor: grabbing;
}
.fab-draggable:hover, .fab-draggable.dragging {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}
html[data-theme="light"] .fab-draggable:hover, html[data-theme="light"] .fab-draggable.dragging {
   background: rgba(255, 255, 255, 0.95);
   border-color: rgba(0, 0, 0, 0.2);
}
.fab-icon {
  font-size: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fab-draggable.snapping {
  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s, background 0.3s;
}

@media (max-width: 1000px) {
  .notifications-dropdown {
  right: 0;
  left: auto;
    right: auto;
    left: 0;
  }
}
@media (max-width: 760px) {
  .notifications-dropdown {
  right: 0;
  left: auto;
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    right: auto;
  }
}

.responsibility-summary {
  display: grid;
  gap: 4px;
}

.responsibility-summary small {
  margin: 0;
  color: #d6a75a;
  font: 700 10px ui-monospace, monospace;
  letter-spacing: 0.2px;
}

.reassignment-review {
  display: grid;
  gap: 18px;
  padding: 24px;
}
.reassignment-review > header { align-items: flex-start; }
.reassignment-review h2 { margin: 5px 0 4px; }
.reassignment-review header p { margin: 0; color: var(--muted); font-size: 13px; }
.reassignment-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.07);
  color: #b7d6df;
  font-size: 12px;
}
.reassignment-summary strong { color: #66d9ee; }
.reassignment-request-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.reassignment-request-card {
  display: grid;
  gap: 15px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(17, 25, 40, 0.78);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.reassignment-request-card:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 182, 212, 0.55);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.reassignment-request-head, .reassignment-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reassignment-role, .reassignment-status {
  padding: 4px 8px;
  border-radius: 99px;
  font: 700 10px ui-monospace, monospace;
  letter-spacing: .3px;
}
.reassignment-role { color: #76dff0; border: 1px solid rgba(6, 182, 212, 0.45); background: rgba(6, 182, 212, 0.1); }
.tester-request .reassignment-role { color: #e6a7fb; border-color: rgba(194, 124, 232, 0.5); background: rgba(194, 124, 232, 0.1); }
.reassignment-status { color: #e5bd70; background: rgba(231, 178, 90, 0.1); }
.reassignment-person { justify-content: flex-start; }
.reassignment-person > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #17313e; border: 1px solid rgba(6, 182, 212, 0.4); color: #8ee9f5; font-size: 11px; font-weight: 800; }
.tester-request .reassignment-person > span { background: #2d1c39; border-color: rgba(194, 124, 232, 0.45); color: #e8b6fa; }
.reassignment-person small, .reassignment-person strong { display: block; }
.reassignment-person small, .reassignment-request-card dt { color: var(--muted); font-size: 10px; }
.reassignment-person strong { margin-top: 2px; font-size: 13px; }
.reassignment-request-card dl { display: grid; gap: 10px; margin: 0; }
.reassignment-request-card dl > div { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.reassignment-request-card dt { margin-bottom: 4px; font: 700 10px ui-monospace, monospace; }
.reassignment-request-card dd { margin: 0; color: #d7e5e8; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.reassignment-reason dd { color: #aabfc5; }
.reassignment-open { width: 100%; margin-top: auto; }
@media (max-width: 600px) {
  .reassignment-review { padding: 18px; }
  .reassignment-review > header { align-items: flex-start; }
  .reassignment-summary { align-items: flex-start; flex-direction: column; }
  .reassignment-request-list { grid-template-columns: 1fr; }
}
/* Read-only parent-task context for assignees of subtasks. */
.parent-task-context{display:grid;gap:14px;padding:16px;border:1px solid #2e606e;border-left:3px solid var(--cyan);border-radius:7px;background:linear-gradient(120deg,rgba(22,58,68,.55),rgba(12,24,30,.9));box-shadow:inset 0 1px 0 rgba(135,231,241,.08)}
.parent-task-context>header{display:flex;justify-content:space-between;gap:16px;align-items:start}.parent-task-context h3{margin:5px 0 4px;font-size:16px}.parent-task-context p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.parent-task-open{white-space:nowrap;background:#12313a;border-color:#39788a;color:#b7f0f5}.parent-context-meta{display:grid;gap:10px;padding:10px 0;border-top:1px solid rgba(91,175,190,.22);border-bottom:1px solid rgba(91,175,190,.22)}.parent-context-meta div,.parent-context-status{display:grid;gap:4px;min-width:0}.parent-context-current-status{padding-bottom:10px;border-bottom:1px solid rgba(91,175,190,.16)}.parent-context-current-status>div{display:block;min-width:0}.parent-context-current-status .badge{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.35}.parent-context-current-status .badge+span{display:inline-flex;max-width:100%;margin:5px 0 0!important;white-space:normal!important;overflow-wrap:anywhere;vertical-align:top}.parent-context-owners{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.parent-context-meta span,.parent-context-grid>div>span,.parent-context-status span,.parent-context-notes>span,.parent-context-siblings>span{color:#8ecbd5;font:700 10px ui-monospace,monospace;letter-spacing:.65px;text-transform:uppercase}.parent-context-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.parent-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.parent-context-grid>div{padding:11px;background:rgba(4,16,21,.55);border:1px solid rgba(70,124,138,.4);border-radius:5px}.parent-context-grid p{margin-top:7px;color:#d1e0e2;white-space:pre-wrap}.parent-context-statuses{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.parent-context-status{padding:11px;background:rgba(4,16,21,.45);border-radius:5px}.parent-context-status strong{font-size:12px}.parent-context-status strong.positive{color:var(--green)}.parent-context-status strong.attention{color:var(--amber)}.parent-context-status small{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:11px;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}.parent-context-notes,.parent-context-siblings{display:grid;gap:7px}.parent-context-notes article{padding:9px 11px;background:rgba(5,18,23,.55);border-left:2px solid #477d8b;border-radius:4px}.parent-context-notes article strong{color:#b7eef3;font-size:11px}.parent-context-notes article p{margin:5px 0;color:#c8d8db;white-space:pre-wrap}.parent-context-notes article small{color:var(--muted);font-size:10px}.parent-context-siblings{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:start}.parent-context-siblings>span{grid-column:1/-1}.parent-context-siblings button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px;text-align:left;background:rgba(7,24,30,.7);border-color:#315c68}.parent-context-siblings button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
@media(max-width:760px){.parent-task-context>header{display:grid}.parent-task-open{width:100%}.parent-context-meta,.parent-context-grid,.parent-context-owners{grid-template-columns:1fr}.parent-context-siblings{grid-template-columns:1fr}}
.subtask-queue-summary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  min-width: 320px;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 12px;
  text-align: left;
  border-radius: 7px;
  background: rgba(14, 30, 38, 0.88);
  border: 1px solid rgba(6, 182, 212, 0.28);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 11.5px;
  transition: all 0.18s ease;
  cursor: pointer;
}
.subtask-queue-summary:hover {
  transform: translateY(-1px);
}
.subtask-queue-summary .subtask-bar-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  font: 700 10.5px ui-monospace, monospace;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.subtask-queue-summary .subtask-bar-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.subtask-queue-summary .subtask-bar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.subtask-queue-summary .subtask-bar-state {
  color: #e2e8f0;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subtask-queue-summary.has-open-subtasks {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(35, 26, 12, 0.85) 0%, rgba(20, 32, 38, 0.85) 100%);
}
.subtask-queue-summary.has-open-subtasks .subtask-bar-tag {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.subtask-queue-summary.all-subtasks-done {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, rgba(12, 32, 24, 0.85) 0%, rgba(14, 30, 38, 0.85) 100%);
}
.subtask-queue-summary.all-subtasks-done .subtask-bar-tag {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

/* Manager closed-task archive */
.workflow-archive-card{cursor:pointer}
.archive-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px;padding:19px 21px;border:1px solid var(--line);border-left:3px solid #53d7a5;border-radius:8px;background:linear-gradient(90deg,rgba(37,105,79,.17),transparent 65%)}
.archive-intro h2{margin:5px 0 6px;font-size:22px}.archive-intro p{margin:0;color:var(--muted);max-width:680px}.archive-count{display:grid;place-items:center;flex:0 0 auto;min-width:84px;padding:9px 12px;border:1px solid #3b806a;border-radius:6px;background:#123127;color:#75eac0;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:700px){.archive-intro{align-items:flex-start;flex-direction:column}.archive-count{min-width:0}}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.pagination>div{display:flex;align-items:center;gap:8px}.pagination button{padding:6px 9px;font-size:12px}.pagination button:disabled{cursor:not-allowed;opacity:.45}.pagination strong{min-width:52px;text-align:center;color:var(--text);font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}@media(max-width:560px){.pagination{align-items:flex-start;flex-direction:column}.pagination>div{width:100%;justify-content:space-between}.pagination button{flex:1}}
.approval-package{display:grid;gap:10px}.approval-package>article{display:grid;gap:5px}.approval-package-members{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.approval-package-members article{display:grid;gap:7px;align-content:start}.approval-package-members small{color:var(--muted);font-size:11px}.approval-package-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.approval-package-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:rgba(8,20,26,.65)}.approval-package-list small{color:var(--muted)}@media(max-width:620px){.approval-package-list li{align-items:flex-start;flex-direction:column}}
/* Subtask Accordion & Tree Guide Styling */
.subtask-accordion-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.38);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.12);
  user-select: none;
}
.subtask-accordion-toggle-btn:hover {
  background: rgba(6, 182, 212, 0.24);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
  transform: translateY(-1px);
}
.subtask-accordion-toggle-btn.expanded {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(14, 40, 52, 0.95) 100%);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.4);
}
.subtask-accordion-toggle-btn .subtask-toggle-action {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(6, 182, 212, 0.25);
  color: #a5f3fc;
  margin-left: 2px;
  letter-spacing: 0.2px;
  transition: all 0.15s ease;
}
.subtask-accordion-toggle-btn:hover .subtask-toggle-action {
  background: rgba(6, 182, 212, 0.45);
  color: #ffffff;
}
.subtask-accordion-toggle-btn.expanded .subtask-toggle-action {
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.subtask-accordion-chevron {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  flex-shrink: 0;
}
.row-index-th {
  width: 48px;
  min-width: 44px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11.5px;
  color: var(--cyan);
  font-weight: 800;
  user-select: none;
  padding: 10px 4px;
  letter-spacing: 0.5px;
}
.row-index-cell {
  width: 48px;
  min-width: 44px;
  text-align: center;
  vertical-align: middle;
  padding: 10px 4px;
  user-select: none;
}
.row-index-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
.row-index-badge.main-index {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(14, 28, 36, 0.9) 100%);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #e2e8f0;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
tr:hover .row-index-badge.main-index {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(14, 38, 48, 0.95) 100%);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}
.row-index-badge.subtask-index {
  background: rgba(6, 182, 212, 0.18);
  border: 1px dashed rgba(6, 182, 212, 0.55);
  color: #38bdf8;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
}
tr:hover .row-index-badge.subtask-index {
  background: rgba(6, 182, 212, 0.3);
  border-color: #38bdf8;
  border-style: solid;
  color: #a5f3fc;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.45);
  transform: scale(1.05);
}
@keyframes rowReturnedGlow {
  0% {
    background-color: rgba(6, 182, 212, 0.32) !important;
    outline: 2px solid var(--cyan);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.45);
  }
  60% {
    background-color: rgba(6, 182, 212, 0.18) !important;
    outline: 2px solid rgba(6, 182, 212, 0.5);
  }
  100% {
    background-color: transparent;
    outline: none;
    box-shadow: none;
  }
}
tr.table-row-returned-highlight {
  animation: rowReturnedGlow 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: relative;
  z-index: 5;
}
tr.subtask-row {
  background: rgba(6, 182, 212, 0.025);
  border-left: 2px solid rgba(6, 182, 212, 0.38);
  transition: background 0.15s ease;
}
tr.subtask-row:hover {
  background: rgba(6, 182, 212, 0.07) !important;
}
tr.subtask-row.subtask-hidden {
  display: none !important;
}
.subtask-summary-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 380px !important;
  max-width: 580px !important;
  cursor: pointer;
}
.subtask-summary-toggle:hover {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}
.subtask-summary-toggle.expanded {
  border-color: rgba(6, 182, 212, 0.6) !important;
  background: linear-gradient(135deg, rgba(12, 36, 46, 0.95) 0%, rgba(18, 48, 60, 0.9) 100%) !important;
}
.subtask-toggle-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.15s ease;
}
.subtask-summary-toggle:hover .subtask-toggle-state {
  background: rgba(6, 182, 212, 0.22);
  border-color: rgba(6, 182, 212, 0.45);
  color: #a5f3fc;
}
.subtask-summary-toggle.expanded .subtask-toggle-state {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.35);
  color: #38bdf8;
}
@media(max-width: 760px) {
  .subtask-queue-summary,
  .subtask-summary-toggle {
    min-width: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}
.toggle-all-subtasks-btn:hover {
  background: rgba(6, 182, 212, 0.22) !important;
  border-color: var(--cyan) !important;
}

/* Table Column Header Filter & Popover Styling */
.th-filter-col,
th:has(.th-filter-btn) {
  user-select: none;
  white-space: nowrap !important;
  cursor: default !important;
}

.th-filter-btn {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 4px !important;
  margin: -2px -4px !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font: inherit !important;
  color: inherit !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: inherit !important;
  transition: color 0.15s ease, opacity 0.15s ease, text-shadow 0.15s ease;
}

/* Force reset for any aggressive theme button styles on idle AND hover */
html.theme-vuexy .th-filter-btn,
html.theme-neon .th-filter-btn,
html.theme-echovision .th-filter-btn,
html.theme-liquid .th-filter-btn,
html[data-theme="light"] .th-filter-btn,
button.th-filter-btn,
.th-filter-btn:hover,
.th-filter-btn:focus,
.th-filter-btn:active,
html.theme-vuexy .th-filter-btn:hover,
html.theme-neon .th-filter-btn:hover,
html.theme-echovision .th-filter-btn:hover,
html.theme-liquid .th-filter-btn:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 2px 4px !important;
  margin: -2px -4px !important;
  color: inherit !important;
  transform: none !important;
}

.th-filter-btn:hover {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}

.th-filter-btn.active-filter {
  color: #38bdf8 !important;
}

.th-filter-label {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  white-space: nowrap !important;
}

.th-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  opacity: 0.35;
  transition: opacity 0.18s ease, color 0.18s ease;
}

.th-filter-btn:hover .th-filter-icon,
.th-filter-btn.active-filter .th-filter-icon {
  opacity: 1;
  color: #38bdf8;
}

.th-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  display: inline-block;
  box-shadow: 0 0 6px #38bdf8;
  flex-shrink: 0;
}

.th-filter-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(6, 182, 212, 0.22);
  border: 1px solid rgba(6, 182, 212, 0.45);
  color: #a5f3fc;
  text-transform: none;
  margin-left: 2px;
  display: inline-block;
  line-height: 1.2;
}

/* Floating Popover */
.column-filter-popover {
  position: fixed;
  z-index: 100000;
  width: 310px;
  max-width: 92vw;
  background: #0d1b22;
  border: 1px solid rgba(6, 182, 212, 0.38);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.68), 0 0 16px rgba(6, 182, 212, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: filterPopoverFadeIn 0.14s ease-out;
  font-family: inherit;
}
@keyframes filterPopoverFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.column-filter-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #081318;
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}
.column-filter-popover header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}
.column-filter-popover header button.close-popover {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}
.column-filter-popover header button.close-popover:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.column-filter-body {
  padding: 10px 12px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.column-filter-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 5px;
}
.column-filter-sort-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.column-filter-sort-btn {
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
}
.column-filter-sort-btn:hover {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.35);
  color: #fff;
}
.column-filter-sort-btn.active {
  background: rgba(6, 182, 212, 0.25);
  border-color: var(--cyan);
  color: #38bdf8;
  font-weight: 700;
}
.column-filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.column-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 5px;
  font-size: 11.5px;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.12s ease;
  text-align: left;
  border: none;
  background: none;
  width: 100%;
}
.column-filter-item:hover {
  background: rgba(6, 182, 212, 0.12);
  color: #fff;
}
.column-filter-item.active {
  background: rgba(6, 182, 212, 0.22);
  color: #38bdf8;
  font-weight: 700;
}
.column-filter-item-count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.column-filter-item.active .column-filter-item-count {
  background: rgba(6, 182, 212, 0.32);
  color: #38bdf8;
}
.column-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #081318;
  border-top: 1px solid rgba(6, 182, 212, 0.2);
}
.column-filter-clear-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: none;
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  cursor: pointer;
  transition: all 0.12s ease;
}
.column-filter-clear-btn:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #f87171;
}

/* Ensure column filter popover buttons are not distorted by theme button overrides */
.column-filter-popover button {
  box-sizing: border-box !important;
  font-family: inherit !important;
  transform: none !important;
}
.column-filter-popover button.close-popover {
  background: none !important;
  border: none !important;
  padding: 2px 6px !important;
}
.column-filter-popover button.column-filter-sort-btn {
  margin: 0 !important;
}
.column-filter-popover button.column-filter-item {
  margin: 0 !important;
}

.clear-all-column-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.15s ease;
}
.clear-all-column-filters-btn:hover {
  background: rgba(6, 182, 212, 0.28);
  border-color: var(--cyan);
  color: #fff;
  transform: scale(1.02);
}

/* Technical Catalog Styling */
tr.passive-row {
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.2);
}
tr.passive-row:hover {
  opacity: 0.85;
}
.tech-layer-tag {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.catalog-layout section.surface {
  padding: 20px;
}


/* Sticky Actions Footer for Task Detail */
.taskdetail {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.taskdetail > header {
  flex-shrink: 0 !important;
  padding: 20px 24px 16px 24px !important;
  border-bottom: 1px solid var(--line) !important;
}

.taskdetail > .task-tabs {
  flex-shrink: 0 !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--line) !important;
}

.taskdetail > [data-task-panel] {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
}

.taskdetail .actions {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex-shrink: 0 !important;
  background: var(--bg, #0d171d) !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  border-top: 1px solid var(--line) !important;
  z-index: 99 !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.6) !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* Modern Switch Card & Toggle Component */
.modern-switch-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 10px !important;
  user-select: none !important;
}
.modern-switch-card:hover {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
.modern-switch-card .switch-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.modern-switch-card .switch-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.modern-switch-card .switch-desc {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.modern-toggle {
  position: relative !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 26px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
.modern-toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.modern-toggle .switch-track {
  position: absolute !important;
  inset: 0 !important;
  background: #334155 !important;
  border-radius: 26px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}
.modern-toggle .knob {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease !important;
}
.modern-toggle input[type="checkbox"]:checked ~ .switch-track {
  background: #10b981 !important;
  border-color: #059669 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}
.modern-toggle input[type="checkbox"]:checked ~ .knob {
  transform: translateX(20px) !important;
}

/* ==========================================================================
   MODERN CHECKBOX CARD (ECHO DESIGN SYSTEM)
   ========================================================================== */
.modern-checkbox-card {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.modern-checkbox-card:hover {
  background: rgba(30, 41, 59, 0.55) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 10px rgba(56, 189, 248, 0.08) !important;
}

.modern-checkbox-card.is-checked,
.modern-checkbox-card:has(input[type="checkbox"]:checked) {
  background: rgba(16, 185, 129, 0.07) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 16px rgba(16, 185, 129, 0.15) !important;
}

.modern-checkbox-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modern-checkbox-box {
  position: relative !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  margin-top: 1px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  flex-shrink: 0 !important;
}

.modern-checkbox-card:hover .modern-checkbox-box {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35), inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.modern-checkbox-input:checked ~ .modern-checkbox-box,
.modern-checkbox-card.is-checked .modern-checkbox-box {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}

.modern-checkbox-check {
  width: 13px !important;
  height: 13px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0 !important;
  transform: scale(0.4) rotate(-5deg) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modern-checkbox-input:checked ~ .modern-checkbox-box .modern-checkbox-check,
.modern-checkbox-card.is-checked .modern-checkbox-box .modern-checkbox-check {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

.modern-checkbox-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.modern-checkbox-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.modern-checkbox-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}

.modern-checkbox-badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.modern-checkbox-desc {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  line-height: 1.45 !important;
}

.modern-checkbox-desc strong {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   UNIVERSAL RESPONSIVE SYSTEM: MOBILE, TABLET & DESKTOP (ALL THEMES)
   ========================================================================== */

/* 1. TABLET ENHANCEMENTS (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .shell {
    grid-template-columns: 200px minmax(0, 1fr) !important;
  }
  .side {
    padding: 16px 10px !important;
  }
  .main {
    padding: 0 20px 34px !important;
  }
  .topbar {
    margin: 0 -20px !important;
    padding: 0 20px !important;
  }
  .signals {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .flow-steps, .kanban {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .table-wrap table {
    min-width: 100% !important;
  }
}

/* 2. MOBILE PHONE & SMALL SCREENS (<= 768px) */
@media (max-width: 768px) {
  html, body, #app {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .shell,
  html.theme-echovision .shell,
  html.theme-liquid .shell,
  html.theme-vuexy .shell,
  html.theme-neon .shell,
  html.theme-light .shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  /* Header & Navigation Bar (Sticky Modern App Bar) */
  .side {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 8px 12px 4px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(11, 21, 27, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  html.theme-echovision .side {
    background: rgba(3, 7, 18, 0.94) !important;
    border-bottom-color: rgba(6, 182, 212, 0.2) !important;
  }

  html.theme-liquid .side {
    background: rgba(15, 23, 42, 0.92) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  }

  html.theme-vuexy .side {
    background: rgba(47, 51, 73, 0.96) !important;
  }

  html.theme-neon .side {
    background: rgba(8, 12, 20, 0.96) !important;
    border-bottom: 1px solid rgba(0, 245, 255, 0.3) !important;
  }

  html.theme-light .side {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 6px !important;
  }

  .brand-logo {
    width: 96px !important;
    height: auto !important;
  }

  .side-footer {
    display: none !important;
  }

  /* Smooth Horizontal Pill Navigation (Never wraps into multiple rows!) */
  .nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 2px 2px 6px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .nav::-webkit-scrollbar {
    display: none !important;
  }

  .nav-role {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    border: none !important;
  }

  .nav-role .role-switch {
    display: none !important;
  }

  .nav-submenu-wrapper {
    display: flex !important;
    flex-direction: row !important;
    grid-template-rows: none !important;
    opacity: 1 !important;
  }

  .nav-submenu {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  .nav button {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  .nav button i {
    display: none !important;
  }

  /* Topbar Mobile Clean Alignment */
  .topbar,
  html.theme-echovision .topbar {
    height: auto !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
    margin: 6px 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    background: rgba(11, 17, 29, 0.6) !important;
    box-shadow: none !important;
    gap: 8px !important;
  }

  .topbar .crumb {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 48% !important;
  }

  .top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .top-actions .network,
  .top-actions span:last-child {
    display: none !important;
  }

  .top-actions select#company-filter {
    max-width: 110px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    margin: 0 !important;
  }

  /* Main Viewport & Natural Document Flow */
  .main,
  html.theme-echovision .main,
  html.theme-liquid .main,
  html.theme-vuexy .main,
  html.theme-neon .main,
  html.theme-light .main {
    padding: 0 12px 40px !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  .main-scroll-body,
  html.theme-echovision .main-scroll-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    flex: none !important;
    padding: 0 !important;
  }

  .page-heading {
    padding: 10px 0 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .page-heading h1 {
    font-size: 20px !important;
    margin: 2px 0 !important;
  }

  .page-heading p {
    font-size: 12px !important;
    margin: 0 !important;
  }

  .page-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: stretch !important;
  }

  .page-actions button {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    justify-content: center !important;
  }

  /* Dashboard Flow, Grid & Signals */
  .dashboard-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .content-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .signals {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 0 0 6px 0 !important;
  }

  .signal,
  html.theme-echovision .signal {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .signal span {
    font-size: 9px !important;
  }

  .signal strong {
    font-size: 20px !important;
    margin: 4px 0 2px !important;
  }

  .signal small {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .flow,
  html.theme-echovision .flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
    margin: 8px 0 !important;
  }

  .flow-steps, .kanban {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .flow-steps button, .kanban button {
    min-height: 60px !important;
    padding: 8px 10px !important;
  }

  /* Login on Mobile */
  .login {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .login-card,
  html.theme-echovision .login-card {
    width: 100% !important;
    max-width: 400px !important;
    padding: 24px 20px !important;
    margin: auto !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  /* Mobile Task Cards: Pure Card Layout (No Overlapping Buttons!) */
  .table-wrap {
    overflow: visible !important;
    border: none !important;
  }

  .table-wrap table, table {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
  }

  .table-wrap thead, thead {
    display: none !important;
  }

  .table-wrap table, .table-wrap tbody, tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  tbody tr, .table-wrap tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }

  tbody tr td, .table-wrap td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  tbody tr td:last-child, .table-wrap td:last-child {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
  }

  tbody tr td:last-child button, .table-wrap td:last-child button {
    width: 100% !important;
    text-align: center !important;
    padding: 9px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: rgba(6, 182, 212, 0.15) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    color: var(--cyan, #38bdf8) !important;
    cursor: pointer !important;
  }

  /* Modals on Mobile: Fullscreen Sheet Experience */
  dialog:not([open]) {
    display: none !important;
  }

  dialog.modal[open], .modal[open] {
    position: fixed !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 99999 !important;
  }

  .modal header {
    flex-shrink: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .modal form, .workspace, .taskdetail {
    padding: 14px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
  }

  .modal footer, .actions, footer.actions, .taskdetail .actions {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(13, 23, 29, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }

  .formgrid, .detailgrid, .workspace-meta {
    grid-template-columns: 1fr !important;
  }

  .workspace-flow {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .task-status-filter-menu {
    width: 92vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* =========================================================
   RELEASE & DISTRIBUTION HUB MODERN STYLES
   ========================================================= */
.rel-kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.rel-kpi-chip:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.rel-kpi-chip.active {
  background: rgba(30, 41, 59, 0.95);
  border-color: var(--cyan, #38bdf8);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}
.rel-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.rel-tab-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
}
.rel-tab-btn.active {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.rel-tab-btn .tab-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
.rel-tab-btn.active .tab-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
.release-card {
  background: rgba(15, 23, 42, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  /* Hardware acceleration and rendering engine virtualization */
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
  contain: layout style paint;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.release-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}
.release-card.is-live {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.08) !important;
}
.release-card.is-live:hover {
  border-color: rgba(34, 197, 94, 0.55) !important;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.2) !important;
}
.matrix-rel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.matrix-rel-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px currentColor;
}
@keyframes pulse-live {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.pulse-live-indicator {
  animation: pulse-live 2s infinite ease-in-out;
}

/* Release Governance & Multi-Component Cards */
.component-release-card {
  transition: all 0.2s ease;
}
.component-release-card:hover {
  border-color: rgba(56, 189, 248, 0.3) !important;
  background: rgba(15, 23, 42, 0.65) !important;
}
.deferred-task-item {
  transition: all 0.2s ease;
}
.deferred-task-item:hover {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}
.release-approval-banner {
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
  animation: eng-page-enter 0.25s ease-out both;
}
.scope-freeze-banner {
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.08);
}
/* Modern Dashboard Styles */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dash-kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.dash-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}
.dash-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.dash-kpi-card.cyan:hover::before { background: var(--cyan); }
.dash-kpi-card.amber:hover::before { background: #f59e0b; }
.dash-kpi-card.violet:hover::before { background: #a855f7; }
.dash-kpi-card.green:hover::before { background: #10b981; }
.dash-kpi-card.rose:hover::before { background: #f43f5e; }

.dash-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.dash-kpi-header svg { opacity: 0.7; }
.dash-kpi-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dash-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}
.dash-kpi-sub {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dashboard Risk & Radar */
.dash-section-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.dash-section-card:last-child { margin-bottom: 0; }
.dash-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dash-section-title h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #edf7f5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.dash-risk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-risk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dash-risk-item:hover {
  filter: brightness(1.1);
  transform: translateX(3px);
}
.dash-risk-item.critical {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
.dash-risk-item.warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}
.dash-risk-item.info {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}

/* Team Workload Mini Cards */
.dash-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.dash-team-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dash-team-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(85, 204, 224, 0.3);
  transform: translateY(-1px);
}
.dash-team-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-team-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.dash-team-meta strong {
  font-size: 12px;
  color: #fff;
  display: block;
  line-height: 1.2;
}
.dash-team-meta small {
  font-size: 10px;
  color: var(--muted);
}
.dash-team-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin-top: 2px;
}

/* Release Mini Flow */
.dash-release-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 8px;
  margin: 10px 0;
}
.dash-release-step {
  flex: 1;
  text-align: center;
  padding: 5px 2px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  transition: all 0.2s ease;
}
.dash-release-step.passed {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
}
.dash-release-step.current {
  color: #fff;
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.modal-xl { max-width: 1140px; }

/* Fullscreen Table Modal */
.modal.modal-fullscreen:not(:has(.taskdetail)),
dialog[open].modal:has(.table-modal-container),
dialog[open]:has(.table-modal-container),
.modal:has(.table-modal-container) {
  width: 96vw !important;
  max-width: 96vw !important;
  height: 92vh !important;
  max-height: 92vh !important;
  margin: auto !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #0b1419 !important;
  border: 1px solid #284450 !important;
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.85) !important;
}
.table-modal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.table-modal-body {
  flex: 1;
  overflow: auto;
  background: #0d171d;
}
.table-modal-body .surface {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.table-modal-body table {
  width: 100%;
}
.table-modal-body th {
  position: sticky;
  top: 0;
  background: #0d171d;
  z-index: 10;
  box-shadow: 0 1px 0 var(--line);
}
.dash-role-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  padding: 3px;
  border-radius: 7px;
  border: 1px solid var(--line);
}
.dash-role-btn {
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dash-role-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.dash-role-btn.active {
  background: var(--cyan);
  color: #091015;
  box-shadow: 0 1px 6px rgba(6, 182, 212, 0.35);
}
.dash-role-btn[data-dash-role="tester"].active {
  background: #f59e0b;
  color: #091015;
  box-shadow: 0 1px 6px rgba(245, 158, 11, 0.35);
}
.dash-role-btn[data-dash-role="support"].active {
  background: #a855f7;
  color: #091015;
  box-shadow: 0 1px 6px rgba(168, 85, 247, 0.35);
}
.expand-table-modal-btn:hover {
  background: rgba(85, 204, 224, 0.25) !important;
  border-color: var(--cyan) !important;
  color: #fff !important;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Release Package Modal Layout & Responsiveness */
.package-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: start;
}
.package-modal-grid .table-wrap table {
  min-width: 0 !important;
  width: 100% !important;
}
@media (max-width: 960px) {
  .package-modal-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Field Distribution Telemetry & Pipeline Cockpit */
.dist-cockpit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.dist-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.dist-kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}
.dist-kpi-card:hover {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(255, 255, 255, 0.05);
}
.dist-kpi-card .kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 6px;
}
.dist-kpi-card .kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dist-kpi-card .kpi-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}

.dist-pipeline-section {
  margin-bottom: 28px;
}
.dist-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.dist-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.dist-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
}
.dist-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dist-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dist-pipeline-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.dist-stage-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s ease;
}
.dist-stage-step.active {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.dist-stage-step.rc {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.dist-stage-step.testing {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.dist-stage-step.planned {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
}
.dist-stage-step .stage-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 4px;
}
.dist-stage-step .stage-version {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.dist-stage-step .stage-metric {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.dist-matrix-section {
  margin-top: 20px;
}
.dist-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.dist-matrix-table th {
  background: rgba(15, 23, 42, 0.85);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dist-matrix-table td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}
.dist-matrix-table tr.dominant-row td {
  background: rgba(16, 185, 129, 0.06);
  font-weight: 600;
}
.dist-matrix-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.dist-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.dist-badge-dominant {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.dist-badge-pilot {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.dist-badge-drift {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.dist-paste-preview {
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  font-size: 12px;
}

/* Modern Edit Request Routing Option Cards */
.routing-option-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.routing-option-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.routing-option-card.selected-resume {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.18), inset 0 0 0 1px rgba(16, 185, 129, 0.15) !important;
}

.routing-option-card.selected-dev {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.08) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2), inset 0 0 0 1px rgba(245, 158, 11, 0.15) !important;
}

.routing-option-card .route-radio-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #475569;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.routing-option-card.selected-resume .route-radio-circle {
  border-color: #10b981;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.routing-option-card.selected-dev .route-radio-circle {
  border-color: #f59e0b;
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.routing-option-card .route-radio-circle .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0);
}

.routing-option-card.selected-resume .route-radio-circle .dot,
.routing-option-card.selected-dev .route-radio-circle .dot {
  background: #ffffff;
  transform: scale(1);
}

/* Task Table Search Bar Styles */
.task-search-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.task-search-input-wrap input::placeholder {
  color: #64748b;
}
.task-search-input-wrap input:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(85,204,224,0.18);
}
.task-search-scope-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.task-search-scope-btn:hover {
  background: rgba(56,189,248,0.18) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: translateY(-1px);
}

/* Member Summary Cards Prominent Selected State */
.member-summary button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  cursor: pointer !important;
}
.member-summary button:hover:not(.selected) {
  background: #14242b !important;
  border-color: rgba(85, 204, 224, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.member-summary button.selected,
html.theme-liquid .member-summary button.selected,
html.theme-light .member-summary button.selected {
  background: linear-gradient(180deg, rgba(85, 204, 224, 0.28) 0%, rgba(14, 28, 36, 0.98) 100%) !important;
  border: 1.5px solid #55cce0 !important;
  border-top: 4px solid #55cce0 !important;
  box-shadow: 0 0 22px rgba(85, 204, 224, 0.45), inset 0 0 16px rgba(85, 204, 224, 0.15) !important;
  transform: translateY(-2px) !important;
  position: relative !important;
  z-index: 5 !important;
}
.member-summary button.selected span,
html.theme-liquid .member-summary button.selected span,
html.theme-light .member-summary button.selected span {
  color: #55cce0 !important;
  font-weight: 800 !important;
  letter-spacing: 0.9px !important;
  text-shadow: 0 0 8px rgba(85, 204, 224, 0.6) !important;
}
.member-summary button.selected strong,
html.theme-liquid .member-summary button.selected strong,
html.theme-light .member-summary button.selected strong {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(85, 204, 224, 0.9) !important;
}
.member-summary button.selected::after,
html.theme-liquid .member-summary button.selected::after,
html.theme-light .member-summary button.selected::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 3.5px !important;
  background: #55cce0 !important;
  border-radius: 3px 3px 0 0 !important;
  box-shadow: 0 -1px 10px #55cce0 !important;
}

/* ==========================================================================
   Git Diff & Code Review Viewer
   ========================================================================== */
.task-diff-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 480px;
  max-height: 680px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 14px;
}

.task-diff-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 10px;
}

.task-diff-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}

.task-diff-stats .branch-badge {
  background: rgba(85, 204, 224, 0.12);
  color: var(--cyan, #55cce0);
  border: 1px solid rgba(85, 204, 224, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 700;
  font-size: 11.5px;
}

.task-diff-stats .stat-add {
  color: #4ade80;
  font-weight: 700;
  font-family: monospace;
}

.task-diff-stats .stat-del {
  color: #f87171;
  font-weight: 700;
  font-family: monospace;
}

.task-diff-body {
  display: flex;
  flex: 1;
  min-height: 400px;
  max-height: 600px;
  overflow: hidden;
}

.task-diff-file-list {
  width: 280px;
  min-width: 240px;
  max-width: 320px;
  background: rgba(10, 16, 26, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.task-diff-file-search {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.task-diff-file-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

.task-diff-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease;
  user-select: none;
  gap: 8px;
}

.task-diff-file-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.task-diff-file-item.selected {
  background: rgba(85, 204, 224, 0.15);
  border-left: 3px solid var(--cyan, #55cce0);
}

.task-diff-file-info {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.task-diff-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  flex-shrink: 0;
}

.task-diff-badge.status-m {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.task-diff-badge.status-a {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.task-diff-badge.status-d {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.task-diff-file-name {
  font-size: 12px;
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

.task-diff-file-item.selected .task-diff-file-name {
  color: #ffffff;
  font-weight: 600;
}

.task-diff-file-counts {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: monospace;
  flex-shrink: 0;
}

.task-diff-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #090e17;
  overflow: hidden;
}

.task-diff-viewer-header {
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
}

.task-diff-viewer-header strong {
  color: #f8fafc;
  font-family: monospace;
  font-size: 12.5px;
}

.task-diff-code-scroll {
  flex: 1;
  overflow: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.55;
  background: #0b111a;
  padding: 8px 0;
}

.diff-line {
  display: flex;
  align-items: stretch;
  min-height: 20px;
  white-space: pre;
  width: 100%;
}

.diff-gutter {
  width: 48px;
  min-width: 48px;
  user-select: none;
  text-align: right;
  padding: 0 8px;
  color: #475569;
  font-size: 11px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.diff-sign {
  width: 22px;
  min-width: 22px;
  text-align: center;
  user-select: none;
  font-weight: 700;
  flex-shrink: 0;
}

.diff-text {
  flex: 1;
  padding: 0 8px;
  overflow-x: visible;
}

.diff-line.line-add {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.diff-line.line-add .diff-gutter {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

.diff-line.line-add .diff-sign {
  color: #4ade80;
}

.diff-line.line-del {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

.diff-line.line-del .diff-gutter {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

.diff-line.line-del .diff-sign {
  color: #f87171;
}

.diff-line.line-hunk {
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 0;
  border-top: 1px dashed rgba(56, 189, 248, 0.2);
  border-bottom: 1px dashed rgba(56, 189, 248, 0.2);
  margin: 4px 0;
}

.diff-line.line-hunk .diff-gutter {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
}

.diff-line.line-normal {
  color: #cbd5e1;
}

.diff-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: #94a3b8;
  gap: 12px;
}

.diff-empty-state svg {
  color: #64748b;
  opacity: 0.8;
}

.diff-empty-state h4 {
  margin: 0;
  color: #f1f5f9;
  font-size: 15px;
}

.diff-empty-state p {
  margin: 0;
  font-size: 12.5px;
  max-width: 480px;
  line-height: 1.5;
}