/* GlomaxGPT shared product shell and theme polish */





:root {


  --gx-brand: var(--accent, #6366f1);


  --gx-brand-strong: var(--accent-hover, #4f46e5);


  --gx-brand-soft: var(--accent-soft, rgba(99,102,241,.14));


}





/* Common product palette: calm surfaces, readable contrast, one accent. */


:root,


html[data-theme="dark"] {


  color-scheme: dark;


  --bg-main: #0e0f14;

  --bg-sidebar: #090a0f;

  --bg-surface: #2b2b2b;


  --bg-elevated: #303030;


  --bg-input: #303030;


  --bg-hover: #2f2f2f;


  --bg-active: #383838;


  --text-primary: #ececec;


  --text-secondary: #c5c5c5;


  --text-muted: #9b9b9b;


  --text-disabled: #707070;


  --text-placeholder: #858585;


  --icon-default: #c5c5c5;


  --icon-active: #ececec;


  --icon-muted: #929292;


  --border-subtle: #303030;


  --border-default: #414141;


  --border-strong: #555;


  --focus-ring: var(--accent, #6366f1);


  --accent-purple: var(--accent);

  --primary-bg: var(--accent-active, var(--accent));

  --primary-bg-solid: var(--accent-active, var(--accent));

  --primary-text: var(--accent-foreground, #fff);

  --primary-hover: var(--accent-active, var(--accent-hover));

  --sidebar-hover: #242424;


  --sidebar-active: #2b2b2b;


  --sidebar-border: #303030;


  --user-bubble-bg: #2b2b2b;


  --user-bubble-border: #414141;


  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .2);


  --shadow-md: 0 8px 24px rgba(0, 0, 0, .22);


  --shadow-lg: 0 16px 42px rgba(0, 0, 0, .28);


  --shadow-xl: 0 24px 64px rgba(0, 0, 0, .34);


  --code-bg: #090b10;

  --code-header-bg: #202020;


  --code-border: #414141;


  --code-text: #e5e5e5;


  --input-bg: #303030;


  --input-border: #414141;


  --topbar-bg: rgba(33, 33, 33, .9);


  --topbar-border: rgba(255, 255, 255, .07);


  --scrollbar-thumb: #555;


  --glass-bg: rgba(33, 33, 33, .94);


  --glass-border: #414141;


  --bg: var(--bg-main, #0e0f14);


  --bg2: var(--bg-sidebar, #090a0f);


  --bg3: #2b2b2b;


  --main-bg: var(--bg-main, #0e0f14);


  --surface: #2b2b2b;


  --surface2: #303030;


  --surface3: #383838;


  --card: #2b2b2b;


  --card2: #303030;


  --sidebar-bg: var(--bg-sidebar, #090a0f);


  --border: #414141;


  --border2: #555;


  --border-control: #414141;


  --hover: #2f2f2f;


  --text: #ececec;


  --text1: #ececec;


  --text2: #c5c5c5;


  --text3: #9b9b9b;


  --text4: #858585;


  --msg-user-bg: #2b2b2b;


  --accent-text: #fff;


  --accent-color: var(--accent, #6366f1);


  --accent2: var(--accent-hover, #4f46e5);


  --v3-bg: var(--bg-main, #0e0f14);


  --v3-sidebar-bg: var(--bg-sidebar, #090a0f);


  --v3-surface: #2b2b2b;


  --v3-surface2: #303030;


  --v3-input-bg: #303030;


  --v3-border: #414141;


  --v3-text: #ececec;


  --v3-text2: #c5c5c5;


  --v3-text3: #9b9b9b;


  --v3-text4: #858585;


  --v3-accent: var(--accent, #6366f1);


  --v3-hover: #2f2f2f;


  --v3-sidebar-hover: #242424;


  --v3-sidebar-active: #2b2b2b;


  --v3-user-bubble: #2b2b2b;


  --v3-border2: #555;


  --v3-card: #2b2b2b;


  --v3-card2: #303030;


}





html[data-theme="light"] {


  color-scheme: light;


  --bg-main: #f7f7f8;


  --bg-sidebar: #f1f1f2;


  --bg-surface: #ffffff;


  --bg-elevated: #f4f4f5;


  --bg-input: #ffffff;


  --bg-hover: #e9e9eb;


  --bg-active: #e5e5e7;


  --text-primary: #202123;


  --text-secondary: #565960;


  --text-muted: #777a82;


  --text-disabled: #a0a2a7;


  --text-placeholder: #92959b;


  --icon-default: #555860;


  --icon-active: #202123;


  --icon-muted: #777a82;


  --border-subtle: #e6e6e8;


  --border-default: #dedee1;


  --border-strong: #c9c9ce;


  --focus-ring: var(--accent, #6366f1);


  --accent-purple: var(--accent);

  --primary-bg: var(--accent-active, var(--accent));

  --primary-bg-solid: var(--accent-active, var(--accent));

  --primary-text: var(--accent-foreground, #ffffff);

  --primary-hover: var(--accent-active, var(--accent-hover));

  --sidebar-hover: #e8e8ea;


  --sidebar-active: #e5e5e7;


  --sidebar-border: #dedee1;


  --user-bubble-bg: #f1f1f2;


  --user-bubble-border: #e3e3e5;


  --color-info: #2563eb;


  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);


  --shadow-md: 0 6px 20px rgba(0, 0, 0, .08);


  --shadow-lg: 0 12px 36px rgba(0, 0, 0, .12);


  --shadow-xl: 0 18px 56px rgba(0, 0, 0, .16);


  --code-bg: #f5f5f6;


  --code-header-bg: #ededee;


  --code-border: #dedee1;


  --code-text: #252629;


  --input-bg: #ffffff;


  --input-border: #d5d5d9;


  --topbar-bg: rgba(247, 247, 248, .94);


  --topbar-border: #e6e6e8;


  --scrollbar-thumb: #c7c8cc;


  --glass-bg: rgba(255, 255, 255, .94);


  --glass-border: #e3e3e5;


  --bg: #f7f7f8;


  --bg2: #f1f1f2;


  --bg3: #ffffff;


  --main-bg: #f7f7f8;


  --surface: #ffffff;


  --surface2: #f4f4f5;


  --surface3: #e9e9eb;


  --card: #ffffff;


  --card2: #f4f4f5;


  --sidebar-bg: #f1f1f2;


  --border: #e1e1e4;


  --border2: #c9c9ce;


  --border-control: #d5d5d9;


  --hover: #e9e9eb;


  --text: #202123;


  --text1: #202123;


  --text2: #565960;


  --text3: #777a82;


  --text4: #92959b;


  --msg-user-bg: #f1f1f2;


  --accent-text: #ffffff;


  --accent-color: var(--accent, #6366f1);


  --accent2: var(--accent-hover, #4f46e5);


  --v3-bg: #f7f7f8;


  --v3-sidebar-bg: #f1f1f2;


  --v3-surface: #ffffff;


  --v3-surface2: #f4f4f5;


  --v3-input-bg: #ffffff;


  --v3-border: #e1e1e4;


  --v3-text: #202123;


  --v3-text2: #565960;


  --v3-text3: #777a82;


  --v3-text4: #92959b;


  --v3-accent: var(--accent, #6366f1);


  --v3-hover: #e9e9eb;


  --v3-sidebar-hover: #e8e8ea;


  --v3-sidebar-active: #e5e5e7;


  --v3-user-bubble: #f1f1f2;


  --v3-border2: #c9c9ce;


  --v3-card: #ffffff;


  --v3-card2: #f4f4f5;


}





html,


body {


  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;


}





html { scroll-behavior: smooth; }


body { min-height: 100vh; }


::selection { background: rgba(16, 163, 127, .28); color: inherit; }


:focus-visible { outline-color: var(--accent) !important; }





/* Shared page shell and controls keep every feature area in the same system. */


.app-with-sidebar,


.page-main,


.main-content,


.main-content--auth,


.customer-v103-body,


.customer-v103-main {


  color: var(--text-primary);


}





.page-main,


.main-content,


#main-content {


  min-width: 0;


}





.page-main :is(h1, h2, h3, h4),


.main-content :is(h1, h2, h3, h4) {


  letter-spacing: -.025em;


}





.page-main :is(p, li),


.main-content :is(p, li) {


  line-height: 1.65;


}





.page-main :is(.card, .panel, .gx-card, .settings-section, .settings-card,


  .profile-section, .profile-stat-card, .profile-plan-detail-card,


  .model-card, .plan-card, .unlock-card, .testimonial-card, .faq-item,


  .support-card, .tool-card, .plugin-card, .project-card, .file-card,


  .history-card, .notification-card, .stat-card, .admin-card) {


  border-color: var(--border-default);


  border-radius: 16px;


}





.page-main :is(.card, .panel, .gx-card, .settings-section, .settings-card,


  .profile-section, .profile-stat-card, .profile-plan-detail-card,


  .model-card, .plan-card, .unlock-card, .testimonial-card,


  .support-card, .tool-card, .plugin-card, .project-card, .file-card,


  .history-card, .notification-card, .stat-card, .admin-card) {


  box-shadow: var(--shadow-sm);


}





.page-main :is(.model-card, .plan-card, .unlock-card, .tool-card,


  .plugin-card, .project-card, .file-card, .support-card) {


  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;


}





.page-main :is(.model-card, .plan-card, .unlock-card, .tool-card,


  .plugin-card, .project-card, .file-card, .support-card):hover {


  border-color: var(--border-strong);


  box-shadow: var(--shadow-md);


}





.page-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),


  textarea, select),


.auth-page :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {


  color: var(--text-primary);


  background-color: var(--bg-input);


  border-color: var(--border-default);


  border-radius: 10px;


}





.page-main :is(input, textarea, select):focus,


.auth-page :is(input, textarea, select):focus {


  border-color: var(--accent) !important;


  box-shadow: 0 0 0 3px var(--accent-soft) !important;


  outline: none;


}





.page-main :is(button, .btn, [role="button"]),


.auth-page :is(button, .btn) {


  -webkit-tap-highlight-color: transparent;


}





.page-main :is(.btn-primary, .btn-main, .btn-submit, .btn-cta, .btn-auth-new),


.auth-page :is(.btn-auth, .btn-auth-new, .btn-primary) {


  border-color: transparent;


  background-color: var(--accent);


  color: #fff;


}





.page-main :is(.btn-primary, .btn-main, .btn-submit, .btn-cta, .btn-auth-new):hover,


.auth-page :is(.btn-auth, .btn-auth-new, .btn-primary):hover {


  background-color: var(--accent-hover);


  color: #fff;


}





.page-main :is(table, .table) {


  color: var(--text-primary);


  border-color: var(--border-default);


}





.page-main :is(th, td) { border-color: var(--border-default); }


.page-main :is(th) { background: var(--bg-elevated); color: var(--text-primary); }


.page-main tr:hover > td { background-color: var(--bg-hover); }





.page-main :is(.alert, .ok, .notice, .empty-state) { border-radius: 13px; }





.inner-topbar,


.app-with-sidebar .main-content > header.topbar,


.app-with-sidebar .main-content > .topbar {


  backdrop-filter: blur(14px);


  -webkit-backdrop-filter: blur(14px);


}





.btn-theme-toggle {


  display: inline-flex !important;


  align-items: center;


  justify-content: center;


  width: 36px;


  height: 36px;


  border: 1px solid var(--border-default) !important;


  border-radius: 11px !important;


  background: var(--bg-surface) !important;


  color: var(--text-secondary) !important;


  opacity: 1 !important;


}





.btn-theme-toggle:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }


.btn-theme-toggle .icon-sun,


.btn-theme-toggle .icon-moon { width: 18px; height: 18px; }


html[data-theme="light"] .btn-theme-toggle .icon-sun { display: none; }


html[data-theme="light"] .btn-theme-toggle .icon-moon { display: block; }


html:not([data-theme="light"]) .btn-theme-toggle .icon-sun { display: block; }


html:not([data-theme="light"]) .btn-theme-toggle .icon-moon { display: none; }


.auth-theme-toggle {


  position: fixed;


  z-index: 900;


  top: max(16px, env(safe-area-inset-top));


  right: max(16px, env(safe-area-inset-right));


}





.theme-options .theme-option,


.settings-page [data-theme-set] {


  color: var(--text-primary);


}





@media (prefers-reduced-motion: reduce) {


  html { scroll-behavior: auto; }


  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }


}





html[data-theme="light"],


html[data-theme="light"] body,


html[data-theme="light"] .app-with-sidebar,


html[data-theme="light"] #main,


html[data-theme="light"] .main-content,


html[data-theme="light"] #main-content,


html[data-theme="light"] .page-main {


  background: var(--bg-main) !important;


  color: var(--text-primary) !important;


}





html[data-theme="light"] #sidebar,


html[data-theme="light"] aside#sidebar,


html[data-theme="light"] .sidebar {


  background: var(--bg-sidebar) !important;


  border-color: var(--border-subtle) !important;


  color: var(--text-primary) !important;


}





html[data-theme="light"] .topbar,


html[data-theme="light"] header.topbar,


html[data-theme="light"] #topbar,


html[data-theme="light"] .inner-topbar {


  background: var(--topbar-bg) !important;


  border-color: var(--border-subtle) !important;


  color: var(--text-primary) !important;


  backdrop-filter: blur(14px);


}





html[data-theme="light"] .sidebar-nav-item,


html[data-theme="light"] .sidebar-nav-item span,


html[data-theme="light"] .tb-site-name,


html[data-theme="light"] .tb-brand-name,


html[data-theme="light"] .page-main h1,


html[data-theme="light"] .page-main h2,


html[data-theme="light"] .page-main h3,


html[data-theme="light"] .page-main label {


  color: var(--text-primary) !important;


}





html[data-theme="light"] .sidebar-nav-item:hover,


html[data-theme="light"] .sidebar-nav-item.active {


  background: var(--bg-hover) !important;


  color: var(--text-primary) !important;


}





html[data-theme="light"] .logo-dark-only { display: none !important; }


html[data-theme="light"] .logo-light-only { display: block !important; }





.settings-page [data-theme-set] {


  display: flex !important;


  align-items: center;


}





html[data-theme="light"] .profile-hero-card,


html[data-theme="light"] .profile-section,


html[data-theme="light"] .profile-stat-card,


html[data-theme="light"] .profile-plan-detail-card,


html[data-theme="light"] .settings-section,


html[data-theme="light"] .settings-card,


html[data-theme="light"] .page-main .panel,


html[data-theme="light"] .page-main .model-card,


html[data-theme="light"] .page-main .plan-card:not(.popular),


html[data-theme="light"] .page-main .unlock-card,


html[data-theme="light"] .page-main .testimonial-card,


html[data-theme="light"] .page-main .tool-card,


html[data-theme="light"] .page-main .plugin-card,


html[data-theme="light"] .page-main .project-card,


html[data-theme="light"] .page-main .file-card,


html[data-theme="light"] .page-main .history-card,


html[data-theme="light"] .page-main .notification-card,


html[data-theme="light"] .page-main .support-card,


html[data-theme="light"] .page-main .stat-card,


html[data-theme="light"] .card,


html[data-theme="light"] .gx-card,


html[data-theme="light"] .modal-content,


html[data-theme="light"] .dropdown-menu,


html[data-theme="light"] .user-menu,


html[data-theme="light"] .tb-more-dropdown {


  background-color: var(--bg-surface) !important;


  border-color: var(--border-default) !important;


  color: var(--text-primary) !important;


  box-shadow: var(--shadow-sm);


}





html[data-theme="light"] .tb-profile-menu,


html[data-theme="light"] #tb-profile-menu,


html[data-theme="light"] .tb-notif-panel,


html[data-theme="light"] #tb-notif-panel,


html[data-theme="light"] .tb-more-menu,


html[data-theme="light"] .tb-more-dropdown,


html[data-theme="light"] .tb-more-dropdown-menu {


  background: var(--bg-surface) !important;


  border-color: var(--border-default) !important;


  color: var(--text-primary) !important;


  box-shadow: var(--shadow-md);


}





html[data-theme="light"] .tb-profile-item,


html[data-theme="light"] .tb-notif-item,


html[data-theme="light"] .tb-more-item,


html[data-theme="light"] .tb-profile-info,


html[data-theme="light"] .tb-notif-title,


html[data-theme="light"] .tb-notif-msg {


  color: var(--text-secondary) !important;


}





html[data-theme="light"] .tb-profile-item:hover,


html[data-theme="light"] .tb-notif-item:hover,


html[data-theme="light"] .tb-more-item:hover {


  background: var(--bg-hover) !important;


}





html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),


html[data-theme="light"] textarea,


html[data-theme="light"] select {


  color: var(--text-primary);


  background-color: var(--bg-input);


  border-color: var(--border-default);


}





html[data-theme="light"] input::placeholder,


html[data-theme="light"] textarea::placeholder {


  color: var(--text-muted);


}





html[data-theme="light"] .page-main :is(.card, .panel, .gx-card, .model-card,


  .plan-card:not(.popular), .unlock-card, .testimonial-card, .tool-card,


  .plugin-card, .project-card, .file-card, .history-card, .notification-card,


  .support-card, .stat-card, .settings-section, .settings-card) {


  background-color: var(--bg-surface) !important;


  color: var(--text-primary);


  border-color: var(--border-default) !important;


  box-shadow: var(--shadow-sm);


}





html[data-theme="light"] .page-main :is(.muted, .description, .subtitle, small, .text-muted) {


  color: var(--text-muted);


}





html[data-theme="light"] .page-main :is(th, .table-header) {


  background-color: var(--bg-elevated) !important;


}





html[data-theme="light"] .page-main :is(.alert-success, .ok, .success-message) {


  color: #08795d;


  background-color: rgba(16, 163, 127, .08);


  border-color: rgba(16, 163, 127, .2);


}





.profile-wrap {


  max-width: 1080px;


}





.profile-hero-card,


.profile-section,


.profile-stat-card {


  border-radius: 18px;


  box-shadow: var(--shadow-sm);


}





.profile-section-title {


  letter-spacing: .045em;


}





.settings-page .theme-options .theme-option {


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 7px;


  min-height: 42px;


  padding: 8px 14px;


  border: 1px solid var(--border);


  border-radius: 11px;


  background: var(--surface2);


  color: var(--text);


  font: inherit;


  font-size: .82rem;


  cursor: pointer;


}





.settings-page .theme-options .theme-option.selected,


.settings-page .theme-options .theme-option.active {


  border-color: var(--accent);


  background: var(--accent-soft);


}





.settings-page .theme-options .theme-option-icon {


  margin: 0;


  font-size: 1rem;


}





.gx-account-key {


  width: 100%;


  margin: 16px 0;


  padding: clamp(18px, 3vw, 28px);


  border: 1px solid var(--border-default);


  border-radius: 20px;


  background: linear-gradient(145deg, var(--bg-surface), var(--bg-elevated));


  box-shadow: var(--shadow-sm);


  scroll-margin-top: 84px;


}





.gx-account-key-heading,


.gx-account-key-status-row,


.gx-account-key-actions,


.gx-account-key-secret-row {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 14px;


}





.gx-account-key-heading { align-items: flex-start; }


.gx-account-key-eyebrow { display: block; margin-bottom: 7px; color: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }


.gx-account-key-heading h2 { margin: 0 0 7px; color: var(--text-primary); font-size: 1.12rem; font-weight: 720; letter-spacing: -.025em; }


.gx-account-key-heading p { max-width: 720px; margin: 0; color: var(--text-secondary); font-size: .86rem; line-height: 1.6; }


.gx-account-key-icon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--accent-soft); color: var(--accent); }


.gx-account-key-icon svg { width: 21px; height: 21px; }


.gx-account-key-status-row { min-height: 58px; margin: 20px 0 0; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 13px; background: var(--bg-main); }


.gx-account-key-status { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: .82rem; font-weight: 650; }


.gx-account-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }


.gx-account-key-mask { min-width: 0; overflow: hidden; color: var(--text-muted); font: 500 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }


.gx-account-key-secret { margin-top: 14px; padding: 14px; border: 1px solid rgba(16,163,127,.28); border-radius: 13px; background: var(--accent-soft); }


.gx-account-key-secret[hidden],


.gx-account-key-actions [hidden] { display: none !important; }


.gx-account-key-secret label { display: block; margin-bottom: 8px; color: var(--text-primary); font-size: .8rem; font-weight: 700; }


.gx-account-key-secret-row input { flex: 1; width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-input); color: var(--text-primary); font: 500 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }


.gx-account-key-secret small { display: block; margin-top: 8px; color: var(--text-secondary); font-size: .72rem; line-height: 1.5; }


.gx-account-key-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 14px; }


.gx-key-btn { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid transparent; border-radius: 10px; color: var(--text-primary); font: inherit; font-size: .78rem; font-weight: 680; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }


.gx-key-btn:hover { transform: translateY(-1px); }


.gx-key-btn:disabled { cursor: wait; opacity: .65; transform: none; }


.gx-key-btn-primary { background: var(--accent); color: #fff; }


.gx-key-btn-primary:hover { background: var(--accent-hover); color: #fff; }


.gx-key-btn-secondary { border-color: var(--border-default); background: var(--bg-surface); color: var(--text-secondary); }


.gx-key-btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }


.gx-key-btn-danger { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); color: #dc2626; }


.gx-key-btn-danger:hover { background: rgba(239,68,68,.14); }


.gx-account-key-feedback { min-height: 1.2em; margin: 9px 0 0; color: var(--accent); font-size: .78rem; }


.gx-account-key-feedback.is-error { color: #dc2626; }


.gx-account-key-feedback.is-success { color: var(--accent); }





/* Keep account and settings screens aligned with the rest of the product shell. */


.profile-main :is(.profile-hero, .profile-section, .profile-stat-card, .profile-plan-detail-card),


.settings-main :is(.settings-section, .settings-card) {


  border: 1px solid var(--border-default);


  border-radius: 18px;


  background: var(--bg-surface);


  color: var(--text-primary);


  box-shadow: var(--shadow-sm);


}





.profile-main :is(h1, h2, h3, .profile-section-title),


.settings-main :is(h1, h2, h3) { color: var(--text-primary); }





.profile-main :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),


.settings-main :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {


  color: var(--text-primary);


  background: var(--bg-input);


  border-color: var(--border-default);


  border-radius: 11px;


}





.profile-main :is(input, textarea, select):focus,


.settings-main :is(input, textarea, select):focus {


  border-color: var(--accent) !important;


  box-shadow: 0 0 0 3px var(--accent-soft) !important;


  outline: none;


}





.sr-only {


  position: absolute !important;


  width: 1px !important;


  height: 1px !important;


  padding: 0 !important;


  margin: -1px !important;


  overflow: hidden !important;


  clip: rect(0, 0, 0, 0) !important;


  white-space: nowrap !important;


  border: 0 !important;


}





@media (max-width: 700px) {


  .settings-layout,


  .profile-wrap,


  .pricing-layout,


  .page-main .page-content,


  .page-main .content-wrap {


    padding-left: max(14px, env(safe-area-inset-left));


    padding-right: max(14px, env(safe-area-inset-right));


  }





  .page-main :is(.page-header, .page-title-row, .section-header) {


    flex-wrap: wrap;


    gap: 12px;


  }





  .page-main :is(.page-header h1, .page-title-row h1, .section-header h1) {


    font-size: clamp(1.35rem, 6vw, 1.8rem);


  }





}





@media (max-width: 460px) {


  .page-main :is(.panel, .card, .settings-section, .settings-card) { border-radius: 14px; }


  .gx-account-key-status-row { align-items: flex-start; flex-direction: column; }


  .gx-account-key-mask { max-width: 100%; }


  .gx-account-key-actions { align-items: stretch; }


  .gx-account-key-actions .gx-key-btn { flex: 1 1 auto; }


  .gx-account-key-secret-row { align-items: stretch; flex-direction: column; }


}





@media (max-width: 360px) {


  .gx-account-key { padding: 15px; }


  .gx-account-key-heading { gap: 10px; }


  .gx-account-key-icon { width: 36px; height: 36px; }


  .btn-theme-toggle { width: 34px; height: 34px; }


}





/* Modern shared product refresh: one restrained visual language for every app page. */


:root {


  --gx-radius-sm: 10px;


  --gx-radius-md: 14px;


  --gx-radius-lg: 20px;


  --gx-motion: cubic-bezier(.2, .7, .2, 1);


}





html { text-rendering: optimizeLegibility; }


body { letter-spacing: -.006em; }





.app-with-sidebar > .sidebar,


.app-with-sidebar > aside.sidebar,


body > aside#sidebar,


body > .sidebar {


  border-right: 1px solid var(--border-subtle) !important;


  box-shadow: 1px 0 0 rgba(0, 0, 0, .015);


}





.sidebar-nav-item {


  min-height: 40px;


  border-radius: 11px !important;


  transition: background-color .16s var(--gx-motion), color .16s var(--gx-motion), transform .16s var(--gx-motion);


}





.sidebar-nav-item:hover { transform: translateX(1px); }


.sidebar-nav-item.active { font-weight: 620 !important; }





.conv-item,


.conversation-item,


.sidebar-conversations [class*="conv-item"] {


  border-radius: 10px !important;


  transition: background-color .16s var(--gx-motion), color .16s var(--gx-motion);


}





.inner-topbar,


.app-with-sidebar .main-content > header.topbar,


.app-with-sidebar .main-content > .topbar {


  border-bottom-color: var(--border-subtle) !important;


  background-color: var(--topbar-bg) !important;


  box-shadow: 0 1px 0 rgba(0, 0, 0, .015);


}





.page-main :is(.page-header, .page-title-row, .section-header) {


  gap: 16px;


}





.page-main :is(.page-header h1, .page-title-row h1, .section-header h1, h1.page-title) {


  font-size: clamp(1.55rem, 2.6vw, 2.05rem);


  font-weight: 680;


  line-height: 1.18;


  letter-spacing: -.04em;


}





.page-main :is(.card, .panel, .gx-card, .settings-section, .settings-card,


  .profile-section, .profile-stat-card, .profile-plan-detail-card,


  .model-card, .plan-card, .unlock-card, .testimonial-card,


  .support-card, .tool-card, .plugin-card, .project-card, .file-card,


  .history-card, .notification-card, .stat-card, .admin-card) {


  border-radius: var(--gx-radius-lg) !important;


  transition: border-color .18s var(--gx-motion), box-shadow .18s var(--gx-motion), transform .18s var(--gx-motion);


}





.page-main :is(.model-card, .plan-card:not(.popular):not(.featured), .unlock-card,


  .tool-card, .plugin-card, .project-card, .file-card, .support-card):hover {


  transform: translateY(-2px);


}





.page-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),


  textarea, select),


.auth-page :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {


  border-radius: 12px;


  transition: border-color .16s var(--gx-motion), box-shadow .16s var(--gx-motion), background-color .16s var(--gx-motion);


}





.page-main :is(.btn-primary, .btn-main, .btn-submit, .btn-cta, .btn-auth-new,


  .btn-save, .gx-btn-primary),


.auth-page :is(.btn-auth, .btn-auth-new, .btn-primary) {


  min-height: 42px;


  border-radius: 12px;


  font-weight: 650;


  box-shadow: 0 4px 12px rgba(var(--accent-rgb), .16);


  transition: transform .16s var(--gx-motion), box-shadow .16s var(--gx-motion), background-color .16s var(--gx-motion);


}





.page-main :is(.btn-primary, .btn-main, .btn-submit, .btn-cta, .btn-auth-new,


  .btn-save, .gx-btn-primary):hover,


.auth-page :is(.btn-auth, .btn-auth-new, .btn-primary):hover {


  transform: translateY(-1px);


  box-shadow: 0 7px 18px rgba(var(--accent-rgb), .2);


}





.page-main :is(.alert, .ok, .notice, .empty-state, .empty-card) {


  border-radius: var(--gx-radius-md);


}





.page-main :is(table, .table) { border-radius: 12px; overflow: hidden; }


.page-main th { font-size: .76rem; font-weight: 680; letter-spacing: .035em; }





/* Keep chat content spacious and the composer edge-to-edge inside its pane. */


html body #main #messages,


html body #main #work-messages,


html body #main #input-area,


html body #main .input-wrapper,


html body #main .input-area,


html body #main #chat-area > .chat-container {


  width: 100% !important;


  max-width: 100% !important;


}





html body #main .message-inner,


html body #main .msg-wrapper,


html body #main .message {


  width: 100% !important;


  max-width: 100% !important;


}





html body #main .input-wrapper {


  padding-left: clamp(12px, 2.4vw, 28px) !important;


  padding-right: clamp(12px, 2.4vw, 28px) !important;


  border-top: 1px solid var(--border-subtle);


}





html body #main .input-box {


  border-radius: 22px !important;


  border-color: var(--border-default) !important;


  box-shadow: 0 8px 28px rgba(0, 0, 0, .08) !important;


}





