/* Flux Atelier v4 — product-first spatial glass interface */
:root {
  --ink: #f5f7fb;
  --ink-2: #bac2d2;
  --ink-3: #778196;
  --void: #07090f;
  --panel: rgba(17, 21, 31, .74);
  --panel-solid: #11151f;
  --hairline: rgba(255, 255, 255, .09);
  --hairline-hi: rgba(255, 255, 255, .17);
  --mint: #9fffdc;
  --mint-2: #53d9ba;
  --violet: #9c8cff;
  --blue: #6eb7ff;
  --coral: #ff8d7a;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --shadow-float: 0 28px 90px rgba(0, 0, 0, .45), 0 2px 10px rgba(0,0,0,.22);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--void); scrollbar-color: #303747 transparent; }
body {
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(900px 580px at 74% -12%, rgba(104, 93, 233, .14), transparent 63%),
    radial-gradient(780px 600px at -8% 12%, rgba(52, 192, 159, .12), transparent 65%),
    linear-gradient(145deg, #07090f 0%, #0a0d15 52%, #080a11 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}

.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.light-beam {
  position: fixed; width: 52vw; height: 100vh; left: 18%; top: -42%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(159,255,220,.035), transparent);
  transform: rotate(-18deg); filter: blur(16px); pointer-events: none;
  animation: beam-drift 18s ease-in-out infinite alternate;
}
.aurora { opacity: .08; filter: blur(120px); animation-duration: 26s; }

.app-header {
  height: 72px; top: 0; padding: 10px 22px; border: 0; border-bottom: 1px solid var(--hairline);
  background: rgba(7, 9, 15, .68); backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%); box-shadow: none;
}
.header-shell { max-width: 1500px; height: 52px; margin: auto; padding: 0; }
.header-left, .header-actions { gap: 10px; }
.brand { gap: 10px; cursor: pointer; }
.brand-logo {
  width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center;
  color: #06120e; font-weight: 900; font-size: 16px; font-family: Georgia, serif;
  background: linear-gradient(145deg, #c5ffed, #65e5c4 55%, #63aadf);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 7px 24px rgba(83,217,186,.16);
}
.brand-logo span { transform: translateY(-.5px); }
.brand-name { font-size: 15px; font-weight: 730; letter-spacing: -.02em; }
.header-center {
  padding: 8px 15px; border: 1px solid var(--hairline); border-radius: 999px;
  background: rgba(255,255,255,.025); color: var(--ink-2); font-size: 13px;
}
.header-action-btn, .sidebar-toggle-btn {
  width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: 12px;
  background: rgba(255,255,255,.025); color: var(--ink-2);
}
.header-action-btn:hover, .sidebar-toggle-btn:hover { background: rgba(255,255,255,.07); border-color: var(--hairline-hi); color: #fff; }
.plan-pill { min-height: 30px; padding: 6px 11px; border-radius: 10px; border: 1px solid rgba(159,255,220,.18); color: var(--mint); background: rgba(159,255,220,.07); letter-spacing: .08em; }
.sync-indicator { height: 32px; border-color: var(--hairline); background: rgba(255,255,255,.025); color: var(--ink-3); }
.sync-indicator[data-online=true] { color: #91d9c3; }

.shell { width: min(1500px, calc(100% - 40px)); max-width: none; margin: 0 auto; padding-top: 20px; }
.desktop-tabs {
  position: sticky; top: 84px; z-index: 20; width: max-content; max-width: 100%; margin: 0 auto 18px;
  padding: 5px; gap: 3px; overflow-x: auto; border-radius: 16px; border: 1px solid var(--hairline);
  background: rgba(12,15,23,.72); backdrop-filter: blur(24px); box-shadow: 0 14px 45px rgba(0,0,0,.24);
}
.desktop-tabs .tab {
  min-height: 38px; padding: 9px 14px; border-radius: 11px; border: 0; color: var(--ink-3);
  background: transparent; font-size: 13px; font-weight: 610; white-space: nowrap;
}
.desktop-tabs .tab:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.desktop-tabs .tab.active { color: var(--ink); background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.22); }

.card {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.018) 45%, rgba(255,255,255,.026));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%);
}
.card::before { border-radius: inherit; }
.tab-panel { display: none; }
.tab-panel.active { display: block !important; animation: panel-arrive .48s var(--ease-out); }

