/* TrioSoft 16.8.0 — Studio redesign.
   Deliberately narrow overrides: keep forms, display states, existing routing and admin hooks.
   Theme colors and font preferences continue to come from site settings. */
:root {
  --studio-line: rgba(27,45,80,.11);
  --studio-raised: #fff;
  --studio-subtle: #f5f7fb;
  --studio-text: #192337;
  --studio-muted: #64718a;
  --studio-sheen: inset 0 1px 0 rgba(255,255,255,.82);
  --studio-shadow: 0 7px 24px rgba(28,46,86,.06), 0 1px 3px rgba(28,46,86,.04);
}
html[data-theme="dark"] {
  --studio-line: rgba(185,202,242,.115);
  --studio-raised: #171e2b;
  --studio-subtle: #101623;
  --studio-text: #f0f4fb;
  --studio-muted: #a3afc4;
  --studio-sheen: inset 0 1px 0 rgba(255,255,255,.055);
  --studio-shadow: 0 9px 30px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.10);
}
html { -webkit-text-size-adjust: 100%; }
body { color: var(--studio-text); }
/* Full-width page grid. The old --max/--content=1180px limits page mains,
   so merely increasing max-width on Studio did not widen anything. One gutter
   per viewport side; nested Premium sections do NOT subtract it a second time.
   Keep this scoped to page layouts, never to modal dialogs or form controls. */
:root { --studio-page-gutter: clamp(16px, 2.5vw, 44px); }
.site-header, .section-shell, .site-footer {
  width: calc(100% - 2 * var(--studio-page-gutter));
  max-width: none;
}
/* Studio WIDE live-render fix: app.js adds .dynamic-sections once site settings
   arrive. styles.css has `main.dynamic-sections > *` with higher specificity
   than `.section-shell`; the former reintroduced --max:1180px at runtime.
   Match the direct-child rule instead of changing every nested container. */
