/* Infinity X Creative — Glass / Neon interface */
:root{
  color-scheme:dark;
  --black:#050506;
  --ink:#f7f7f8;
  --soft:#a7a7ad;
  --muted:#73737b;
  --paper:#070708;
  --white:#fff;
  --orange:#ff681f;
  --orange-2:#ff8a4d;
  --orange-soft:rgba(255,104,31,.13);
  --line:rgba(255,255,255,.095);
  --glass:rgba(20,20,23,.7);
  --glass-strong:rgba(24,24,28,.88);
  --glass-soft:rgba(255,255,255,.045);
  --glass-hover:rgba(255,255,255,.075);
  --radius:22px;
  --shadow:0 24px 60px rgba(0,0,0,.3);
  --neon-shadow:0 0 0 1px rgba(255,104,31,.28),0 0 26px rgba(255,104,31,.16);
}

html{background:#050506;scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 76% 3%,rgba(255,104,31,.12),transparent 25rem),
    radial-gradient(circle at 15% 82%,rgba(255,104,31,.06),transparent 27rem),
    #070708;
  color:var(--ink);
  overflow-x:hidden;
}
body::before,body::after{
  content:"";
  position:fixed;
  z-index:-1;
  width:32rem;
  height:32rem;
  border-radius:50%;
  filter:blur(110px);
  opacity:.2;
  pointer-events:none;
  animation:ix-orbit 18s ease-in-out infinite alternate;
}
body::before{top:-16rem;right:18%;background:#ff681f}
body::after{bottom:-20rem;left:5%;background:#a62f00;animation-delay:-7s}
::selection{background:rgba(255,104,31,.38);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,104,31,.45)}

button,input,select,textarea{color:inherit}
button{transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease}
button:active{transform:scale(.97)}
/* Safety net: any plain/unclassed button that isn't styled by a more specific rule
   would otherwise inherit light text on the native light button face */
button{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:9px}
button:hover{background:rgba(255,104,31,.14);border-color:rgba(255,104,31,.25)}

.chip{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#b6b6bc}
.chip.active{background:rgba(255,104,31,.16);border-color:rgba(255,104,31,.32);color:#fff}
.chip:hover{color:#fff;background:rgba(255,255,255,.09)}
.integration-grid button,.growth-quote button,.notice-list button,.task-comments button,.roadmap-phases button{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#d3d3d8;
}
.integration-grid button:hover,.growth-quote button:hover,.notice-list button:hover,.task-comments button:hover,.roadmap-phases button:hover{
  color:#fff;background:rgba(255,104,31,.14);border-color:rgba(255,104,31,.25);
}
.roadmap-phases button.active{background:rgba(255,104,31,.18);border-color:rgba(255,104,31,.32);color:#fff}
.notes-empty{background:rgba(255,255,255,.03);color:#8d8d95}
.panel-head button,.control-section .panel-head button,.service-editor-head button,.ai-prompts button{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#d3d3d8;
}
.panel-head button:hover,.control-section .panel-head button:hover,.service-editor-head button:hover,.ai-prompts button:hover{
  color:#fff;background:rgba(255,104,31,.14);border-color:rgba(255,104,31,.25);
}
.growth-empty{background:rgba(255,255,255,.03);color:#8d8d95}

/* Badges keep their own pastel color pairs; give the unstyled ones readable dark text */
.badge{color:#3a3a3f}

/* Light "info card" containers used across growth / legal / roadmap detail views */
.growth-quote,.readiness-checks article,.onboarding-steps label,.renewal-list>article>span,.legal-invoice-list article,.legal-case-meta span,.evidence-grid article{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
  color:var(--ink);
}
.growth-quote small{color:#8d8d95}
.growth-progress{background:rgba(255,255,255,.08)}

/* Note cards render on their own paper color (white/sand/orange/black) — force dark
   ink on the light variants since the app-wide default text color is now light */
.note-card{color:#1a1a1a}
.note-card.black{color:#fff}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

/* Login */
.login-shell{
  background:
    linear-gradient(115deg,rgba(5,5,6,.8),rgba(5,5,6,.98)),
    radial-gradient(circle at 70% 25%,rgba(255,104,31,.25),transparent 34%);
}
.login-shell::before{color:rgba(255,255,255,.018);animation:ix-breathe 7s ease-in-out infinite}
.login-shell::after{
  border:1px solid rgba(255,104,31,.24);
  box-shadow:0 0 90px rgba(255,104,31,.1),inset 0 0 90px rgba(255,104,31,.04);
}
.login-card{
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(32px) saturate(140%);
  -webkit-backdrop-filter:blur(32px) saturate(140%);
  box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 70px rgba(255,104,31,.08);
}
.login-card input{
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.1);
}
.login-card input:focus{border-color:rgba(255,104,31,.75);box-shadow:0 0 22px rgba(255,104,31,.11)}
.login-card button,.primary{
  background:linear-gradient(135deg,#ff762f,#ff570d);
  box-shadow:0 10px 28px rgba(255,91,14,.25),inset 0 1px rgba(255,255,255,.24);
}
.login-card button:hover,.primary:hover{background:linear-gradient(135deg,#ff8749,#ff681f);box-shadow:0 14px 34px rgba(255,91,14,.34)}

/* App shell */
.app{grid-template-columns:252px minmax(0,1fr);gap:0;background:transparent}
.sidebar{
  z-index:40;
  padding:16px 13px;
  background:linear-gradient(180deg,rgba(15,15,17,.91),rgba(8,8,10,.82));
  border-left:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(28px) saturate(135%);
  -webkit-backdrop-filter:blur(28px) saturate(135%);
  box-shadow:-18px 0 55px rgba(0,0,0,.22);
}
.sidebar .brand{height:70px;padding:0 8px 15px;border-color:rgba(255,255,255,.07)}
.sidebar .brand-mark{width:44px;height:44px;border-radius:13px;background:#fff;box-shadow:0 0 26px rgba(255,104,31,.12)}
.sidebar .brand b{font-size:13px;color:#fff}
.sidebar .brand small{font-size:7px;color:#717178}
.sidebar nav{display:block;padding:8px 0;overflow-y:auto;overscroll-behavior:contain}
.nav-group{display:grid;gap:3px;margin-bottom:7px}
.nav-label{display:block;padding:15px 12px 7px;color:#5f5f66;font-size:7px;letter-spacing:.13em}
.sidebar nav button{
  position:relative;
  min-height:39px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#8c8c94;
  gap:10px;
  font-size:11px;
  overflow:hidden;
}
.sidebar nav button i{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:8px;
  color:#74747c;
  background:rgba(255,255,255,.035);
  font:600 9px 'IBM Plex Sans';
}
.sidebar nav button span{white-space:nowrap}
.sidebar nav button small{display:none;margin-right:auto;color:#6d6d73;font-size:7px}
.sidebar nav button:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.07);color:#eee;transform:translateX(-2px)}
.sidebar nav button.active{
  background:linear-gradient(90deg,rgba(255,104,31,.17),rgba(255,104,31,.055));
  border-color:rgba(255,104,31,.22);
  color:#fff;
  box-shadow:inset -2px 0 #ff681f,0 0 22px rgba(255,104,31,.08);
}
.sidebar nav button.active i{color:#fff;background:linear-gradient(135deg,#ff7d3c,#f45100);box-shadow:0 0 18px rgba(255,104,31,.26)}
.sidebar nav button.active small{display:block}
.nav-more{margin-top:5px;border-top:1px solid rgba(255,255,255,.065);padding-top:8px}
.nav-more summary{
  list-style:none;
  padding:10px 11px;
  border-radius:11px;
  color:#787880;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary:hover{background:rgba(255,255,255,.04);color:#ddd}
.nav-more summary i{font-style:normal;color:var(--orange);margin-left:6px}
.nav-more summary b{transition:transform .25s ease}
.nav-more[open] summary b{transform:rotate(180deg)}
.nav-advanced{margin:4px 0 0;animation:ix-reveal .28s ease both}
.sidebar-foot{margin-top:auto;border-color:rgba(255,255,255,.07)}
.sidebar-foot button{background:rgba(255,255,255,.055);color:#8a8a91}
.status-dot{background:#ff681f;box-shadow:0 0 14px #ff681f,0 0 26px rgba(255,104,31,.55);animation:ix-pulse 2.4s ease-in-out infinite}
.sidebar-close,.menu-button,.sidebar-scrim,.mobile-dock{display:none}

main{background:transparent;position:relative}
main>header{
  top:12px;
  height:76px;
  min-height:76px;
  margin:0 16px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:rgba(16,16,19,.69);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  box-shadow:0 20px 48px rgba(0,0,0,.24);
}
.header-context{display:flex;align-items:center;gap:11px}
main>header h1{color:#f7f7f8;font-size:19px;font-weight:600;letter-spacing:-.025em}
main>header>div:first-child span{color:#717178}
.search,.icon-button{
  color:#b6b6bc;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
}
.search{height:40px}
.search input{color:#eee}
.search input::placeholder{color:#6f6f76}
.search:focus-within{border-color:rgba(255,104,31,.38);box-shadow:0 0 20px rgba(255,104,31,.08)}
.icon-button:hover{background:rgba(255,104,31,.13);border-color:rgba(255,104,31,.23);color:#fff}
.content{padding:34px 30px 68px;max-width:1580px}
.content>*{animation:ix-page-in .5s cubic-bezier(.2,.8,.2,1) both}
.content>*:nth-child(2){animation-delay:.04s}.content>*:nth-child(3){animation-delay:.08s}.content>*:nth-child(4){animation-delay:.12s}.content>*:nth-child(5){animation-delay:.16s}

/* Shared glass surfaces */
.app :is(.panel,.kpi:not(.orange),.client-card,.project-card,.finance-mini,.table-wrap,.archive-project,.daily-kpis article,.daily-focus,.ops-section,.team-card,.notification-center>article,.workspace-kpis article,.capacity-strip article,.webhook-card,.meta-account,.ai-workbench>form,.ai-workbench>article,.legal-case,.quote-form-card,.growth-section,.growth-readiness,.growth-hero-metrics article,.legal-case-section,.legal-hero>aside,.legal-kpis article,.meta-kpis article,.legal-workspace>main>section,.roadmap-score,.roadmap-kpis article,.roadmap-category,.control-kpis article,.note-composer,.note-menu){
  color:var(--ink);
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 20px 48px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.app :is(.panel,.kpi,.client-card,.project-card,.finance-mini,.ops-section,.team-card,.meta-account,.legal-case,.template-gallery>article,.studio-card,.task-card,.growth-section,.legal-case-section,.roadmap-category){
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
.app :is(.panel,.kpi,.client-card,.project-card,.finance-mini,.ops-section,.team-card,.meta-account,.legal-case,.template-gallery>article,.studio-card,.task-card,.growth-section,.legal-case-section,.roadmap-category):hover{
  border-color:rgba(255,104,31,.2);
  box-shadow:0 26px 58px rgba(0,0,0,.27),0 0 26px rgba(255,104,31,.055);
}
.panel.dark,.daily-risks,.executive-summary,.balance-card,.production-command,.workspace-head,.copilot,.ai-hero,.channel-hero,.legal-hero{
  color:#fff;
  background:linear-gradient(145deg,rgba(27,27,31,.92),rgba(9,9,11,.88));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 24px 65px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04);
}
.daily-hero{
  background:
    radial-gradient(circle at 88% 10%,rgba(255,104,31,.27),transparent 34%),
    linear-gradient(145deg,rgba(28,28,32,.94),rgba(8,8,10,.92));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 75px rgba(0,0,0,.34),0 0 44px rgba(255,104,31,.08);
  backdrop-filter:blur(22px);
}
.daily-hero aside{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09)}
.daily-hero aside strong{text-shadow:0 0 26px rgba(255,104,31,.5)}
.kpi.dark,.kpi.orange{border:1px solid rgba(255,255,255,.09)}
.kpi.orange{background:linear-gradient(135deg,#ff762e,#ef4c00);box-shadow:0 20px 48px rgba(255,80,0,.2)}
.kpi-icon{background:rgba(255,255,255,.07)}
.panel h2,.view-intro h2,.client-card h3,.project-card h3,.team-card h3,.archive-title h3,.calendar-head h2{color:#f3f3f5}
.panel h2{font-size:15px}.view-intro h2{font-size:21px}.view-intro p{font-size:11px;line-height:1.7}
.view-intro p,.sub,.panel-head small,.client-card p,.project-card p,.project-details,.calendar-head p{color:#8d8d95}
.client-card h3,.project-card h3{font-size:14px}.client-card p,.project-card p{font-size:9px}
.badge{font-size:8px}.panel-head small,.panel-link{font-size:9px}
.panel-link{border:0;background:transparent;color:var(--orange)}

/* Tables and compact inner surfaces */
.table-wrap{overflow:auto}
table{background:transparent}
th{color:#777780;background:rgba(255,255,255,.035);border-bottom-color:rgba(255,255,255,.08)}
th{font-size:8px}td{color:#d8d8dc;border-bottom-color:rgba(255,255,255,.065);font-size:10px}
tbody tr:hover{background:rgba(255,104,31,.055)}
.actions button,.workspace-head>button,.notification-center button,.team-card>button,.task-quick button,.calendar-head button,.operations-actions button,.finance-actions button,.studio-toolbar button,.archive-filters button{
  color:#b8b8be;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
}
.actions button:hover,.task-quick button:hover,.calendar-head button:hover,.studio-toolbar button:hover,.archive-filters button:hover{color:#fff;background:rgba(255,104,31,.14);border-color:rgba(255,104,31,.25)}
.client-meta div,.team-stats div,.profit-grid article,.aging-grid>div,.archive-intel>div,.meta-metrics div,.task-comments,.positive-state{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.055);
}
.positive-state{color:#7ee0b0}
.progress,.bar,.capacity-strip i,.workspace-kpis i,.daily-task-list span{background:rgba(255,255,255,.08)}
.progress i,.bar i,.capacity-strip em,.workspace-kpis em,.daily-task-list span em{background:linear-gradient(90deg,#ff5410,#ff8b4e);box-shadow:0 0 12px rgba(255,104,31,.34)}
.health-ring{background:conic-gradient(var(--orange) calc(var(--health)*1%),rgba(255,255,255,.08) 0)}
.health-ring::after{background:#151518}
.avatar,.role-chip{background:rgba(255,104,31,.13);color:#ff8a4d}
.client-logo{background:#202024;border:1px solid rgba(255,255,255,.07)}

/* Production, archive, finance and daily operations */
.kanban-col{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)}
.kanban-head span{color:#a6a6ad;background:rgba(255,255,255,.07)}
.task-card{
  color:#e8e8eb;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.task-card:hover{transform:translateY(-3px);border-color:rgba(255,104,31,.28)}
.task-card h4{font-size:11px}.task-card p{font-size:8px}
.task-tags span{background:rgba(255,255,255,.06);color:#aaaab1}
.task-foot,.card-foot,.team-last,.workspace-task,.workspace-timeline>article,.invoice-list article,.timeline-item,.audit-list article,.daily-task-list>article,.ops-rows>article,.daily-risks>article{border-color:rgba(255,255,255,.07)}
.archive-project{padding:18px}
.media-card{border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 28px rgba(0,0,0,.18)}
.media-card:hover{transform:translateY(-3px);box-shadow:var(--neon-shadow)}
.media-placeholder{background:linear-gradient(145deg,#1b1b1f,#0e0e10)}
.balance-card strong,.currency-line strong{filter:drop-shadow(0 0 10px rgba(255,104,31,.25))}
.finance-mini i{background:rgba(255,104,31,.14)}
.daily-focus,.daily-risks,.ops-section{border-radius:22px}
.daily-risks{background:linear-gradient(150deg,rgba(27,27,31,.92),rgba(10,10,12,.9))}
.daily-hero p{font-size:10px;max-width:680px}.daily-kpis small{font-size:8px}.daily-kpis strong{font-size:27px}.daily-kpis span{font-size:8px}
.daily-focus h2,.daily-risks h2,.ops-section h2{font-size:15px}.ops-section>header p{font-size:9px}
.daily-task-list>article>i{background:rgba(255,255,255,.06);color:#aaa}
.daily-task-list>article.today>i{background:rgba(255,104,31,.15);color:#ff8a4d;box-shadow:0 0 16px rgba(255,104,31,.1)}
.daily-task-list b{font-size:11px}.daily-task-list small{font-size:8px}.daily-task-list button{font-size:8px}
.daily-all-tasks{width:100%;margin-top:10px;padding:10px;border:1px solid rgba(255,104,31,.18);border-radius:11px;color:#ff9a65;background:rgba(255,104,31,.075)}
.daily-all-tasks:hover{color:#fff;background:rgba(255,104,31,.15);box-shadow:0 0 24px rgba(255,104,31,.08)}
.daily-task-list button,.ops-rows button,.template-gallery button,.ops-section header button,.daily-risks button{background:linear-gradient(135deg,#ff742e,#f25000);box-shadow:0 8px 20px rgba(255,80,0,.16)}
.template-gallery>article,.signal-grid article{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.075);
  color:#eee;
}
.template-gallery>article:hover{transform:translateY(-4px);border-color:rgba(255,104,31,.28);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.template-gallery article>div b{background:rgba(255,255,255,.06);color:#aaa}
.signal-grid article>strong{box-shadow:0 0 24px rgba(255,104,31,.25)}
.ops-section footer{border-color:rgba(255,255,255,.07)}
.ops-rows b{font-size:10px}.ops-rows small{font-size:8px}.template-gallery h3{font-size:13px}.template-gallery p{font-size:9px}

/* Calendar, studio, inbox and control areas */
.calendar-week{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07)}
.calendar-grid{border-color:rgba(255,255,255,.075)}
.calendar-day{color:#d5d5da;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.065)}
.calendar-day.outside{background:rgba(255,255,255,.015);color:#55555c}
.cal-event{background:rgba(255,255,255,.07);color:#c4c4ca}
.cal-event.project{background:rgba(255,104,31,.13);color:#ff9b66}
.studio-toolbar,.quote-language-tabs{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
.studio-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.whatsapp-inbox{
  background:rgba(18,18,21,.76);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px);
}
.whatsapp-inbox>aside,.whatsapp-inbox>aside>header,.whatsapp-inbox>main>header{border-color:rgba(255,255,255,.07)}
.whatsapp-inbox>aside>button{color:#ddd;background:transparent;border-color:rgba(255,255,255,.055)}
.whatsapp-inbox>aside>button.active{background:rgba(255,104,31,.1)}
.message-thread{background:rgba(0,0,0,.22)}
.message-thread article{color:#eee;background:rgba(255,255,255,.085);box-shadow:none}
.message-thread article.outbound{background:rgba(22,163,106,.16)}
.wa-compose{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.07)}
.wa-compose textarea{background:rgba(0,0,0,.25)}
.control-kpis article,.resource-grid article,.quote-list article,.integration-grid article,.run-list article,.security-list article,.forecast span,.connector-status{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.07);
}
.copilot input{color:#fff;background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.08)}

/* Forms, dialogs and overlays */
dialog,.connector-setup form,.notice-editor form,.quote-builder{
  color:#eee;
  background:linear-gradient(145deg,rgba(28,28,32,.97),rgba(12,12,14,.96));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 45px 140px rgba(0,0,0,.66),0 0 45px rgba(255,104,31,.06);
}
dialog::backdrop,.connector-setup,.notice-editor{background:rgba(0,0,0,.72);backdrop-filter:blur(14px)}
dialog form>header,dialog footer,.connector-setup form>footer,.notice-editor form>footer{border-color:rgba(255,255,255,.075)}
dialog header button,.connector-setup header button,.notice-editor header button{color:#ddd;background:rgba(255,255,255,.07)}
.form-grid label,.connector-fields label,.notice-editor label,.legal-edit-grid label{color:#a0a0a7}
.form-grid input,.form-grid select,.form-grid textarea,.connector-fields input,.connector-fields select,.connector-fields textarea,.notice-editor input,.notice-editor textarea,.legal-edit-grid input,.legal-edit-grid select,.legal-edit-grid textarea,.ai-workbench select,.ai-workbench textarea,.quote-form-card input,.quote-form-card select,.quote-form-card textarea{
  color:#f1f1f3;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.connector-fields input:focus,.connector-fields select:focus,.connector-fields textarea:focus{
  background:rgba(0,0,0,.38);
  border-color:rgba(255,104,31,.55);
  box-shadow:0 0 20px rgba(255,104,31,.08);
}
select option{color:#eee;background:#18181b}
.form-section{border-color:rgba(255,255,255,.075)}
.ghost{color:#bbb;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.075)}
.connector-setup form>aside,.notice-editor form>aside,.legal-warning{color:#d49a78;background:rgba(255,104,31,.09);border-color:var(--orange)}
.checklist-overlay{background:radial-gradient(circle at 75% 0,rgba(255,104,31,.11),transparent 30%),#08080a}
.checklist-overlay>header{background:rgba(16,16,19,.88);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(22px)}
.checklist-overlay>main{color:#eee;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.checklist-overlay label{border-color:rgba(255,255,255,.07)}

.toast{
  background:rgba(19,19,22,.88);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 22px rgba(255,104,31,.08);
  animation:ix-toast .35s cubic-bezier(.2,.8,.2,1) both;
}

/* Responsive navigation */
@media(max-width:1100px){
  .app{grid-template-columns:220px minmax(0,1fr)}
  .sidebar nav button small{display:none!important}
  .content{padding-inline:20px}
}
@media(max-width:850px){
  body{padding-bottom:76px}
  .app{display:block}
  .sidebar{
    position:fixed;
    top:10px;
    right:10px;
    bottom:10px;
    width:min(290px,calc(100vw - 32px));
    height:auto;
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;
    transform:translateX(calc(100% + 30px));
    opacity:0;
    transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .25s ease;
    box-shadow:0 35px 100px rgba(0,0,0,.65),0 0 50px rgba(255,104,31,.08);
  }
  .nav-open .sidebar{transform:translateX(0);opacity:1}
  .sidebar .brand div,.sidebar .nav-label,.sidebar nav span,.sidebar-foot div,.sidebar-foot button{display:block}
  .sidebar nav button{justify-content:flex-start}
  .sidebar-close{display:grid;margin-right:auto;width:34px;height:34px;place-items:center;border:0;border-radius:10px;color:#aaa;background:rgba(255,255,255,.06)}
  .sidebar-scrim{display:block;position:fixed;inset:0;z-index:35;border:0;background:rgba(0,0,0,.66);backdrop-filter:blur(7px);opacity:0;pointer-events:none}
  .nav-open .sidebar-scrim{opacity:1;pointer-events:auto}
  main>header{top:8px;margin:0 9px;height:68px;min-height:68px;padding:11px 13px}
  .menu-button{display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#ddd;background:rgba(255,255,255,.055)}
  main>header h1{font-size:16px}
  main>header>div:first-child span{font-size:6px}
  .content{padding:27px 13px 30px}
  .mobile-dock{
    display:grid;
    position:fixed;
    z-index:30;
    right:12px;
    left:12px;
    bottom:10px;
    grid-template-columns:repeat(5,1fr);
    padding:7px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    background:rgba(15,15,18,.8);
    backdrop-filter:blur(24px) saturate(140%);
    box-shadow:0 22px 60px rgba(0,0,0,.48);
  }
  .mobile-dock button{display:grid;place-items:center;gap:2px;border:0;border-radius:13px;padding:6px 3px;color:#74747c;background:transparent}
  .mobile-dock button i{font:600 14px 'IBM Plex Sans';font-style:normal}
  .mobile-dock button span{font-size:7px}
  .mobile-dock button.active{color:#fff;background:rgba(255,104,31,.14);box-shadow:inset 0 0 0 1px rgba(255,104,31,.2)}
  .mobile-dock button.active i{color:#ff7c3b;filter:drop-shadow(0 0 7px rgba(255,104,31,.5))}
}
@media(max-width:570px){
  .login-card{background:rgba(22,22,26,.74);border-radius:24px}
  .header-actions{gap:5px}
  .header-actions .primary{width:38px;height:38px;padding:0;display:grid;place-items:center}
  .header-actions .icon-button{width:38px;height:38px}
  .header-actions .timer-button{display:none}
  .view-intro{align-items:flex-start;gap:10px}
  .view-tools{max-width:45%;overflow:auto}
  .daily-hero{padding:22px;border-radius:24px}
  .daily-hero h2{font-size:24px}
  .daily-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daily-kpis article:nth-child(5){grid-column:1/-1}
  .panel,.ops-section,.daily-focus,.daily-risks{border-radius:18px}
  dialog{width:calc(100% - 16px);border-radius:22px}
  .form-grid{padding:16px}
}

@keyframes ix-page-in{from{opacity:0;transform:translateY(14px) scale(.992);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes ix-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ix-toast{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ix-pulse{0%,100%{opacity:.75;box-shadow:0 0 8px #ff681f}50%{opacity:1;box-shadow:0 0 16px #ff681f,0 0 30px rgba(255,104,31,.45)}}
@keyframes ix-breathe{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}
@keyframes ix-orbit{from{transform:translate3d(-3vw,-2vh,0) scale(.9)}to{transform:translate3d(5vw,5vh,0) scale(1.15)}}

/* Staggered card entrances */
.client-grid>*,.project-grid>*,.daily-kpis>*,.kpis>*,.template-gallery>*,.signal-grid>*,.team-grid>*{animation:ix-card-in .48s cubic-bezier(.2,.8,.2,1) both}
.client-grid>*:nth-child(1),.project-grid>*:nth-child(1),.daily-kpis>*:nth-child(1),.kpis>*:nth-child(1),.template-gallery>*:nth-child(1),.signal-grid>*:nth-child(1),.team-grid>*:nth-child(1){animation-delay:.02s}
.client-grid>*:nth-child(2),.project-grid>*:nth-child(2),.daily-kpis>*:nth-child(2),.kpis>*:nth-child(2),.template-gallery>*:nth-child(2),.signal-grid>*:nth-child(2),.team-grid>*:nth-child(2){animation-delay:.06s}
.client-grid>*:nth-child(3),.project-grid>*:nth-child(3),.daily-kpis>*:nth-child(3),.kpis>*:nth-child(3),.template-gallery>*:nth-child(3),.signal-grid>*:nth-child(3),.team-grid>*:nth-child(3){animation-delay:.1s}
.client-grid>*:nth-child(4),.project-grid>*:nth-child(4),.daily-kpis>*:nth-child(4),.kpis>*:nth-child(4),.template-gallery>*:nth-child(4),.signal-grid>*:nth-child(4),.team-grid>*:nth-child(4){animation-delay:.14s}
.client-grid>*:nth-child(5),.project-grid>*:nth-child(5),.daily-kpis>*:nth-child(5),.kpis>*:nth-child(5),.template-gallery>*:nth-child(5),.signal-grid>*:nth-child(5),.team-grid>*:nth-child(5){animation-delay:.18s}
.client-grid>*:nth-child(n+6),.project-grid>*:nth-child(n+6),.daily-kpis>*:nth-child(n+6),.kpis>*:nth-child(n+6),.template-gallery>*:nth-child(n+6),.signal-grid>*:nth-child(n+6),.team-grid>*:nth-child(n+6){animation-delay:.22s}

/* Primary button shine sweep */
.primary,.login-card button{position:relative;overflow:hidden}
.primary::after,.login-card button::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-120%);
}
.primary:hover::after,.login-card button:hover::after{transform:translateX(120%);transition:transform .7s ease}

/* KPI emphasis glow */
.kpi.orange,.daily-hero aside strong{animation:ix-glow-breathe 4s ease-in-out infinite}

/* Nav active indicator glide */
.sidebar nav button{transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease}

@keyframes ix-card-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ix-glow-breathe{0%,100%{filter:drop-shadow(0 0 0 rgba(255,104,31,0))}50%{filter:drop-shadow(0 0 14px rgba(255,104,31,.4))}}

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