html body #main .input-box:focus-within {


  border-color: var(--accent) !important;


  box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 30px rgba(0, 0, 0, .1) !important;


}





.welcome-screen :is(.suggestion-card, .suggestion-item, .welcome-suggestion) {


  border-radius: 16px;


  transition: transform .18s var(--gx-motion), border-color .18s var(--gx-motion), box-shadow .18s var(--gx-motion);


}





.welcome-screen :is(.suggestion-card, .suggestion-item, .welcome-suggestion):hover {


  transform: translateY(-2px);


  box-shadow: var(--shadow-md);


}





.gx-account-key,


.gx-account-key-status-row,


.gx-account-key-secret { border-radius: var(--gx-radius-md); }





@media (max-width: 768px) {


  .page-main :is(.card, .panel, .gx-card, .settings-section, .settings-card,


    .profile-section, .model-card, .plan-card, .tool-card, .project-card, .file-card) {


    border-radius: 15px !important;


  }


  .page-main :is(.page-header h1, .page-title-row h1, .section-header h1, h1.page-title) {


    font-size: clamp(1.45rem, 6vw, 1.8rem);


  }


}





/* Override the retired dark-only redesign layer with the chosen theme. */


html[data-theme="light"] {


  color-scheme: light !important;


  background: var(--bg-main) !important;


}





