/* Interior surface system. Explicitly excluded from the Home by the PHP shell.
   Keep border widths for layout; remove only decorative frames. Product colors,
   selected states, error states and keyboard focus retain their own meaning. */
html:root.cm-interior-surfaces{--cm-interior-card-bg:linear-gradient(145deg,rgba(27,31,40,.82),rgba(19,22,29,.76));--cm-interior-card-shadow:0 12px 32px rgba(0,0,0,.2);--cm-interior-float-bg:linear-gradient(145deg,rgba(29,34,44,.98),rgba(16,20,27,.98));--cm-interior-float-shadow:0 24px 70px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.25)}
/* Card patterns used in the public pages, account, support and Studio. */
html:root.cm-interior-surfaces :is(div,section,article,aside,form):is(.bg-card,.bg-card\/50,.bg-card\/70,.bg-black\/15,.bg-black\/20).border:is(.rounded-lg,.rounded-xl,.rounded-2xl),
html:root.cm-interior-surfaces :is(.cm-plan-card,.review-card,.blog-card,.cm-product-frame,.cm-editorial-cover,.pr-finder-panel,.pr-comparison-scroll,.cm-social,.cm-plan,.studio-card,[data-slot="card"]){border-color:transparent!important;background:var(--cm-interior-card-bg)!important;box-shadow:var(--cm-interior-card-shadow)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html:root.cm-interior-surfaces :is(.cm-plan-card,.review-card,.blog-card,.cm-product-frame):hover{border-color:transparent!important;box-shadow:0 18px 40px #0004!important}
/* Price recommendation stays legible through its color and top accent. */
html:root.cm-interior-surfaces .cm-plan-popular{background:linear-gradient(145deg,#06384a99,#12202cbb)!important;box-shadow:0 18px 45px #00192355!important}
html:root.cm-interior-surfaces .cm-plan-popular:before{background:linear-gradient(90deg,transparent,#00baff,transparent)}
/* Floating layers: shadows and an opaque glass surface replace the light rim. */
html:root.cm-interior-surfaces :is(#language-menu,#mobile-menu,.popup-content,[role="dialog"],[role="alertdialog"],[role="menu"],[role="listbox"],[data-slot="popover-content"],[data-slot="dropdown-menu-content"],.cm-comparison-tooltip),
html:root.cm-interior-surfaces .review-modal>div,
html:root.cm-interior-surfaces [data-radix-popper-content-wrapper]>div{border-color:transparent!important;background:var(--cm-interior-float-bg)!important;box-shadow:var(--cm-interior-float-shadow)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
html:root.cm-interior-surfaces #language-menu{border-radius:14px;padding:6px;min-width:170px}
html:root.cm-interior-surfaces #language-menu a{min-height:40px;padding-inline:12px;border-radius:8px;color:#d6e0eb;transition:background .18s,color .18s}
html:root.cm-interior-surfaces #language-menu a:hover{background:#00baff14;color:#fff}
html:root.cm-interior-surfaces #language-menu a[aria-current],html:root.cm-interior-surfaces #language-menu a:has(svg){color:#00baff}
html:root.cm-interior-surfaces :is(.popup-content,[role="dialog"],.review-modal>div){border-radius:18px!important}
/* Compact segmented controls and neutral action buttons. */
html:root.cm-interior-surfaces :is(.pr-period,.cm-support-page [role="tablist"]){border-color:transparent!important;background:#080d1577;box-shadow:none}
html:root.cm-interior-surfaces :is(button,a).border:is(.border-border,.border-gray-700,.border-border\/50){border-color:transparent;background-color:#ffffff07;box-shadow:none}
html:root.cm-interior-surfaces :is(button,a).border:is(.border-border,.border-gray-700,.border-border\/50):hover{background-color:#ffffff0c}
/* Inputs remain distinct as recessed surfaces, with visible focus on interaction. */
html:root.cm-interior-surfaces :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),textarea,select){border-color:transparent!important;background-color:#080d16b8!important;box-shadow:inset 0 1px 3px #0003!important}
html:root.cm-interior-surfaces :is(input,textarea,select):focus-visible{outline:2px solid #00baff!important;outline-offset:2px;box-shadow:0 0 0 4px #00baff14!important}
html:root.cm-interior-surfaces :is(input,textarea,select)[aria-invalid="true"]{outline:2px solid #ef4444!important;outline-offset:2px}
html:root.cm-interior-surfaces :is(button,a,[tabindex]):focus-visible{outline:2px solid #00baff;outline-offset:3px}
/* Local support styles otherwise restore the old outline after the global shell. */
html:root.cm-interior-surfaces .cm-support-page :is(#newticket,#mytickets) .bg-card\/50{border-color:transparent!important;background:var(--cm-interior-card-bg)!important;box-shadow:var(--cm-interior-card-shadow)!important}
html:root.cm-interior-surfaces .cm-support-page .cols>div{border-radius:16px}
html:root.cm-interior-surfaces .cm-support-page .cols :is(a,button).border{border-color:transparent!important;background:#ffffff07}
html:root.cm-interior-surfaces .cm-support-page .cols :is(a,button).border:hover{background:#ffffff0e}
html:root.cm-interior-surfaces .pr-page .pr-quiz-choice{border-color:transparent;background:#ffffff04}
html:root.cm-interior-surfaces .pr-page .pr-quiz-choice:has(input:checked){border-color:transparent;background:#00baff13;box-shadow:inset 3px 0 #00baff}
@media(prefers-reduced-transparency:reduce){html:root.cm-interior-surfaces{--cm-interior-card-bg:linear-gradient(#1a1e26,#151820);--cm-interior-float-bg:linear-gradient(#1d222c,#10141b)}}
/* Remaining shared patterns (profile menu, feature journeys and onboarding). */
html:root.cm-interior-surfaces :is(#dropdownMenu,.blog-search-panel,.cm-story-journey,#cm-prereg .cm-panel,#cm-prereg .cm-table-scroll){border-color:transparent!important;background:var(--cm-interior-card-bg)!important;box-shadow:var(--cm-interior-card-shadow)!important}
html:root.cm-interior-surfaces #dropdownMenu{background:var(--cm-interior-float-bg)!important;box-shadow:var(--cm-interior-float-shadow)!important;border-radius:14px}
html:root.cm-interior-surfaces #cm-prereg .cm-plan:has(input:checked){background:linear-gradient(145deg,#06384a99,#12202cbb)!important;box-shadow:inset 0 3px #00baff,var(--cm-interior-card-shadow)!important}
html:root.cm-interior-surfaces #cm-prereg :is(.cm-nick,.cm-secondary,.cm-plan-choice){border-color:transparent;background-color:#080d1577}
html:root.cm-interior-surfaces #cm-prereg .cm-nick:focus-within{outline:2px solid #00baff;outline-offset:2px}
/* Illustration windows keep their feature-specific colors and device geometry. */
html:root.cm-interior-surfaces :is(.pf-window,.pf-floating-note,.pf-playground,.tg-window,.tg-verification,.tg-member-chip,.tg-capabilities article,.cm-editorial-dashboard){border-color:transparent!important;box-shadow:var(--cm-interior-card-shadow)!important}
html:root.cm-interior-surfaces .pr-page .cm-plan-card :is(button[type=submit],a){border-color:transparent!important}
html:root.cm-interior-surfaces body .pr-page .cm-plan-popular{background:linear-gradient(145deg,#06384a99,#12202cbb)!important;box-shadow:0 18px 45px #00192355!important}

/* Compound fields own one focus indicator; their input has no second frame. */
html:root.cm-interior-surfaces #cm-prereg .cm-nick input,
html:root.cm-interior-surfaces #cm-prereg .cm-nick input:focus,
html:root.cm-interior-surfaces #cm-prereg .cm-nick input:focus-visible{border:0!important;border-radius:0!important;background:transparent!important;background-color:transparent!important;outline:none!important;box-shadow:none!important}
html:root.cm-interior-surfaces #cm-prereg .cm-nick:focus-within{border-color:transparent!important;box-shadow:none!important;outline:2px solid #00baff;outline-offset:2px}
html:root.cm-interior-surfaces #cm-prereg .cm-nick:has(input[aria-invalid="true"]){outline:2px solid #ef4444;outline-offset:2px}