.hero-card { position: relative; overflow: hidden; min-height: 216px; padding: 34px 38px; }
.conversion-card { padding: 22px; margin-top: 16px; }
.conversion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.conversion-item { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 112px; padding: 14px; border: 1px solid var(--hairline); border-radius: 16px; background: rgba(255,255,255,.035); color: var(--ink); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.conversion-item:hover { transform: translateY(-2px); border-color: rgba(159,255,220,.42); background: rgba(159,255,220,.08); }
.conversion-item span { font-size: 25px; }
.conversion-item small { color: var(--ink-3); line-height: 1.35; }
.conversion-hint { margin: 14px 0 0; }
.referral-rewards { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.referral-rewards span { padding:7px 10px; border-radius:999px; color:var(--ink-2); background:rgba(159,255,220,.06); border:1px solid rgba(159,255,220,.14); font-size:12px; }
@media (max-width: 760px) { .conversion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-card::after {
  content: ""; position: absolute; width: 390px; height: 390px; right: -100px; top: -150px;
  border: 1px solid rgba(159,255,220,.09); border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(159,255,220,.018), 0 0 0 88px rgba(156,140,255,.016);
  pointer-events: none;
}
.hero-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); align-items: end; gap: 42px; }
.hero-badge-tag, .eyebrow { color: var(--mint-2); background: none; border: 0; padding: 0; font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.hero-card h1 { margin: 14px 0 10px; max-width: 760px; font-size: clamp(34px, 5vw, 66px); line-height: .98; letter-spacing: -.055em; font-weight: 760; }
.hero-card .muted { max-width: 660px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hero-quick-buttons { justify-content: flex-end; align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-quick-buttons .btn { min-height: 50px; }

.btn {
  min-height: 42px; border-radius: 13px; border: 1px solid var(--hairline); padding: 10px 16px;
  color: var(--ink); background: rgba(255,255,255,.04); font-weight: 650; font-size: 14px;
  transition: transform .18s var(--ease-out), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.075); border-color: var(--hairline-hi); }
.btn:active { transform: scale(.975); }
.btn.primary, .glow-btn {
  color: #07130f; border-color: rgba(202,255,240,.55); background: linear-gradient(145deg, #baffea, #74e7c8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 26px rgba(83,217,186,.14);
}
.btn.primary:hover, .glow-btn:hover { background: linear-gradient(145deg, #d1fff1, #86ebd0); box-shadow: 0 13px 32px rgba(83,217,186,.2); }
.btn.secondary { background: rgba(110,183,255,.07); border-color: rgba(110,183,255,.16); }
.btn.outline { background: transparent; }

.grid.two { gap: 14px; }
.metric-card, .bonus-card, .design-card, .pwa-install-banner, .web-sync-banner { padding: 24px; }
.mini-metric-item { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); border-radius: 14px; padding: 15px; }
.m-val { font-size: 22px; font-variant-numeric: tabular-nums; }
.m-lbl { font-size: 12px; color: var(--ink-3); }
.progress-bar-wrap { height: 7px; background: rgba(255,255,255,.055); overflow: hidden; }
.progress-bar-fill { background: linear-gradient(90deg, var(--mint-2), var(--blue)); box-shadow: 0 0 18px rgba(83,217,186,.35); }

#panel-chat {
  display: none;
}

#panel-chat.active {
  height: calc(100dvh - 146px);
  min-height: 500px;
  display: flex !important;
  flex-direction: column !important;
}
.chat-window-card { height: 100%; min-height: 0; padding: 0; overflow: hidden; display: flex !important; flex-direction: column !important; border-radius: 26px; }
.chat-top-bar { flex: 0 0 auto; min-height: 58px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.018); }
.model-select-lbl { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.styled-select { min-height: 36px; border: 0; border-radius: 10px; color: var(--ink); background: rgba(255,255,255,.05); padding: 7px 34px 7px 11px; font-size: 13px; }
.chat-character-bar { flex: 0 0 auto; min-height: 64px; padding: 10px 18px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.012); }
.char-avatar-mini { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, rgba(159,255,220,.14), rgba(156,140,255,.12)); border: 1px solid var(--hairline); }
.char-name-mini { font-size: 14px; font-weight: 680; }
.char-tag-mini { color: var(--ink-3); font-size: 12px; }
.chat-messages-container { flex: 1 1 0; min-height: 0; margin: 0; padding: 26px max(22px, calc((100% - 900px)/2)); gap: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: radial-gradient(500px 280px at 50% 30%, rgba(156,140,255,.025), transparent); }
.chat-bubble { max-width: 82%; gap: 10px; animation: message-arrive .35s var(--ease-out); }
.user-bubble { margin-left: auto; flex-direction: row-reverse; }
.bubble-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; background: rgba(255,255,255,.055); border: 1px solid var(--hairline); box-shadow: none; }
.bubble-body { font-size: 16px; line-height: 1.68; padding: 14px 17px; border-radius: 17px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); box-shadow: none; }
.user-bubble .bubble-body { color: #07130f; background: linear-gradient(145deg,#b7ffe8,#78e7c8); border-color: #caffef; }
.chat-chips-carousel { flex: 0 0 auto; padding: 8px max(18px, calc((100% - 900px)/2)); gap: 7px; border-top: 1px solid rgba(255,255,255,.04); overflow-x: auto; scrollbar-width: none; }
.chat-chip { min-height: 34px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--ink-2); font-size: 12px; }
.chat-chip:hover { color: var(--mint); border-color: rgba(159,255,220,.22); background: rgba(159,255,220,.05); }
.chat-attachment-preview { flex: 0 0 auto; }
.chat-composer-form { flex: 0 0 auto; width: min(920px, calc(100% - 32px)); margin: 0 auto 8px; padding: 8px; gap: 5px; border: 1px solid var(--hairline-hi); border-radius: 19px; background: rgba(7,9,15,.76); box-shadow: 0 14px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055); box-sizing: border-box; }
.chat-composer-form textarea { min-height: 42px; padding: 10px 12px; color: var(--ink); font-size: 16px; line-height: 1.45; background: transparent; }
.chat-composer-form .icon-btn { border: 0; background: transparent; color: var(--ink-3); }
.send-btn { width: 43px; height: 43px; border-radius: 13px; }
.chat-footer-note { flex: 0 0 auto; padding: 5px 18px 10px; color: var(--ink-3); font-size: 11px; }