html[data-theme="light"] body,


html[data-theme="light"] .app-with-sidebar,


html[data-theme="light"] #main,


html[data-theme="light"] .main-content,


html[data-theme="light"] #main-content,


html[data-theme="light"] .page-main {


  background: var(--bg-main) !important;


  color: var(--text-primary) !important;


}





html[data-theme="dark"] {


  color-scheme: dark !important;


  background: var(--bg-main) !important;


}





html[data-theme="dark"] body,


html[data-theme="dark"] .app-with-sidebar,


html[data-theme="dark"] #main,


html[data-theme="dark"] .main-content,


html[data-theme="dark"] #main-content,


html[data-theme="dark"] .page-main {


  background: var(--bg-main) !important;


  color: var(--text-primary) !important;


}





html[data-theme="dark"] #sidebar,


html[data-theme="dark"] aside#sidebar,


html[data-theme="dark"] .sidebar {


  background: var(--bg-sidebar) !important;


  border-color: var(--border-default) !important;


}





html[data-theme="dark"] .sidebar-nav-item:hover,


html[data-theme="dark"] .sidebar-nav-item.active {


  background: var(--bg-hover) !important;


  color: var(--text-primary) !important;


}





html[data-theme="light"] .btn-theme-toggle .icon-sun,


html[data-theme="dark"] .btn-theme-toggle .icon-moon { display: none !important; }


