/* ATELIER / X-Tour — visual composition, not a data or routing layer. */
:root{--xt-bg:#090b11;--xt-rail:#10121c;--xt-surface:#141823;--xt-surface-raised:#1b2030;--xt-surface-inset:#0e111b;--xt-line:#c4c7f01b;--xt-line-strong:#c4c7f034;--xt-text:#f4f4fc;--xt-muted:#a8acbf;--xt-subtle:#81869e;--xt-lime:#c5ff69;--xt-cyan:#65e5df;--xt-violet:#a68aff;--xt-radius:22px;--xt-radius-small:12px;--xt-shadow:0 16px 48px #00000020,inset 0 1px #ffffff06}
body:has(.app-shell){background:#090b11}
#app .app-shell{background:radial-gradient(ellipse at 82% 0,#6a42ca14,transparent 42%),#090b11}
#app .app-shell .content{background:transparent;padding:28px clamp(24px,3vw,48px) 50px}
#app .app-shell .sidebar{background:linear-gradient(175deg,#1a1725,#10131c 45%,#10121a);border:1px solid #d4caff1d;box-shadow:0 20px 65px #0003}
#app .app-shell .sidebar::after{height:0}
#app .app-shell .sidebar .logo{min-height:104px;padding:22px 12px;border:0;margin:0 0 8px}
#app .app-shell .sidebar .logo img{max-height:68px;object-fit:contain}
#app .app-shell .sidebar .nav{gap:4px}
#app .app-shell .sidebar .nav-label{font:700 9px/1.5 Manrope,system-ui,sans-serif;letter-spacing:.14em;color:#777d96;margin:18px 0 9px}
#app .app-shell .sidebar .nav button{min-height:42px;border-radius:12px;padding:10px 12px;color:#acafc3}
#app .app-shell .sidebar .nav .menu-standard-label{font-size:12px;font-weight:650!important}
#app .app-shell .sidebar .nav button:is(.active,[aria-current="page"]){color:#e5dbff;background:linear-gradient(100deg,#9065ff36,#9065ff13);border:1px solid #a68aff45;box-shadow:inset 0 1px #cfbcff1f,0 4px 20px #9065ff0b}
#app .app-shell .sidebar .nav button.active .menu-standard-label{color:#eee7ff}
#app .app-shell .sidebar .nav button.active .menu-standard-icon{color:#ba9fff;filter:drop-shadow(0 0 5px #aa7cff50)}
#app .app-shell .sidebar .account-profile{background:#181b27;border-color:#ffffff0d;border-radius:15px;padding:12px 9px}
#app .app-shell .sidebar .account-profile .avatar{background:linear-gradient(140deg,#c5ff6926,#65e5df0d);border-radius:12px;color:#d4ff9c}
#app .app-shell .sidebar .platform-brand{padding-top:18px;opacity:.8}
#app .app-shell .topbar{border:0;padding-bottom:0;margin-bottom:28px;min-height:62px}
#app .app-shell .topbar::after{display:none}
#app .app-shell .topbar h1{text-transform:none!important;font-size:clamp(26px,2.2vw,34px);letter-spacing:-.045em;font-weight:800;line-height:1.18}
#app .app-shell .topbar p{font:500 12px/1.5 Manrope,system-ui,sans-serif;letter-spacing:0;color:#9196ae;margin-top:7px}
#app .app-shell .header-search{background:#141721;border:1px solid #b0a7ef20;border-radius:14px;box-shadow:inset 0 1px #fff03;padding-inline:5px}
#app .app-shell .header-search>span{color:#a68aff}
#app .app-shell .header-search input{background:transparent!important;font-size:12px;border:0!important;box-shadow:none!important}
#app .app-shell .header-search:focus-within{border-color:#ac89ff80;box-shadow:0 0 0 4px #a68aff0e}
#app .app-shell .header-results{background:#181b2b;border:1px solid #a68aff40;box-shadow:0 22px 55px #0007}
#app .app-shell .panel-head h2{font-size:17px;letter-spacing:-.035em;font-weight:800}
#app .app-shell :is(.glass.panel,.glass.metric,.master-banner,.social-card,.drive-banner){border-radius:22px;background:linear-gradient(145deg,#1a1e2a,#121620);border:1px solid #bfc5ef1c;box-shadow:inset 0 1px #fff04,0 12px 40px #0002}
#app .app-shell button.primary,body:has(.app-shell)>dialog button.primary{border-radius:12px;background:linear-gradient(135deg,#d9ff9a,#b7f456);border:1px solid #d5ff9e;color:#17210c;box-shadow:0 5px 18px #b9ff5514,inset 0 1px #ffffffe0;min-height:44px;font-weight:800}
#app .app-shell :is(.op-controls,.panel-head,.toolbar,.modal-actions)>button:not(.primary):not(.danger),#app .app-shell .icon-button{border-radius:12px;background:#202433;border:1px solid #bbc4ee24;color:#d6d9ec;box-shadow:inset 0 1px #ffffff05}
#app .app-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea),body:has(.app-shell)>dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea){background-color:#10131e;border-color:#b8bef031;border-radius:12px;color:#f1f0fa;box-shadow:inset 0 2px 5px #0001}
#app .app-shell :is(input,textarea)::placeholder,body:has(.app-shell)>dialog :is(input,textarea)::placeholder{color:#858ba5}
#app .app-shell :is(input,select,textarea):focus-visible,body:has(.app-shell)>dialog :is(input,select,textarea):focus-visible{outline:0;border-color:#b294ff;box-shadow:0 0 0 4px #a68aff15}
#app .app-shell :is(button,a,[role="button"],summary):focus-visible,body:has(.app-shell)>dialog :is(button,a,summary):focus-visible{outline:2px solid #c0a9ff;outline-offset:4px}
#app .app-shell label{color:#c4c7db}
body:has(.app-shell)>dialog.op-dialog{background:radial-gradient(ellipse at 90% 0,#a16aff13,transparent 40%),#141722;border:1px solid #b8a7f447;border-radius:24px;box-shadow:0 35px 120px #000b,inset 0 1px #ffffff0d}
body:has(.app-shell)>dialog::backdrop{background:#05060bbc;backdrop-filter:blur(12px)}
body:has(.app-shell)>dialog.op-dialog :is(fieldset,.repeat-card,.staff-agreement){background:#0d101967;border-color:#c0b8ee20;border-radius:16px}
body:has(.app-shell)>dialog.op-dialog .sticky-save{background:#141722f5}

/* A deliberate entry point instead of an undifferentiated stack of rectangles. */
.atelier-welcome{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;margin-bottom:22px;padding:30px 32px;border:1px solid #a68aff42;border-radius:24px;background:radial-gradient(ellipse at 95% 20%,#8658ef2c,transparent 58%),linear-gradient(115deg,#1d2033,#171925 75%);box-shadow:0 18px 55px #0002,inset 0 1px #dfd3ff14}
.atelier-welcome:after{content:"";position:absolute;right:-90px;top:-145px;width:410px;height:410px;border:1px solid #b591ff1f;border-radius:50%;box-shadow:0 0 0 42px #b591ff06,0 0 0 84px #b591ff04;z-index:-1;pointer-events:none}
.atelier-welcome-kicker{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.18em;font-weight:800;color:#c1a7ff;margin:0 0 12px}
.atelier-welcome-kicker svg{width:16px;height:16px}
#app .atelier-welcome h2{margin:0;font-size:clamp(26px,2.65vw,38px);line-height:1.18;letter-spacing:-.05em;color:#f5f2ff;font-weight:800}
.atelier-welcome p:not(.atelier-welcome-kicker){font-size:12px;color:#a9adc5;line-height:1.7;margin:10px 0 0}
.atelier-welcome-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0}
.atelier-date{display:flex;gap:8px;align-items:center;color:#c7c4dd;font-size:11px;white-space:nowrap}
.atelier-date svg{width:14px;height:14px;color:#bba1ff}
.atelier-shortcuts{display:flex;gap:9px}
#app .atelier-shortcuts button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:10px 17px;border:1px solid #b198ec44;border-radius:12px;background:#ab8bf015;color:#e5d9ff;font-size:12px;font-weight:700}
#app .atelier-shortcuts button:first-child{background:#d6ffad;border-color:#d6ffad;color:#1b2814}
.atelier-shortcuts svg{width:16px;height:16px}

/* Dashboard: distinct semantic colors, icon tiles, tighter quantitative rhythm. */
#app .app-shell .refined-dashboard :is(.op-stats,.income-and-volume,.dashboard-agenda-pair,.op-two){gap:18px}
#app .app-shell .refined-dashboard .op-stats .metric{position:relative;min-height:152px;padding:22px 22px 18px!important;border-radius:20px;background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--metric-accent,#a68aff) 10%,transparent),transparent 80%),#151924;border:1px solid #cad0fa20;box-shadow:inset 0 1px #fff04}
#app .app-shell .refined-dashboard .metric::before{display:none}
#app .app-shell .refined-dashboard .metric-label{display:block;max-width:calc(100% - 28px);font:600 12px/1.5 Manrope,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#b9bed2!important}
#app .app-shell .refined-dashboard .metric>strong{display:block;margin:15px 0 7px;font-size:38px!important;line-height:1;font-weight:700;letter-spacing:-.055em;color:var(--metric-accent,#f0effb)!important}
#app .app-shell .refined-dashboard .metric>small{color:#8f95ad;font-size:10px}
.atelier-metric-icon{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:29px;height:29px;color:var(--metric-accent,#a68aff);background:color-mix(in srgb,var(--metric-accent,#a68aff) 9%,transparent);border:1px solid color-mix(in srgb,var(--metric-accent,#a68aff) 21%,transparent);border-radius:9px}
.atelier-metric-icon svg{width:15px;height:15px}
#app .app-shell .refined-dashboard :is(.income-redesign,.monthly-show-metrics,.dashboard-rail,.tour-timeline,.request-summary,.dashboard-brazil-map){border:1px solid #c5cafa1f;border-radius:22px;background:#141823;box-shadow:0 12px 40px #0002}
#app .app-shell .refined-dashboard .income-and-volume>.income-redesign{background:radial-gradient(ellipse at 0 0,#a887ff14,transparent 70%),#151824!important}
#app .app-shell .refined-dashboard .income-total .revenue-value{color:#edf8de;font-size:clamp(30px,3.1vw,46px);letter-spacing:-.05em}
#app .app-shell .refined-dashboard .revenue-legend>span{background:#1d2230;border:1px solid #c4cafa18;border-radius:13px}
#app .app-shell .refined-dashboard .monthly-metrics-scroll{border-radius:14px;background:#0c1019;border-color:#ffffff09}
#app .app-shell .refined-dashboard .monthly-show-metrics th{background:#202337;color:#abb0ca}
#app .app-shell .refined-dashboard .monthly-show-metrics td{border-color:#d5ceff08;font-variant-numeric:tabular-nums}
#app .app-shell .refined-dashboard .vertical-rail .op-event{background:#1a1e2b;border:1px solid #c4cafa18;border-radius:14px;padding:14px;box-shadow:none}
#app .app-shell .refined-dashboard .date-chip{border:1px solid #a98af044;border-radius:12px;background:linear-gradient(160deg,#a68aff20,#a68aff0c);color:#d1bfff}
#app .app-shell .refined-dashboard .event-title{font-weight:750;color:#eceaf8}
#app .app-shell .refined-dashboard .panel-head{padding-bottom:17px;border-bottom:1px solid #b8c4ee12}
#app .app-shell .refined-dashboard .panel-head button{background:transparent;border:1px solid #b6a3ed25;color:#c8b2f9;border-radius:10px;font-size:10px;min-height:34px}
#app .app-shell .refined-dashboard .tour-stop{border:1px solid #b5a6f22a;background:linear-gradient(150deg,#222239,#161a27);border-radius:16px}
#app .app-shell .refined-dashboard .brazil-map-heading{background:linear-gradient(105deg,#202437,#161d2c);border-bottom:1px solid #ad92ff20}

/* Login belongs to the same product language. */
#app .auth-shell{background:radial-gradient(ellipse at 12% 45%,#7043d91d,transparent 48%),#090b11}
#app .auth-card{background:linear-gradient(140deg,#1f2130e8,#121622f0);border:1px solid #bb9cff38;border-radius:26px;box-shadow:0 35px 100px #0006}
#app .auth-card input{border-radius:13px;background:#0c101a;border:1px solid #bda7eb35;min-height:50px}
#app .auth-copy h1{letter-spacing:-.06em}
#app .auth-copy h1 i{color:#be9fff}
#app .auth-card button.primary{border-radius:13px;background:linear-gradient(120deg,#dbffa7,#bdff67);color:#17230d;min-height:50px}

@media(min-width:981px){
 #app .app-shell:not(.menu-compact)>.sidebar{top:14px;bottom:14px;left:14px;width:228px;height:calc(100dvh - 28px);border-radius:22px;padding:12px 10px 16px}
 #app .app-shell:not(.menu-compact)>.content{margin-left:254px;width:calc(100% - 254px)}
 #app .app-shell.menu-compact>.sidebar{background:#11141f;border-right:1px solid #c6b0ff25}
}
@media(max-width:1100px){.atelier-welcome{padding:24px;gap:22px}.atelier-welcome h2{max-width:450px}.atelier-welcome-actions{align-items:flex-start}.atelier-shortcuts{flex-wrap:wrap}.atelier-shortcuts button{padding:10px 12px!important}}
@media(max-width:980px){
 #app .app-shell .content{padding:24px 22px 40px}
 #app .app-shell>.sidebar{left:0;top:0;bottom:0;height:100dvh;border-radius:0 22px 22px 0;padding-top:65px}
 #app .app-shell .mobile-menu-toggle{background:#211e33;border-color:#ae8bec3c;border-radius:12px}
 .atelier-welcome{align-items:flex-start;flex-direction:column;gap:20px}
 .atelier-welcome-actions{flex-direction:row;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap}
}
@media(max-width:600px){
 #app .app-shell .content{padding:22px 16px 32px}
 #app .app-shell .topbar{margin-bottom:22px;gap:18px}
 #app .app-shell .topbar h1{font-size:26px}
 #app .app-shell .topbar p{font-size:11px}
 .atelier-welcome{padding:23px 21px;border-radius:21px;margin-bottom:16px}
 #app .atelier-welcome h2{font-size:29px}
 .atelier-welcome-actions{gap:15px}
 .atelier-welcome p:not(.atelier-welcome-kicker){font-size:12px;max-width:270px}
 #app .atelier-shortcuts button{min-height:44px;padding:10px 14px!important}
 #app .app-shell .refined-dashboard .op-stats{gap:11px}
 #app .app-shell .refined-dashboard .op-stats .metric{padding:18px 15px 15px!important;min-height:149px;border-radius:18px}
 #app .app-shell .refined-dashboard .metric-label{font-size:11px!important;max-width:calc(100% - 14px);min-height:33px}
 #app .app-shell .refined-dashboard .metric>strong{font-size:33px!important;margin:10px 0 8px}
 #app .app-shell .refined-dashboard .metric>small{font-size:10px;line-height:1.45;display:block}
 .atelier-metric-icon{width:21px;height:21px;right:9px;top:12px;border-radius:7px}.atelier-metric-icon svg{width:12px;height:12px}
 #app .app-shell :is(.glass.panel,.glass.metric){border-radius:20px}
 #app .app-shell :is(input,select,textarea),body:has(.app-shell)>dialog :is(input,select,textarea){font-size:16px}
 body:has(.app-shell)>dialog.op-dialog{border-radius:20px}
}
@media(hover:hover) and (pointer:fine){
 #app .app-shell .sidebar .nav button:not(.active):hover{color:#e4ddfa;background:#a68aff0c;border-color:#a68aff20}
 #app .app-shell button.primary:hover{background:#ddffae;box-shadow:0 5px 22px #b8ff5323}
 #app .atelier-shortcuts button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0003}
 #app .app-shell .refined-dashboard .vertical-rail .op-event:hover{border-color:#aa88ed55;background:#23253a}
}
@media(prefers-reduced-motion:no-preference){.atelier-welcome{animation:atelier-arrive .4s ease both}@keyframes atelier-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}