.image-studio-card { padding: 30px; overflow: hidden; }
.image-studio-card h2 { font-size: clamp(27px,4vw,44px); letter-spacing: -.04em; }
.inspiration-gallery, .style-chips-wrap { gap: 8px; }
.inspiration-card, .chip, .ratio-btn { border-radius: 13px; border: 1px solid var(--hairline); background: rgba(255,255,255,.03); }
#imageResultBox { background: radial-gradient(circle at 50% 0, rgba(156,140,255,.08), transparent 55%), rgba(0,0,0,.16); }
#generatedImg { max-height: 68dvh; object-fit: contain; border-radius: 16px; box-shadow: 0 25px 70px rgba(0,0,0,.5); }

.app-sidebar {
  width: 316px; background: rgba(10,12,19,.92); border-right: 1px solid var(--hairline);
  box-shadow: 24px 0 70px rgba(0,0,0,.4); backdrop-filter: blur(34px) saturate(125%);
}
.sidebar-header { border-bottom: 0; }
.sidebar-section-title { padding: 14px 8px 7px; color: #626c80; letter-spacing: .12em; }
.sidebar-chat-item, .sidebar-nav-item, .sidebar-action-btn { min-height: 42px; border-radius: 12px; font-size: 14px; }
.sidebar-chat-item.active, .sidebar-nav-item.active { color: var(--ink); background: rgba(255,255,255,.07); border-color: var(--hairline); box-shadow: none; }
.workspace-launcher { margin: 10px 0; min-height: 48px; border-radius: 13px; border-color: rgba(159,255,220,.16); background: rgba(159,255,220,.05); color: var(--mint); }

.flux-workspace { border-radius: 28px; background: rgba(12,15,23,.94); border-color: var(--hairline-hi); box-shadow: var(--shadow-float); }
.workspace-shortcuts button, .workspace-action { border-color: var(--hairline); background: rgba(255,255,255,.035); color: var(--ink-2); }
.workspace-card { background: rgba(255,255,255,.025); border-color: var(--hairline); }
.workspace-compose { background: rgba(0,0,0,.18); }

.modal-overlay, dialog::backdrop { backdrop-filter: blur(14px); background: rgba(2,3,7,.72); }
.modal-card, .modal-content { border: 1px solid var(--hairline-hi); border-radius: 26px; background: rgba(15,19,28,.94); box-shadow: var(--shadow-float); }
input, textarea, select { caret-color: var(--mint); }
input:focus, textarea:focus, select:focus { border-color: rgba(159,255,220,.34) !important; box-shadow: 0 0 0 4px rgba(159,255,220,.055) !important; }
/* Desktop default: mobile dock hidden on desktop */
.mobile-nav {
  display: none !important;
}

@media (min-width: 1180px) {
  body { padding-left: 282px; }
  body { overflow-y: auto !important; }
  .app-sidebar { width: 282px; transform: none; z-index: 60; box-shadow: none; background: rgba(9,11,17,.78); }
  .sidebar-close-btn, .sidebar-backdrop, .sidebar-toggle-btn { display: none !important; }
  .app-header { left: 282px; }
  .shell { width: min(1240px, calc(100% - 40px)); }
  .desktop-tabs { top: 86px; }
}

@media (max-width: 800px) {
  input, textarea, select { font-size: 16px !important; }
  body { padding-bottom: calc(84px + max(12px, env(safe-area-inset-bottom, 12px))) !important; }
  .app-header { height: 58px; padding: 6px 14px; }
  .header-shell { height: 46px; }
  .brand-name, .sync-indicator { display: none; }
  .header-center {
    font-size: 13px;
    padding: 5px 12px;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
  }
  .header-actions { gap: 6px; }
  .header-action-btn { width: 36px; height: 36px; border-radius: 12px; }
  .shell { width: 100%; padding: 8px 10px 0; }
  .desktop-tabs { display: none; }
  .card { border-radius: 20px; }
  .hero-card { min-height: 0; padding: 22px 18px; }
  .hero-body { display: block; }
  .hero-card h1 { margin-top: 10px; font-size: 32px; line-height: 1.05; }
  .hero-card .muted { font-size: 14px; }
  .hero-quick-buttons { margin-top: 16px; grid-template-columns: 1fr 1fr; }
  .grid.two { grid-template-columns: 1fr; }

  body.tab-chat-active {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  body.tab-chat-active .mobile-nav {
    display: flex !important;
  }
  #panel-chat {
    display: none;
  }
  #panel-chat.active {
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--app-height, 100dvh) - 58px - 72px - max(6px, env(safe-area-inset-bottom, 6px))) !important;
    max-height: calc(var(--app-height, 100dvh) - 58px - 72px - max(6px, env(safe-area-inset-bottom, 6px))) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.hide-bottom-bar #panel-chat.active {
    height: calc(var(--app-height, 100dvh) - 58px - max(8px, env(safe-area-inset-bottom, 8px))) !important;
    max-height: calc(var(--app-height, 100dvh) - 58px - max(8px, env(safe-area-inset-bottom, 8px))) !important;
  }
  body.keyboard-open #panel-chat.active {
    height: calc(var(--app-height, 100dvh) - 58px) !important;
    max-height: calc(var(--app-height, 100dvh) - 58px) !important;
  }

  .chat-window-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: rgba(12, 16, 26, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .chat-top-bar {
    min-height: 44px;
    padding: 6px 12px;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .model-select-lbl { display: none; }
  .styled-select {
    max-width: 220px;
    font-size: 15px !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
  }
  .chat-character-bar { min-height: 44px; padding: 6px 10px; flex: 0 0 auto; }
  .chat-character-bar .glass-btn { font-size: 0; min-width: 36px; padding: 6px; }
  .chat-character-bar .glass-btn::after { content: "☺"; font-size: 18px; }
  .chat-messages-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 12px 10px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .chat-bubble { max-width: 92%; }
  .bubble-avatar { display: none; }
  .bubble-body { padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.55; }
  .chat-chips-carousel { flex: 0 0 auto; padding: 6px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chat-composer-form {
    flex: 0 0 auto !important;
    width: calc(100% - 12px) !important;
    margin: 4px auto 6px auto !important;
    padding: 5px 8px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    background: rgba(22, 28, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  }
  .chat-composer-form textarea {
    font-size: 16px !important;
    min-height: 38px !important;
  }
  .chat-composer-form .mic-btn { display: none; }
  .chat-footer-note { display: none; }
  .image-studio-card { padding: 18px 14px; }

  /* Native Mobile Floating Glass Dock */
  .mobile-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    width: auto !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    height: 62px !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 24px !important;
    background: rgba(13, 17, 26, 0.88) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 120 !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease !important;
  }
  body.hide-bottom-bar .mobile-nav {
    display: none !important;
  }
  body.keyboard-open .mobile-nav {
    transform: translateY(130%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .m-tab {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #838e9e !important;
    padding: 3px 2px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .m-tab * {
    pointer-events: none !important;
  }
  .m-tab:active {
    transform: scale(0.92) !important;
  }
  .m-tab .m-icon-wrap {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .m-tab .nav-svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 2.1;
    transition: stroke 0.2s ease, filter 0.2s ease;
  }
  .m-tab .m-lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
    line-height: 1.1 !important;
    transition: color 0.2s ease;
  }
  .m-tab.active {
    color: #9fffdc !important;
    background: rgba(159, 255, 220, 0.08) !important;
  }
  .m-tab.active .m-icon-wrap {
    transform: translateY(-1px) scale(1.08);
  }
  .m-tab.active .nav-svg {
    stroke: #9fffdc !important;
    filter: drop-shadow(0 0 6px rgba(159, 255, 220, 0.45));
  }
  .m-tab.active .m-lbl {
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  /* iOS Bottom Sheet Modals on Mobile */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(3, 5, 10, 0.76) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  }
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    border-radius: 28px 28px 0 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin: 0 !important;
    padding: 12px 18px calc(24px + env(safe-area-inset-bottom, 14px)) 18px !important;
    background: linear-gradient(180deg, rgba(20, 26, 40, 0.98) 0%, rgba(10, 14, 22, 0.99) 100%) !important;
    backdrop-filter: blur(36px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    animation: modal-sheet-slide .32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sheet-drag-handle {
    display: block !important;
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    margin: 2px auto 14px auto;
    cursor: grab;
    touch-action: none;
  }

  .flux-workspace { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 18px 12px; border-radius: 22px; }
}

@media (max-width: 430px) {
  .hero-quick-buttons { grid-template-columns: 1fr; }
  .hero-quick-buttons .btn:nth-child(n+3) { display: none; }
  .metric-card, .bonus-card, .design-card, .pwa-install-banner, .web-sync-banner { padding: 18px; }
  .workspace-shortcuts { max-height: 90px; }
}

/* Keep Telegram's iOS/Android WebView responsive while tapping. Large
   backdrop-filter surfaces are expensive to composite on mobile GPUs. */
@media (max-width: 800px) {
  .card, .app-header, .mobile-nav, .modal-card, .app-sidebar, .flux-workspace {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (max-width: 360px) {
  .m-tab .m-lbl { font-size: 8.5px !important; letter-spacing: -0.02em !important; }
  .m-tab .m-icon-wrap { width: 22px !important; height: 22px !important; }
  .m-tab .nav-svg { width: 19px !important; height: 19px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .light-beam, .aurora { display: none; }
}

@supports not (backdrop-filter: blur(2px)) {
  .card, .app-header, .app-sidebar, .mobile-nav, .flux-workspace { background: var(--panel-solid); }
}

@keyframes panel-arrive { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes message-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes beam-drift { from { transform: rotate(-18deg) translateX(-4%); } to { transform: rotate(-13deg) translateX(16%); } }

/* Liquid Glass & High-Fidelity Physics Enhancements */
.liquid-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(159, 255, 220, 0.04) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 0 20px rgba(159, 255, 220, 0.06) !important;
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
  animation: liquid-drift 12s ease-in-out infinite alternate;
}

.card:hover, .btn:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 24px rgba(159, 255, 220, 0.08);
}

@keyframes liquid-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4%, 3%) rotate(2deg); }
  100% { transform: translate(-3%, -2%) rotate(-1deg); }
}

@keyframes glass-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.shimmer-badge {
  position: relative;
  overflow: hidden;
}
.shimmer-badge::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: glass-shimmer 3.5s infinite;
}

/* Enhanced scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(159,255,220,0.35); }

/* Inline Upscale Buttons for Chat Images & Art Studio */
.chat-bubble-upscale-bar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chat-bubble-upscale-bar .micro-btn {
  background: rgba(159, 255, 220, 0.08);
  border: 1px solid rgba(159, 255, 220, 0.22);
  color: var(--mint);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}
.chat-bubble-upscale-bar .micro-btn:hover,
.chat-bubble-upscale-bar .micro-btn:active {
  background: rgba(159, 255, 220, 0.2);
  border-color: rgba(159, 255, 220, 0.4);
  transform: translateY(-1px);
}

.upscale-direct-box .upscale-upload-trigger {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(159, 255, 220, 0.3);
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
}
.upscale-direct-box .upscale-upload-trigger:hover {
  background: rgba(159, 255, 220, 0.08);
  border-color: var(--mint);
  border-style: solid;
}

/* Native App Tile Grid & Hub Navigation */
.native-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}
@media (max-width: 480px) {
  .native-quick-grid { grid-template-columns: 1fr; gap: 10px; }
}
.native-tile {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.native-tile:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.native-tile:active {
  transform: scale(0.96) !important;
}
.tile-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.tile-blue { background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(59, 130, 246, 0.2)); border: 1px solid rgba(99, 102, 241, 0.4); }
.tile-mint { background: linear-gradient(135deg, rgba(83, 217, 186, 0.35), rgba(16, 185, 129, 0.2)); border: 1px solid rgba(83, 217, 186, 0.4); }
.tile-purple { background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(139, 92, 246, 0.2)); border: 1px solid rgba(168, 85, 247, 0.4); }
.tile-gold { background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(234, 179, 8, 0.2)); border: 1px solid rgba(245, 158, 11, 0.4); }

.tile-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.tile-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tile-desc {
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.tile-arrow {
  color: var(--ink-3);
  font-size: 18px;
  font-weight: 400;
  transition: transform 0.2s ease, color 0.2s ease;
}
.native-tile:hover .tile-arrow {
  transform: translateX(3px);
  color: var(--ink);
}

.native-hub-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hub-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hub-pill-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.hub-pill-btn:active {
  transform: scale(0.95);
}

/* Chat bubble luxury upgrades */
.chat-bubble.user .bubble-body {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 70%, #818cf8 100%) !important;
  color: #ffffff !important;
  border-radius: 20px 20px 4px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.chat-bubble.ai .bubble-body {
  background: rgba(22, 28, 42, 0.78) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  color: #f3f6fc !important;
  border-radius: 20px 20px 20px 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

@keyframes modal-sheet-slide {
  from { transform: translateY(100%); opacity: 0.7; }
  to { transform: translateY(0); opacity: 1; }
}