/* Original June 4 feature-card tokens and rules, scoped to the gallery. */
.app-gallery {
--bg:           oklch(0.13 0.012 290);
  --bg-2:         oklch(0.15 0.014 290);
  --surface:      oklch(0.17 0.014 290);
  --surface-2:    oklch(0.20 0.014 290);
  --surface-hi:   oklch(0.24 0.015 290);
  --hairline:     oklch(0.28 0.014 290 / 0.7);
  --hairline-2:   oklch(0.32 0.014 290 / 0.5);

  /* text */
  --ink:          oklch(0.98 0.005 290);
  --ink-2:        oklch(0.82 0.01 290);
  --ink-3:        oklch(0.65 0.01 290);
  --ink-4:        oklch(0.50 0.01 290);
  --dim:          oklch(0.55 0.01 290);

  /* brand */
  --purple:       oklch(0.72 0.20 295);
  --purple-2:     oklch(0.60 0.22 290);
  --purple-soft:  oklch(0.78 0.16 300);
  --grad-1:       #c4a8ff;
  --grad-2:       #7c5cff;
  --grad-3:       #ff9bb1;

  /* accents */
  --mint:         oklch(0.82 0.13 160);
  --coral:        oklch(0.78 0.16 25);
  --amber:        oklch(0.86 0.14 80);
  --sky:          oklch(0.80 0.13 230);

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;

  /* shadow */
  --sh-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -28px rgba(0,0,0,0.7);
  --sh-glow-purple: 0 30px 80px -20px rgba(124,92,255,0.45);
background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;padding:70px 0;}
.app-gallery .bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  grid-auto-rows: minmax(360px, auto);
  gap: 16px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.app-gallery .cell {
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--hairline);
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition: border-color .2s ease, transform .2s ease;
}
.app-gallery .cell:hover { border-color: rgba(196,168,255,0.28); }
.app-gallery .cell.wide { grid-column: auto; }
.app-gallery .cell.tall { grid-row: auto; }

.app-gallery .cell-head { display: flex; flex-direction: column; gap: 8px; }
.app-gallery .cell-num { color: var(--ink-4); }
.app-gallery .cell-head h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.app-gallery .cell-head p { font-size: 14px; color: var(--ink-3); line-height: 1.5; max-width: 380px; }