html[data-theme="light"] .btn-theme-toggle .icon-moon,


html[data-theme="dark"] .btn-theme-toggle .icon-sun { display: block !important; }





/* Use the complete chat pane width for the composer and conversation rows. */


:root {


  --gx-composer-max: 100%;


  --gx-msg-max: 100%;


}





html body #main #input-area,


html body #main #messages,


html body #main #chat-area,


html body #main #chat-area > .chat-container {


  width: 100% !important;


  max-width: none !important;


}





html body #main #input-area #chat-input-container,


html body #main #input-area .input-container,


html body #main #input-area .gx-composer-wrap,


html body #main #input-area .gx-bar-row {


  width: 100% !important;


  max-width: 100% !important;


}





html body #main #messages > .msg-wrapper,


html body #main #messages > .message,


html body #main #work-messages > .msg-wrapper,


html body #main #work-messages > .message,


html body .msg-wrapper,


html body .message {


  width: 100% !important;


  max-width: 100% !important;


}





.msg-wrapper .msg-bubble,


.message .message-content {


  max-width: 100%;


  overflow-wrap: anywhere;


  word-break: normal;


}





@media (max-width: 700px) {


  html body #main #input-area #chat-input-container,


  html body #main #input-area .input-container {


    max-width: 100% !important;


  }


}