body > main.dynamic-sections > .section-shell {
  width: calc(100% - 2 * var(--studio-page-gutter));
  max-width: none;
  margin-inline: auto;
}
/* Nested cards and dialogs are deliberately excluded from the wide rule. */
body > main:is(.premium-main, .platform-page-main, .reviews-main, .account-main) {
  width: calc(100% - 2 * var(--studio-page-gutter));
  max-width: none;
  margin-inline: auto;
}
/* Partners has a separate 1320px page cap with a more specific selector. */
body[data-platform-page] > main.platform-page-main {
  width: calc(100% - 2 * var(--studio-page-gutter));
  max-width: none;
}
/* Catalog keeps the full-width main and its sections provide the gutter. */
body > main.catalog-page-main { width: 100%; max-width: none; }
/* Premium already has an outer gutter; its children fill that inner space. */
body > main.premium-main > .section-shell { width: 100%; max-width: none; }
/* Profiles are pages too, not 900px-wide islands on desktop. */
.public-profile-shell {
  width: calc(100% - 2 * var(--studio-page-gutter));
  max-width: none;
  margin-inline: auto;
}
.site-header { border: 1px solid var(--studio-line); background: var(--mat-thick); box-shadow:var(--studio-shadow); }
.site-header .main-nav a { border-radius: 11px; }
.site-header .main-nav a:hover { background:var(--fill); }
:where(.section-heading,.premium-section-heading) h2,
:where(.section-heading,.premium-section-heading) h3 { letter-spacing: -.045em; }
:where(.section-heading,.premium-section-heading) p { color:var(--studio-muted); line-height:1.6; }
/* Surface styling: optical depth on hover only, not a floating / bouncing entire page. */
:where(.feature-card,.news-card,.team-card,.app-card,.catalog-app-card,.catalog-summary-card,.account-card,.account-panel,.home-status-card,.home-dashboard-card,.home-app-card,.library-card,.profile-form-section,.profile-avatar-editor-card,.settings-card,.dashboard-card,.stat-card,.platform-admin-card) {
  border-color: var(--studio-line);
  box-shadow:var(--studio-shadow),var(--studio-sheen);
}
:where(.feature-card,.news-card,.team-card,.app-card,.catalog-app-card,.home-app-card) {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  :where(.feature-card,.news-card,.team-card,.app-card,.catalog-app-card,.home-app-card):hover {
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--s1) 28%,var(--studio-line));box-shadow:0 14px 36px rgba(11,27,57,.12),var(--studio-sheen);
  }
}
:where(.button,.account-button,.primary-button,.secondary-button) { box-shadow:var(--studio-sheen),0 3px 11px rgba(0,0,0,.055); }
:where(.button,.account-button,.primary-button,.secondary-button):focus-visible { outline:2px solid var(--s1);outline-offset:3px; }
/* Calm product-stage hero; old logo images stay hidden for legacy settings compatibility. */
.hero.section-shell { display:grid;grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr);align-items:center;gap:clamp(24px,5vw,80px);min-height:clamp(550px,67vh,780px); }
.hero-copy { min-width:0; }
.hero-copy h2 { max-width: min(100%, 850px);font-size:clamp(44px,4.45vw,78px);line-height:1.07;letter-spacing:-.052em; }
.hero-copy .hero-text { max-width:57ch;color:var(--studio-muted);font-size:clamp(16px,1.22vw,20px);line-height:1.72; }
.hero-actions { flex-wrap:wrap;gap:12px; }
.hero-visual { display:grid;place-items:center;position:relative;min-height:470px;isolation:isolate;overflow:visible; }
.hero-visual .hero-halo,.hero-visual .orbit,.hero-visual .hero-sphere,.hero-visual .hero-theme-logo { display:none; }
.hero-visual:before {content:"";position:absolute;width:min(94%,560px);aspect-ratio:1;inset:auto;border-radius:50%;background:radial-gradient(circle,rgba(87,125,241,.16),transparent 66%);pointer-events:none;}
.trio-hero-object {position:relative;width:min(76%,420px);aspect-ratio:1;transform-style:preserve-3d;perspective:950px;animation:studio-float 9s ease-in-out infinite;}
.trio-hero-object .trio-crystal {position:absolute;inset:15%;transform-style:preserve-3d;transform:rotateX(13deg) rotateY(-26deg) rotateZ(-14deg);animation:studio-turn 17s ease-in-out infinite alternate;}
.trio-hero-object .trio-face {position:absolute;inset:0;border:1px solid rgba(183,208,255,.45);border-radius:28%;backface-visibility:hidden;background:linear-gradient(140deg,rgba(174,207,255,.86),rgba(82,116,197,.56) 52%,rgba(35,63,123,.83));box-shadow:inset 1px 1px 0 rgba(255,255,255,.75),inset -15px -20px 35px rgba(14,34,91,.18),0 20px 50px rgba(29,49,106,.19);}
html[data-theme="dark"] .trio-hero-object .trio-face {background:linear-gradient(135deg,rgba(96,145,223,.82),rgba(43,76,137,.83) 56%,rgba(14,28,53,.93));}
.trio-hero-object .face-front {transform:translateZ(54px)}
.trio-hero-object .face-back {transform:translateZ(-54px) rotateY(180deg)}
.trio-hero-object .face-side {transform:rotateY(90deg) translateZ(54px);opacity:.55}
.trio-hero-object .face-top {transform:rotateX(90deg) translateZ(54px);opacity:.56}
.trio-hero-object .trio-inner {position:absolute;inset:32%;border-radius:25%;transform:translateZ(67px) rotate(-18deg);display:grid;place-items:center;background:linear-gradient(145deg,#e8f3ff,#749ade 62%,#375b9b);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 5px #fff9,0 12px 25px #10265640;}
.trio-hero-object .trio-inner:after {content:"✧";font-size:clamp(50px,6.3vw,96px);color:white;text-shadow:0 2px 17px #264b8d80;}
.trio-hero-object .trio-orbit {position:absolute;inset:4%;border:1px solid rgba(128,169,238,.22);border-radius:50%;transform:rotateX(72deg);}
.trio-hero-object .trio-orbit:nth-child(2){inset:13%;transform:rotateY(70deg)}
.trio-hero-object .trio-orbit:nth-child(3){inset:0;transform:rotateX(57deg) rotateZ(52deg)}
.trio-hero-object .trio-satellite {position:absolute;right:15%;top:13%;width:12%;aspect-ratio:1;border-radius:31%;background:linear-gradient(135deg,#d9eaff,#6b97e9);box-shadow:0 10px 25px #26467540;}
.hero-visual .ecosystem-pill {z-index:4;}
@keyframes studio-float {50%{transform:translateY(-12px)}}
@keyframes studio-turn {to{transform:rotateX(5deg) rotateY(10deg) rotateZ(4deg)}}
/* Catalog: let existing application tiles manage their own content and click areas. */
.catalog-hero {border:1px solid var(--studio-line);box-shadow:var(--studio-shadow);}
.catalog-toolbar {border-color:var(--studio-line);}
.app-grid,.catalog-app-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));}
/* Account and admin: respect their own grids; only make the page usable on large monitors. */
.account-header {max-width:1920px;}
.account-dashboard,.profile-layout,.profile-content,.account-tab {min-width:0;}
.profile-avatar-editor-card,.profile-form-section {background:var(--studio-raised);}
.profile-banner-editor {display:grid;gap:13px;padding:16px;border:1px solid var(--studio-line);border-radius:18px;background:var(--studio-subtle);margin-top:16px;min-width:0;}
.profile-banner-preview {min-height:130px;aspect-ratio:3/1;border-radius:14px;border:1px solid var(--studio-line);background:linear-gradient(125deg,#1c2e4e,#4b6cbb 52%,#3a416b);background-size:cover;background-position:center;}
.profile-banner-actions,.appearance-colors,.appearance-effects {display:flex;flex-wrap:wrap;gap:9px;min-width:0;}
.appearance-option {display:inline-flex;align-items:center;gap:8px;min-height:41px;padding:8px 11px;border:1px solid var(--studio-line);border-radius:11px;background:var(--studio-subtle);cursor:pointer;color:var(--studio-text);font-size:13px;}
.appearance-option:has(input:checked) {outline:2px solid var(--s1);outline-offset:1px;}
.appearance-option input {accent-color:var(--s1);}
.appearance-dot {width:17px;aspect-ratio:1;display:inline-block;border-radius:50%;background:var(--dot);border:1px solid rgba(127,137,162,.25);}
.profile-media-status {font-size:13px;color:var(--studio-muted);line-height:1.5;}
.profile-media-status[data-tone="pending"]{color:var(--s1)}
.profile-media-status[data-tone="error"]{color:#e36273}
.profile-media-status[data-tone="success"]{color:#42b98e}
/* Public profile: readable content, cover, avatar and trim without enlarging a one-person card across 1600px. */
.public-profile-shell {width:calc(100% - 2 * var(--studio-page-gutter));max-width:none;margin:0 auto;padding:clamp(28px,5vw,72px) 0;}
.public-profile-shell > .public-profile-card {width:100%;max-width:none;}
.public-profile-card {padding:0 28px 32px;position:relative;overflow:visible;text-align:left;border:1px solid var(--studio-line);border-radius:25px;box-shadow:var(--studio-shadow);--profile-accent:#587cff;}
.public-profile-cover {height:clamp(150px,23vw,250px);margin:0 -28px 0;border-radius:24px 24px 0 0;background:linear-gradient(120deg,#1e355d,var(--profile-accent),#1e294c);background-position:center;background-size:cover;position:relative;overflow:hidden;}
.public-profile-cover:after {content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,16,38,.20),transparent 60%);pointer-events:none;}
.public-profile-cover>span {position:absolute;bottom:18px;right:24px;color:#fff9;z-index:1;font-size:11px;letter-spacing:.13em;font-weight:750;}
.public-profile-card>.profile-avatar {position:relative;z-index:2;width:102px;height:102px;margin:-48px 0 15px;border:5px solid var(--studio-raised);border-radius:50%;overflow:visible;box-sizing:content-box;background:var(--studio-raised);}
.public-profile-card>.profile-avatar img {width:100%;height:100%;object-fit:cover;border-radius:50%;}
.public-profile-card>h1 {font-size:clamp(29px,3.3vw,42px);line-height:1.12;letter-spacing:-.04em;margin:7px 0;}
.public-profile-card>.public-profile-bio {max-width:68ch;line-height:1.65;overflow-wrap:anywhere;}
.public-profile-card.effect-glow {box-shadow:var(--studio-shadow),0 0 33px color-mix(in srgb,var(--profile-accent) 15%,transparent);}
.public-profile-card.effect-aurora .public-profile-cover {background-image:radial-gradient(circle at 82% 17%,#ffffff3b,transparent 36%),linear-gradient(120deg,#182b50,var(--profile-accent),#442958);}
.public-profile-card.effect-none {box-shadow:none;}
/* Existing class names remain available to the profile editor and Labs. */
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-holo,
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-pulse {position:relative;isolation:isolate;}
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-holo:after,
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-pulse:after {content:"";position:absolute;inset:-6px;z-index:4;pointer-events:none;background:center/100% 100% no-repeat;}
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-holo:after{background-image:url('/assets/frames/holo.gif')}
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-pulse:after{background-image:url('/assets/frames/pulse.gif')}
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-starlight {box-shadow:0 0 0 3px #b0bafa,0 0 18px #8b9df060;}
:is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-liquid {box-shadow:0 0 0 3px #b7e0f9,0 5px 20px #85c1ea38;}
.profile-media-admin-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;}
.profile-media-admin-card {border:1px solid var(--studio-line);border-radius:17px;padding:14px;background:var(--studio-raised);min-width:0;}
.profile-media-admin-card img {display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:var(--studio-subtle);border-radius:10px;}
.profile-media-admin-card h3 {margin:12px 0 5px;font-size:16px;}
.profile-media-admin-card p {margin:0 0 12px;color:var(--studio-muted);font-size:13px;}
.profile-media-admin-actions {display:flex;flex-wrap:wrap;gap:8px;}
/* A direct /app/:slug URL uses the modal's existing content as a full page; normal
   app previews on / and /pc-apps stay normal modals, including their scroll lock. */
body.app-detail-route {overflow:auto;}
body.app-detail-route>main,body.app-detail-route>.site-footer {display:none;}
body.app-detail-route #appModal.modal-shell {position:relative;inset:auto;display:block;visibility:visible;opacity:1;min-height:calc(100dvh - 88px);padding:clamp(12px,3vw,44px);pointer-events:auto;background:transparent;}
body.app-detail-route #appModal>.modal-backdrop {display:none;}
body.app-detail-route #appModal>.app-modal {width:min(100%,1440px);max-width:none;max-height:none;overflow:visible;margin-inline:auto;}
body.app-detail-route .app-detail-body {grid-template-columns:minmax(0,1.65fr) minmax(240px,.65fr);}
@media(max-width:960px){
  .hero.section-shell{grid-template-columns:1fr;min-height:0;padding-top:clamp(30px,5vw,64px);}
  .hero-copy h2{max-width:100%;}
  .hero-visual{min-height:350px;}
  .trio-hero-object{width:min(75%,380px);}
}
@media(max-width:760px){
  :root{--studio-page-gutter:14px;}
  .section-shell,.site-footer,.site-header,.account-main{width:calc(100% - 2 * var(--studio-page-gutter));}
  .hero-visual{min-height:300px;}
  .trio-hero-object{width:min(85%,310px);}
  .hero-copy h2{font-size:clamp(39px,9vw,63px);}
  .public-profile-card{padding:0 18px 26px;}
  .public-profile-cover{margin:0 -18px;}
  body.app-detail-route .app-detail-body{grid-template-columns:1fr;}
  body.app-detail-route #appModal.modal-shell{padding:12px;}
}
@media(prefers-reduced-motion:reduce){
  .trio-hero-object,.trio-hero-object .trio-crystal{animation:none;}
  .trio-hero-object .trio-crystal{transform:rotateX(13deg) rotateY(-26deg) rotateZ(-14deg);}
  :is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-holo:after,
  :is(.profile-frame-preview,.profile-avatar,#profileAvatar,#profileAvatarPreview).frame-pulse:after {background-image:none;outline:3px solid #8caeff;border-radius:50%;inset:-3px;}
}

/* Page identity: a single restrained surface language instead of another neon overlay. */
.platform-page-hero,.premium-hero-inner,.reviews-hero,.help-hero {border-color:var(--studio-line);box-shadow:var(--studio-shadow);}
.platform-page-hero h1,.premium-hero h1,.reviews-hero h1,.help-hero h1 {letter-spacing:-.05em;}
.platform-page-hero p,.premium-hero-copy>p,.reviews-hero p,.help-hero p {line-height:1.66;}
:where(.premium-plan-card,.premium-feature-list,.premium-benefit-panel,.help-sidebar-card,.help-article,.review-card) {border-color:var(--studio-line);}
:where(.premium-plan-card,.help-sidebar-card,.review-card) {box-shadow:var(--studio-shadow);}
.profile-sidebar {border-color:var(--studio-line);box-shadow:var(--studio-shadow);}
.profile-nav button {transition:background .18s ease,color .18s ease;}
.profile-content .account-tab {min-width:0;}
/* Admin is a working tool: stable sidebar, aligned form panels, no hover motion on tables. */
.admin-shell .sidebar {border-right:1px solid var(--studio-line);}
.admin-shell .sidebar-nav button {border-radius:11px;transition:background .18s ease,color .18s ease;}
.admin-shell .sidebar-nav button:hover {background:var(--fill);}
.admin-shell .sidebar-nav button.active {box-shadow:inset 3px 0 0 var(--s1);}
.admin-shell .topbar {border-bottom:1px solid var(--studio-line);}
.admin-shell .view-container {min-width:0;}
.admin-shell :where(.dashboard-card,.stat-card,.platform-admin-card,.content-table,.editor-card,.settings-card) {border-color:var(--studio-line);box-shadow:var(--studio-shadow);}
.admin-shell :where(input,textarea,select):focus-visible {outline:2px solid var(--s1);outline-offset:2px;}
/* Actual GPU use is limited to one hero animation; never ask the browser to blur every tile. */
@media(max-width:460px){.hero.section-shell {gap:0}.trio-hero-object{width:min(87%,270px)}.hero-visual{min-height:260px}}