.app-gallery .gallery-wrap { max-width:1240px;margin:0 auto;padding:0 28px; }
.app-gallery .sec-head { max-width:820px;margin-bottom:64px; }
.app-gallery .eyebrow { display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;background:oklch(0.18 0.012 290 / .5);border:1px solid var(--hairline);color:var(--ink-2);margin-bottom:28px; }
.app-gallery .eyebrow-dot { width:9px;height:9px;border-radius:50%;background:var(--purple-soft);box-shadow:0 0 0 4px #c4a8ff2e; }
.app-gallery .mono { font:11.5px 'JetBrains Mono',monospace;letter-spacing:.02em;text-transform:lowercase; }
.app-gallery .eyebrow .mono { width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:14.5px;letter-spacing:.04em; }
.app-gallery h2 { font:600 clamp(38px,5.4vw,68px)/1.02 'Space Grotesk',Inter,sans-serif;letter-spacing:-.035em; }
.app-gallery .dim { color:var(--ink-4); }
.app-gallery .cell-head h3 { font-weight:600; }
.app-gallery .gallery-visual { margin-top:auto;min-width:0;font-size:12px;line-height:1.45; }
.app-gallery .gallery-panel { background:#241e2e;border:1px solid #352b40;border-radius:14px;padding:14px;color:#e9e2f3; }
.app-gallery .gallery-flex { display:flex;gap:10px;align-items:center; }
.app-gallery .gallery-flex>strong { font-size:12px;font-weight:600; }
.app-gallery .gallery-flex>div>strong { display:block;font-size:14px;font-weight:600; }
.app-gallery .gallery-app-icon { width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:10px;background:#302341;color:#a68add;font-size:17px; }
.app-gallery .gallery-micro { font-size:9px;color:#b7a8c7;letter-spacing:.035em; }
.app-gallery .gallery-add { margin-left:auto;font-size:10px;white-space:nowrap;background:#a383ed;color:#241535;padding:7px 10px;border-radius:20px;font-weight:600; }
.app-gallery .gallery-task-list { display:grid;gap:12px;margin-top:14px; }
.app-gallery .gallery-task { display:flex;align-items:flex-start;gap:10px;color:#d9cfe4;font-size:12px;line-height:1.5;cursor:pointer; }
.app-gallery .gallery-task input { appearance:none;width:16px;height:16px;flex:none;margin:2px 0 0;border:1.5px solid #8d7a9e;border-radius:5px;background:#1e1927;cursor:pointer; }
.app-gallery .gallery-task input:checked { background:#aa8ae5;border-color:#aa8ae5; }
.app-gallery .gallery-task input:checked::after { content:"✓";display:block;text-align:center;color:#241535;font:12px/13px Inter,sans-serif; }
.app-gallery .gallery-task input:focus-visible { outline:2px solid #c4a8ff;outline-offset:3px; }
.app-gallery .gallery-dot { width:5px;height:5px;border-radius:50%;display:inline-block; }.app-gallery .gallery-dot.amber { background:#d9b266; }.app-gallery .gallery-dot.purple { background:#ad8ce5; }
.app-gallery .gallery-chip-row { display:flex;gap:6px;flex-wrap:wrap;margin-top:10px; }.app-gallery .gallery-chip { display:flex;gap:7px;align-items:center;border:1px solid #342940;background:#251d30;padding:5px 10px;border-radius:20px;font-size:10px;color:#9789a6; }.app-gallery .gallery-chip b { font-weight:500;color:#c0b1d0; }.app-gallery .gallery-chip.active { color:#c9b4e9;border-color:#68518c;background:#30263f; }
.app-gallery .gallery-agenda { display:grid;gap:7px; }.app-gallery .gallery-agenda .gallery-chip-row { margin:0 0 2px; }
.app-gallery .gallery-event { display:flex;gap:13px;align-items:center;padding:11px 13px; }.app-gallery .gallery-when { width:55px;flex:none; }.app-gallery .gallery-when>span { display:block;font-size:8px;color:#998aa9; }.app-gallery .gallery-when>strong { font-size:11px;font-weight:500; }.app-gallery .gallery-event>div:last-child>strong { font-size:11.5px;font-weight:600;display:block; }.app-gallery .gallery-source { display:block;font-size:9px;color:#8e809e;margin-top:3px; }.app-gallery .gallery-no-agenda { display:block;color:#c99f6b;font-size:9px; }
.app-gallery .gallery-chat-tabs { display:flex;align-items:center;justify-content:space-between;gap:5px;padding-bottom:9px;margin-bottom:3px;border-bottom:1px solid #ffffff08;font-size:10px;color:#92809f; }.app-gallery .gallery-chat-tabs>span { padding:5px 9px; }.app-gallery .gallery-chat-tabs>.selected { background:#302440;color:#b394e2;border-radius:8px; }
.app-gallery .gallery-chat-row { display:flex;gap:10px;align-items:center;padding:10px 0; }.app-gallery .gallery-chat-row+ .gallery-chat-row { border-top:1px solid #ffffff06; }.app-gallery .gallery-chat-row>div { min-width:0;flex:1; }.app-gallery .gallery-chat-row p { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:#a695b7;margin-top:4px; }.app-gallery .gallery-chat-name { display:flex;gap:6px;align-items:center;justify-content:space-between; }.app-gallery .gallery-chat-name strong { font-size:12px;font-weight:500; }.app-gallery .gallery-chat-name small { font-size:8px;color:#8c7c9e;white-space:nowrap; }
.app-gallery .gallery-orb,.app-gallery .gallery-person { width:34px;height:34px;flex:none;border-radius:50%; }.app-gallery .gallery-orb { background:radial-gradient(circle at 32% 30%,#f3eaff,#b38ce8 45%,#7754bc);box-shadow:0 0 13px #8e5ad52e; }.app-gallery .gallery-person { display:grid;place-items:center;background:#a68bd9;color:#f4edf9;font-size:12px; }
.app-gallery .gallery-tool { display:flex;gap:10px;align-items:center;padding-bottom:12px; }.app-gallery .gallery-tool+.gallery-tool { border-top:1px solid #ffffff0b;padding-top:12px; }.app-gallery .gallery-tool>div { flex:1; }.app-gallery .gallery-tool strong { font-size:11px;display:block;font-weight:600; }.app-gallery .gallery-tool p { font-size:9px;color:#93819f;margin-top:3px; }.app-gallery .gallery-tool>span:last-child:not(.gallery-toggle) { color:#8e7d9e; }
.app-gallery .gallery-toggle { display:inline-block;flex:none;width:27px;height:15px;padding:2px;border-radius:15px;background:#453c50; }.app-gallery .gallery-toggle:before { content:"";display:block;width:11px;height:11px;border-radius:50%;background:#f9f5ff;box-shadow:0 1px 2px #0004; }.app-gallery .gallery-toggle.on { background:#a184e8; }.app-gallery .gallery-toggle.on:before { margin-left:auto; }
.app-gallery .gallery-rewrite { display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff0b;padding-top:10px;color:#c8b8d9;font-size:10px; }.app-gallery .gallery-rewrite-style { display:flex;gap:10px;margin-top:6px;font-size:9px;color:#95829f; }.app-gallery .gallery-rewrite-style strong { font-weight:400;color:#b49ace; }
.app-gallery .gallery-app-icon.teal { color:#619eaa;background:#25343f; }.app-gallery .gallery-field-label { font-size:9px;color:#a291b1;margin-top:12px;margin-bottom:4px; }.app-gallery .gallery-field { background:#15111c;border:1px solid #352b40;border-radius:7px;padding:8px 10px;font-size:10px;color:#82738e; }.app-gallery .gallery-workspaces { display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:9px;color:#a799b4; }.app-gallery .gallery-workspaces>span { display:block;text-align:center;padding:7px;border:1px solid #342a3f;border-radius:7px;background:#17121e; }.app-gallery .gallery-workspaces>.chosen { color:#72afb8;background:#23323b;border-color:#477882; }.app-gallery .gallery-planner-note { font-size:9px;color:#8c7c99;margin-top:9px; }
.app-gallery .gallery-services { display:grid;gap:9px; }.app-gallery .gallery-service { display:flex;align-items:center;gap:10px; }.app-gallery .gallery-service>div { flex:1; }.app-gallery .gallery-service strong { font-size:12px;font-weight:600; }.app-gallery .gallery-service p { font-size:9px;color:#9d8baa;margin-top:3px; }.app-gallery .gallery-service-icon { display:grid;place-items:center;width:30px;height:32px;flex:none;border-radius:7px;font-size:13px;font-weight:600; }.app-gallery .gallery-service-icon.calendar { color:#aab8e5;background:#2c344d; }.app-gallery .gallery-service-icon.gmail { color:#d5a5b1;background:#3d2b37; }.app-gallery .gallery-connected { font-size:8px;color:#8ab8a4;white-space:nowrap;display:flex;align-items:center;gap:4px; }.app-gallery .gallery-connected i { width:4px;height:4px;border-radius:50%;background:#7dae97; }.app-gallery .gallery-service-controls { display:flex;gap:14px;color:#a487cb;font-size:9px;padding:3px 4px;justify-content:flex-end; }
.app-gallery .gallery-footnote { max-width:1000px;margin:22px auto 0;color:var(--ink-4);font:10px/1.6 'JetBrains Mono',monospace; }
@media(max-width:600px) { .app-gallery { padding:56px 0; }.app-gallery .gallery-wrap { padding:0 18px; }.app-gallery .sec-head { margin-bottom:32px; }.app-gallery h2 { font-size:clamp(32px,8vw,42px); }.app-gallery .eyebrow { padding:7px 12px;gap:9px; }.app-gallery .eyebrow .mono { font-size:10px; }.app-gallery .cell { padding:22px; }.app-gallery .gallery-panel { padding:12px; }.app-gallery .gallery-connected { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { .app-gallery .cell { transition:none; } }