/* DualAI / Workspace. Shared visual layer, loaded after page styles.
   Geometry is decorative; operational state colors keep their meaning. */
:root {
  --premium-surface: linear-gradient(145deg, rgba(255,255,255,.035), transparent 65%), var(--bg-elevated);
  --premium-hairline: rgba(212,240,227,.09);
  --premium-jade: #a4e9c9;
  --premium-chrome: #d8e9df;
  --premium-glass: rgba(12,21,23,.86);
  --premium-ease: cubic-bezier(.2,.75,.25,1);
  --ui-sidebar-w: 244px;
  --ui-topbar-h: 72px;
}
[data-theme="light"] {
  --premium-surface: linear-gradient(145deg, rgba(255,255,255,.8), transparent 65%), var(--bg-elevated);
  --premium-hairline: rgba(28,62,45,.12);
  --premium-jade: #236346;
  --premium-chrome: #4b695b;
  --premium-glass: rgba(250,252,249,.88);
}
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-border); color: var(--text); }
.app-content.container { max-width: 1600px; width: 100%; padding: 32px clamp(20px,3vw,48px) 44px; }
.app-content { animation: premium-page-in 480ms var(--premium-ease) both; }
.app-sidebar { background: var(--premium-glass); border-color: var(--premium-hairline); z-index: 45; }
.app-brand { height: 96px; padding: 0 26px; gap: 12px; }
.app-brand-mark { width: 36px; height: 36px; object-fit: contain; padding: 5px; background: #17262a; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 16px #0003; }
.app-brand-name { font-size: 21px; letter-spacing: -.06em; font-weight: 700; }
.app-brand-sub { font-size: 9px; letter-spacing: .22em; color: var(--text-soft); margin-top: 5px; }
.app-nav { padding: 4px 16px 24px; gap: 5px; }
.app-nav-group-label { font-size: 9px; letter-spacing: .18em; padding: 0 14px; margin-top: 28px; margin-bottom: 8px; }
.app-nav-item { position: relative; min-height: 46px; padding: 11px 14px; gap: 12px; font-size: 12px; border: 1px solid transparent; border-radius: 12px; transition: background 180ms, color 180ms, border-color 180ms; }
.app-nav-item .ui-icon { width: 17px; height: 17px; opacity: .75; }
.app-nav-item[aria-current="page"] { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.app-nav-item[aria-current="page"]::after { content: ''; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; margin-left: auto; }
.app-nav-item[aria-current="page"] .ui-icon { opacity: 1; }
.app-nav-item:hover { background: var(--accent-bg); border-color: var(--border); }
.app-sidebar-foot { flex-direction: column; padding: 16px; border-color: var(--premium-hairline); gap: 14px; }
.premium-workspace { display: flex; align-items: center; gap: 10px; min-width: 0; }
.premium-workspace-mark { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; font-size: 13px; font-weight: 650; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--accent); }
.premium-workspace strong { display: block; font-size: 10px; font-weight: 600; }
.premium-workspace small { display: block; font-size: 9px; margin-top: 3px; color: var(--text-soft); }
.app-collapse-btn { font-size: 10px; color: var(--text-soft); align-self: flex-start; background: transparent; }
.app-collapse-btn:hover { background: var(--accent-bg); color: var(--accent); }
.app-shell[data-collapsed="true"] .premium-workspace { display: none; }
.app-shell[data-collapsed="true"] .app-nav { padding-inline: 8px; }
.app-shell[data-collapsed="true"] .app-nav-item::after { display: none; }
.app-shell[data-collapsed="true"] .app-sidebar-foot { padding: 10px; }
.app-topbar { padding: 0 clamp(20px,3vw,48px); background: var(--premium-glass); border-color: var(--premium-hairline); backdrop-filter: blur(18px); gap: 24px; }
.premium-breadcrumb { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 11px; }
.premium-breadcrumb span { color: var(--text-soft); }
.premium-breadcrumb .ui-icon { width: 12px; height: 12px; color: var(--text-soft); }
.premium-breadcrumb strong { font-weight: 550; }
.app-topbar .ui-search { margin-left: auto; width: 250px; flex-basis: 250px; }
.ui-search input { height: 38px; border-radius: 10px; background: var(--bg-elevated); font-size: 11px; border-color: var(--premium-hairline); }
.app-topbar-utils { gap: 8px; }
.app-account { border-left: 1px solid var(--border); padding-left: 14px; gap: 9px; }
.app-account .user-name { font-size: 11px; }
.avatar { border: 1px solid var(--accent-border); background: var(--accent-bg); color: var(--accent); box-shadow: inset 0 1px #fff1; }
.ui-icon-btn { border-radius: 10px; }
.premium-motion-toggle { color: var(--text-soft); }
.motion-play { display: none; }
.premium-motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.premium-motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.app-footer { border: 0; padding: 0 32px 22px; color: var(--text-soft); opacity: .8; font-size: 10px; }

/* One hero, two planes: operational context and a decorative glass prism. */
.premium-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 330px; align-items: center; min-height: 260px; gap: 20px; padding: 32px 36px; margin-bottom: 24px; border: 1px solid var(--premium-hairline); border-radius: 24px; background: radial-gradient(ellipse at 85% 25%, var(--accent-bg), transparent 65%), var(--premium-surface); box-shadow: inset 0 1px #ffffff08, 0 16px 40px #0000000a; }
.premium-hero::before { content: ''; position: absolute; top: -1px; left: 35px; width: 150px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-border), transparent); }
.premium-hero-copy { min-width: 0; position: relative; z-index: 2; }
.premium-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--accent); }
.premium-eyebrow > span { width: 13px; height: 1px; background: currentColor; }
.premium-hero .dash-date { font-size: 11px; margin-bottom: 7px; color: var(--text-soft); }
.premium-hero .dash-greet { font-size: clamp(26px,3vw,40px); font-weight: 550; letter-spacing: -.055em; line-height: 1.16; }
.premium-hero .dash-phrase { font-size: 12px; line-height: 1.8; margin-top: 10px; max-width: 52ch; }
.premium-hero .dash-actions { margin-top: 23px; }
.btn { min-height: 40px; padding: 9px 15px; font-size: 11px; font-weight: 600; border-radius: 10px; border-color: var(--border); box-shadow: inset 0 1px rgba(255,255,255,.04); transition: background 180ms, border-color 180ms, box-shadow 180ms; }
.btn:hover { border-color: var(--accent-border); box-shadow: 0 4px 12px #0002; }
.btn-primary { background: var(--primary); color: var(--primary-contrast); border-color: transparent; box-shadow: inset 0 1px #fff4, 0 3px 12px #a4e9c910; }
.btn-primary:hover { background: var(--primary-hover); color: var(--primary-contrast); }
.btn-danger { color: var(--danger); border-color: var(--danger-border); }
.btn:disabled { box-shadow: none; }
.btn .ui-icon { width: 14px; height: 14px; }
.ui-menu-list { border-radius: 12px; background: var(--bg-elevated); border-color: var(--border-strong); box-shadow: var(--shadow-md); }

/* Real CSS 3D geometry: six glass faces, suspended core, two orbit planes. */
.premium-scene { --prism-size: 98px; --prism-half: 49px; position: relative; height: 218px; width: 100%; perspective: 700px; pointer-events: none; isolation: isolate; }
.premium-scene-grid { position: absolute; inset: 40% 6% 10%; background-image: linear-gradient(var(--accent-border) 1px,transparent 1px),linear-gradient(90deg,var(--accent-border) 1px,transparent 1px); background-size: 24px 24px; transform: rotateX(65deg) rotateZ(-25deg); opacity: .19; mask-image: radial-gradient(ellipse,#000,transparent 70%); }
.premium-sculpture { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: var(--prism-size); height: var(--prism-size); transform-style: preserve-3d; }
.premium-sculpture-float { width: 100%; height: 100%; transform-style: preserve-3d; animation: premium-float 7s ease-in-out infinite; }
.premium-prism { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(36deg) rotateZ(-8deg); animation: premium-prism-turn 28s linear infinite; }
.premium-face { position: absolute; inset: 0; border: 1px solid rgba(180,245,215,.6); border-radius: 14px; background: linear-gradient(135deg,rgba(205,255,231,.21),rgba(112,205,161,.04) 55%,rgba(205,255,231,.14)); box-shadow: inset 0 0 20px rgba(164,233,201,.05); backface-visibility: visible; }
.premium-face::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(205,255,231,.10); border-radius: 7px; }
.premium-face-front { transform: translateZ(var(--prism-half)); }
.premium-face-back { transform: rotateY(180deg) translateZ(var(--prism-half)); }
.premium-face-right { transform: rotateY(90deg) translateZ(var(--prism-half)); }
.premium-face-left { transform: rotateY(-90deg) translateZ(var(--prism-half)); }
.premium-face-top { transform: rotateX(90deg) translateZ(var(--prism-half)); background-color: rgba(200,255,230,.08); }
.premium-face-bottom { transform: rotateX(-90deg) translateZ(var(--prism-half)); }
.premium-core { position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 28%,#f4fff8,#b4f1ce 22%,#428368 65%,#173c2e); box-shadow: 0 0 28px #a4e9c94d, inset -6px -8px 14px #102a2077; }
.premium-orbit { position: absolute; width: 244px; height: 244px; top: 44%; left: 50%; margin: -122px 0 0 -122px; border: 1px solid var(--accent-border); border-radius: 50%; transform-style: preserve-3d; }
.premium-orbit::after { content: ''; position: absolute; top: 31px; left: 30px; width: 5px; height: 5px; border-radius: 50%; background: var(--premium-chrome); box-shadow: 0 0 12px var(--accent-border); }
.premium-orbit-one { transform: rotateX(68deg) rotateY(-22deg) rotateZ(-18deg); }
.premium-orbit-two { width: 212px; height: 212px; margin: -106px 0 0 -106px; transform: rotateX(58deg) rotateY(38deg) rotateZ(46deg); border-color: var(--border); }
.premium-scene-star { position: absolute; width: 3px; height: 3px; background: var(--premium-chrome); border-radius: 50%; opacity: .7; }
.star-one { top: 26%; left: 15%; }.star-two { top: 15%; right: 24%; }.star-three { bottom: 26%; right: 16%; }
.premium-scene-caption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font: 8px var(--font-mono); color: var(--text-soft); }
[data-theme="light"] .premium-face { border-color: rgba(35,99,70,.4); background: linear-gradient(135deg,rgba(96,185,138,.25),rgba(112,205,161,.05) 55%,rgba(96,185,138,.17)); }
[data-theme="light"] .premium-face::after { border-color: rgba(35,99,70,.12); }

/* Shared surfaces: the same material across every CRM section. */
:is(.panel,.card,.dash-panel,.dash-kpi,.pw-panel,.pw-project-card,.team-card,.telemetry-card,.revenue-card,.form-card,.cap-col,.cap-card,.kanban-card,.ai-constellation) { background: var(--premium-surface); border-radius: 18px; box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.045); transition: border-color 200ms, box-shadow 200ms; }
:is(.panel,.card,.dash-panel,.dash-kpi,.pw-panel,.cap-col,.cap-card,.team-card,.telemetry-card,.revenue-card):hover { transform: none; }
:is(.dash-kpi,.pw-project-card,.team-card,.cap-card)[data-premium-tilt] { transform: perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform 220ms var(--premium-ease), border-color 200ms, box-shadow 200ms; }
:is(.dash-kpi,.pw-project-card,.team-card,.cap-card)[data-premium-tilt]:hover { border-color: var(--accent-border); box-shadow: var(--square-hover-shadow); }
.dash-kpis { gap: 14px; margin-bottom: 24px; }
.dash-kpi { padding: 20px 22px 18px; gap: 12px; min-height: 145px; }
.dash-kpi-label { font-size: 10px; letter-spacing: .02em; gap: 9px; }
.dash-kpi-label .ui-icon { color: var(--text-soft); }
.dash-kpi-value { font-size: 34px; font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }
.dash-kpi-value.is-na { font-size: 18px; letter-spacing: -.025em; }
.dash-kpi-foot { margin-top: auto; font-size: 10px; line-height: 1.65; }
.dash-cols { gap: 20px; margin-bottom: 24px; }
.dash-panel { padding: 24px; animation: none; }
.dash-panel-wide { margin-bottom: 24px; }
.dash-panel-head { margin-bottom: 20px; align-items: center; }
.dash-panel-head h2 { font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.dash-panel-head .dash-panel-cta { font-size: 10px; }
.dash-priority-item { background: var(--bg-sunken); border-radius: 12px; padding: 13px; }
.dash-priority-title { font-size: 12px; }
.dash-priority-meta,.dash-panel-note { font-size: 10px; }
.dash-client-card { background: var(--bg-sunken); border-radius: 14px; border-color: var(--border); padding: 18px; }
.job-rail-step { border-radius: 7px; }
.job-rail-step.is-current { background: var(--accent-bg); }
.job-rail-mark { height: 3px; }
.page-head,.pw-page-head { padding: 8px 0 24px; margin-bottom: 16px; border-bottom: 1px solid var(--premium-hairline); gap: 18px; }
.page-head h1,.pw-page-head h1 { font-size: clamp(27px,3vw,36px); font-weight: 550; letter-spacing: -.05em; line-height: 1.2; }
.page-head p,.pw-page-head p { font-size: 12px; margin-top: 8px; }
.page-head-actions { gap: 8px; }
.data-table { border: 1px solid var(--border); background: var(--bg-elevated); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.data-table thead th { background: var(--bg-sunken); font-size: 9px; text-transform: uppercase; font-weight: 600; letter-spacing: .09em; padding: 15px 18px; color: var(--text-soft); border-bottom: 1px solid var(--border); }
.data-table tbody td { padding: 18px; font-size: 12px; border-bottom: 1px solid var(--premium-hairline); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--accent-bg); }
.data-table .row-link-anchor { font-weight: 600; letter-spacing: -.015em; color: var(--text); }
.premium-client-identity { display: inline-flex; align-items: center; gap: 12px; }
.premium-client-monogram { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); }
.data-table .icon-btn { width: 30px; height: 30px; }
.badge,.status-badge,.ui-pill { border-radius: 7px; font-size: 10px; padding: 4px 8px; font-weight: 550; }
.status-badge { border: 1px solid var(--border); }
.tab-bar,.work-view-switch,.pw-tabs { gap: 4px; }
.tab-bar a,.pw-tabs a { font-size: 11px; padding: 12px 16px; }
.ui-input,.ui-select,input:not([type="checkbox"]):not([type="radio"]),select,textarea { border-radius: 10px; border-color: var(--border); font-family: var(--font-ui); }
.form-field label,.form-group label { font-size: 12px; }
.form-card,.form-grid,.sales-form { gap: 20px; }
.form-card { padding: 26px; }
.cuenta-input-col,.cuenta-preview-col { min-width: 0; }
.cuenta-input-col .form-input { min-width: 0; max-width: 100%; }
.work-cards,.todo-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.search-input { min-width: 0; }
.form-field input,.form-field select { min-height: 44px; }
input:focus-visible,textarea:focus-visible,select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.pw-hero { background: radial-gradient(ellipse at 100% 0%,var(--accent-bg),transparent 65%), var(--premium-surface); border-color: var(--accent-border); border-radius: 24px; }
.pw-hero h1 { font-weight: 550; }
.pw-phase-node { background: var(--premium-surface); }
.pw-phase-node[data-state="active"] { box-shadow: inset 0 1px var(--accent-border), 0 0 18px var(--accent-bg); }
.cap-board { margin-top: 24px; }
.cap-col { border: 1px solid var(--border); padding: 14px; }
.cap-col-head { padding: 8px 2px 16px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.cap-col-head h3 { font-size: 11px; }
.cap-count { font-size: 9px; border: 1px solid var(--border); background: var(--bg-sunken); }
.cap-card { background: var(--bg-sunken); border: 1px solid var(--border); padding: 15px; border-radius: 12px; }
.cap-card h4 { font-size: 12px; }.cap-origin,.cap-next { font-size: 10px; }
.cap-money { font-size: 14px; letter-spacing: -.025em; }
.cap-filter { font-size: 10px; border-radius: 8px; }
.cap-filter.is-on { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
.revenue-header { padding: 24px; }
.revenue-label { color: var(--text-soft); font-size: 9px; letter-spacing: .12em; }
.revenue-value { font-size: 27px; letter-spacing: -.05em; }
.team-card { padding: 22px; }.team-name { font-size: 15px; letter-spacing: -.025em; }
.team-avatar { background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent); border-radius: 14px; }
.gcal-toolbar { padding: 16px 0; }
.gcal-grid { border-radius: 16px; border-color: var(--border); }
.gcal-event { border-radius: 7px; box-shadow: inset 0 1px #ffffff20; }
.kanban-column { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 16px; }
.kanban-card { border-color: var(--border); }
.ux-state { background: var(--premium-surface); border-radius: 16px; }
.ux-state-title { letter-spacing: -.02em; }
.ux-confirm-dialog { background: var(--bg-elevated); border-radius: 20px; border-color: var(--border-strong); box-shadow: 0 24px 80px #0005; }
.ux-toast { background: var(--bg-elevated); border-radius: 14px; }

/* HAL remains an explicit operational state, independent of decoration. */
.hal-chat-toggle[data-link="on"] { color: var(--accent); box-shadow: 0 0 0 1px var(--accent-border); }
.hal-chat-toggle[data-link="off"] { opacity: .72; box-shadow: none; }
.hal-chat-panel { width: min(420px,calc(100vw - 24px)); height: min(640px,calc(100vh - 108px)); border-radius: 22px; border: 1px solid var(--border-strong); background: var(--premium-glass); backdrop-filter: blur(18px); box-shadow: 0 24px 60px #0005; transform-origin: bottom right; transform: translateY(12px) scale(.96); transition: transform 260ms var(--premium-ease),opacity 200ms; }
.hal-chat-panel.open { transform: translateY(0) scale(1); }
.hal-chat-header { background: transparent; padding: 16px; }
.hal-chat-header-sub[id="hal-link"]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--text-soft); }
.hal-chat-panel[data-link="on"] #hal-link::before { background: var(--success); }
.hal-chat-panel[data-link="off"] #hal-link::before { background: var(--danger); }
.hal-chat-messages { gap: 12px; padding: 8px 14px 14px; }
.hal-chat-msg.user .hal-chat-bubble,.hal-chat-bubble.user { background: var(--primary); color: var(--primary-contrast); border-radius: 16px 16px 4px 16px; }
.hal-chat-msg.hal .hal-chat-bubble,.hal-chat-bubble.hal { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; }
.hal-typing { display: flex; gap: 5px; padding: 12px 14px; }
.hal-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft); animation: hal-dot 1s ease-in-out infinite; }
.hal-typing span:nth-child(2) { animation-delay: 150ms; }.hal-typing span:nth-child(3) { animation-delay: 300ms; }
.hal-chat-input-form { margin: 0 10px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 6px 6px 6px 12px; }
.hal-chat-input-form textarea { background: transparent; color: var(--text); border: 0; }
.hal-chat-orbs-wrap,.hal-orbs-global { display: none !important; }
.ai-constellation { min-height: 112px; margin-bottom: 1rem; border: 1px solid var(--border); overflow: hidden; }
.ai-link { display: flex; align-items: center; gap: 14px; min-height: 112px; padding: 20px; }
.ai-link-mark { width: 42px; height: 42px; object-fit: contain; background: #17262a; border-radius: 12px; padding: 6px; }
.ai-link-kicker { margin: 0 0 5px; color: var(--text-soft); font-size: 9px; letter-spacing: .12em; }
.ai-constellation-note { position: static; margin: 0; color: var(--text); font-size: 13px; }
.ai-constellation[data-hal="off"] .ai-link-mark { filter: grayscale(1); opacity: .55; }

/* Sign in is part of the same experience. */
.auth-body { background: var(--canvas); min-height: 100svh; padding: 0; }
.premium-auth-motion { position: fixed; top: 16px; right: 16px; z-index: 10; }
.auth-wrapper { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); max-width: 1120px; width: calc(100% - 64px); min-height: 100svh; margin: 0 auto; padding: 56px 0; gap: 100px; align-items: center; }
.premium-auth-story { min-width: 0; }
.premium-auth-story h2 { font-size: clamp(34px,4.5vw,56px); line-height: 1.13; font-weight: 500; letter-spacing: -.06em; margin: 24px 0; }
.premium-auth-story h2 span { color: var(--text-soft); }
.premium-auth-story > p:not(.premium-eyebrow) { color: var(--text-muted); font-size: 13px; line-height: 1.9; }
.premium-auth-story .premium-scene { height: 300px; margin: 20px 0; --prism-size: 118px; --prism-half: 59px; }
.premium-auth-story .premium-scene-caption { display: none; }
.premium-auth-domains { display: flex; gap: 24px; font-size: 9px; color: var(--text-soft); padding-top: 22px; border-top: 1px solid var(--border); }
.auth-card-premium { width: 100%; max-width: 420px; padding: 38px; background: var(--premium-surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 24px 60px #00000018,inset 0 1px #ffffff08; }
.auth-card .auth-brand { margin-bottom: 45px; flex-wrap: wrap; gap: 10px; }
.auth-brand-name { font-size: 21px; letter-spacing: -.055em; }
.auth-brand-suffix { font-size: 10px; }
.auth-card .premium-eyebrow { font-size: 8px; margin-bottom: 14px; }
.auth-card.auth-card-premium h1 { font-size: 29px; font-weight: 500; letter-spacing: -.045em; margin-bottom: 10px; }
.auth-subtitle { font-size: 12px; line-height: 1.7; }
.auth-card .auth-form { padding: 0; margin-top: 30px; border: 0; background: transparent; box-shadow: none; }
.auth-form .form-field { margin-bottom: 20px; }
.auth-form .btn { min-height: 46px; }
.auth-footer-note { font-size: 10px; margin-top: 26px; text-align: center; }

@keyframes premium-prism-turn { from { transform: rotateX(-24deg) rotateY(36deg) rotateZ(-8deg); } to { transform: rotateX(-24deg) rotateY(396deg) rotateZ(-8deg); } }
@keyframes premium-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes premium-page-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hal-dot { 0%,80%,100% { opacity: .35; } 40% { opacity: 1; } }
[data-motion="paused"] *,[data-motion="paused"] *::before,[data-motion="paused"] *::after { animation-play-state: paused !important; transition: none !important; }
[data-motion="paused"] [data-premium-tilt] { transform: none !important; }
[data-motion="paused"] .app-content { animation: none !important; }
[data-scene-paused="true"] * { animation-play-state: paused !important; }

@media (min-width: 1800px) { .app-content.container { margin-inline: auto; } }
@media (max-width: 1200px) {
  .premium-breadcrumb { display: none; }
  .app-topbar .ui-search { margin-left: 0; margin-right: auto; }
  .premium-hero { grid-template-columns: 1fr 260px; padding: 28px; }
  .premium-auth-domains { gap: 14px; }
  .auth-wrapper { gap: 50px; }
}
@media (max-width: 860px) {
  .app-content.container { padding: 22px 20px 130px; }
  .app-sidebar { display: none; }
  .app-topbar { height: 62px; padding: 0 20px; gap: 12px; }
  .premium-hero { padding: 26px; grid-template-columns: 1fr 210px; min-height: 240px; }
  .premium-scene { --prism-size: 78px; --prism-half: 39px; }
  .premium-orbit { width: 184px; height: 184px; margin: -92px 0 0 -92px; }
  .premium-orbit-two { width: 162px; height: 162px; margin: -81px 0 0 -81px; }
  .premium-scene-caption { font-size: 6px; }
  .dash-kpis { gap: 12px; }
  .dash-kpi { padding: 18px; }
  .app-mobile-nav { background: var(--premium-glass); backdrop-filter: blur(18px); border-color: var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .app-mobile-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-bg); border-radius: 10px; }
  .app-drawer { background: var(--bg-elevated); border-color: var(--border); border-radius: 22px 22px 0 0; }
  .app-drawer a { border-radius: 10px; }
  .auth-wrapper { gap: 30px; width: calc(100% - 40px); }
  .premium-auth-story h2 { font-size: 34px; }
  .premium-auth-domains { flex-direction: column; gap: 10px; }
  .auth-card-premium { padding: 26px; }
}
@media (max-width: 600px) {
  .app-content.container { padding: 18px 16px 130px; }
  .app-topbar { padding: 0 16px; gap: 8px; }
  .app-topbar-utils { gap: 2px; }
  .app-topbar .ui-search { min-width: 0; flex: 1; width: auto; }
  .app-topbar .ui-search input { font-size: 10px; padding-right: 8px; }
  .app-account { border: 0; padding-left: 4px; }
  .app-topbar-utils .ui-icon-btn { width: 32px; min-width: 32px; height: 36px; }
  .premium-hero { grid-template-columns: 1fr; gap: 0; padding: 24px; border-radius: 20px; }
  .premium-hero .premium-scene { height: 150px; margin-top: 16px; }
  .premium-hero .premium-scene-caption { bottom: -1px; font-size: 7px; }
  .premium-hero .premium-eyebrow { font-size: 8px; margin-bottom: 18px; }
  .premium-hero .dash-greet { font-size: 29px; }
  .premium-hero .dash-phrase { font-size: 11px; }
  .premium-hero .dash-actions { margin-top: 18px; }
  .dash-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
  .dash-kpi { padding: 16px; min-height: 143px; border-radius: 14px; }
  .dash-kpi-value { font-size: 29px; }.dash-kpi-value.is-na { font-size: 16px; }
  .dash-kpi-label { font-size: 9px; gap: 6px; }
  .dash-kpi-foot { font-size: 9px; }.dash-kpi-foot a { white-space: normal; }
  .dash-cols { gap: 16px; margin-bottom: 18px; }
  .dash-panel { padding: 18px; border-radius: 16px; }
  .page-head,.pw-page-head { padding-bottom: 18px; }
  .page-head h1,.pw-page-head h1 { font-size: 29px; }
  .data-table-cards { background: transparent; border: 0; overflow: visible; }
  .data-table-cards tbody tr { background: var(--premium-surface); border-color: var(--border); border-radius: 16px; margin-bottom: 12px; }
  .data-table-cards tbody td { padding: 10px 14px; }
  .data-table-cards tbody td:first-child { padding-top: 16px; }
  .data-table-cards tbody td:last-child { padding-bottom: 16px; }
  .form-card { padding: 20px; }
  .inline-form-row-add { flex-wrap: wrap; }
  .inline-form-row-add .input-grow { width: 100%; flex-basis: 100%; }
  .cuenta-layout { grid-template-columns: minmax(0,1fr); }
  .auth-wrapper { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 32px 0; }
  .premium-auth-story { width: 100%; max-width: 420px; }
  .premium-auth-story > .premium-eyebrow { margin: 0; }
  .premium-auth-story h2 { font-size: 31px; margin: 18px 0 0; }
  .premium-auth-story > p:not(.premium-eyebrow),.premium-auth-story .premium-scene,.premium-auth-domains { display: none; }
  .auth-card-premium { padding: 28px; border-radius: 20px; }
  .auth-card .auth-brand { margin-bottom: 30px; }
}
@media (pointer: coarse) {
  .app-topbar-utils .ui-icon-btn { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-premium-tilt] { transform: none !important; }
}
@media print {
  .premium-scene,.premium-motion-toggle,.premium-auth-story { display: none; }
  .app-content { animation: none; }
}

/* Scroll-reveal transforms must not create page-level horizontal scroll.
   clip (not hidden) keeps position: sticky working. */
.app-content { overflow-x: clip; }