:root {
  --ayampi-primary: #1464ff;
  --ayampi-primary-hover: #0c54df;
  --ayampi-primary-soft: #e8f0ff;
  --ayampi-navy: #061b49;
  --ayampi-background: #eef3ff;
  --ayampi-card: #ffffff;
  --ayampi-secondary-text: #7a78a6;
  --ayampi-warning: #ffb800;
  --ayampi-success: #25c95a;
  --ayampi-danger: #f64d5d;
  --ayampi-border: #dde6f5;
  --ayampi-header: rgba(255, 255, 255, .92);
  --ayampi-overlay: rgba(3, 16, 46, .82);
  --ayampi-shadow: 0 12px 35px rgba(21, 48, 102, .08);
  --ayampi-shadow-hover: 0 18px 42px rgba(21, 48, 102, .13);
  --ayampi-radius-sm: 12px;
  --ayampi-radius: 18px;
  --ayampi-radius-lg: 28px;
  --sidebar-width: 244px;
  color: var(--ayampi-navy);
  background: var(--ayampi-background);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

[data-theme="dark"] {
  --ayampi-navy: #f4f7ff;
  --ayampi-background: #081327;
  --ayampi-card: #111f39;
  --ayampi-secondary-text: #aab5cc;
  --ayampi-primary-soft: #172e58;
  --ayampi-border: #263754;
  --ayampi-header: rgba(17, 31, 57, .92);
  --ayampi-overlay: rgba(1, 7, 20, .88);
  --ayampi-shadow: 0 12px 35px rgba(0, 0, 0, .2);
  --ayampi-shadow-hover: 0 18px 42px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--ayampi-background); color: var(--ayampi-navy); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.drawer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; }
h1 { margin-bottom: .65rem; font-size: clamp(2rem, 4vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.35rem); }
p { color: var(--ayampi-secondary-text); }
.icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
.eyebrow { display: block; margin-bottom: .65rem; color: var(--ayampi-primary); font-size: .7rem; font-weight: 850; letter-spacing: .14em; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: 138px; height: auto; }
.auth-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: var(--ayampi-primary); color: var(--ayampi-card); box-shadow: 0 8px 18px rgba(20, 100, 255, .22); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1.25rem; border: 0; border-radius: 13px; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(.98); }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(20, 100, 255, .25); outline-offset: 2px; }
.button:disabled, .button-disabled { opacity: .48; pointer-events: none; }
.button-primary { background: var(--ayampi-primary); color: #fff; box-shadow: 0 9px 22px rgba(20, 100, 255, .22); }
.button-primary:hover { background: var(--ayampi-primary-hover); box-shadow: 0 12px 26px rgba(20, 100, 255, .28); }
.button-ghost { border: 1px solid var(--ayampi-border); background: var(--ayampi-card); color: var(--ayampi-navy); }
.button-danger { background: color-mix(in srgb, var(--ayampi-danger) 12%, var(--ayampi-card)); color: var(--ayampi-danger); }
.button-small { min-height: 40px; padding: .5rem 1rem; }
.button-block { width: 100%; }
.section-pad { padding: clamp(4rem, 8vw, 7rem) max(1.2rem, calc((100vw - 1180px) / 2)); }
.section-heading { max-width: 620px; margin-bottom: 2.2rem; }
.section-heading p { font-size: 1.02rem; }

/* Public shell */
.public-header { position: sticky; z-index: 50; top: 0; display: flex; height: 70px; align-items: center; justify-content: space-between; padding: 0 max(1.2rem, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--ayampi-border); background: var(--ayampi-header); box-shadow: 0 5px 18px rgba(21, 48, 102, .035); backdrop-filter: blur(16px); }
.public-nav { display: flex; align-items: center; gap: 1.6rem; font-size: .88rem; font-weight: 720; }
.public-nav > a:not(.button):hover { color: var(--ayampi-primary); }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; background: transparent; color: var(--ayampi-navy); font-size: 1.45rem; }
.landing-page { background: #f7f9fc; }
.landing-page .section-pad { padding-top: clamp(3.25rem, 6vw, 5.5rem); padding-bottom: clamp(3.25rem, 6vw, 5.5rem); }
.hero { display: grid; min-height: calc(100vh - 70px); grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero-copy { position: relative; z-index: 2; max-width: 550px; }
.hero-copy h1 { margin-bottom: 1.15rem; font-size: clamp(2.8rem, 5.2vw, 5rem); letter-spacing: -.055em; }
.hero-summary { max-width: 540px; margin-bottom: 0; color: #536178; font-size: clamp(.98rem, 1.35vw, 1.12rem); }
.hero-actions { display: flex; gap: .65rem; margin: 1.65rem 0 1.15rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: .45rem 1rem; color: #6b778c; font-size: .72rem; font-weight: 680; }
.trust-row span::before { content: "✓"; margin-right: .35rem; color: #2e6f9e; font-weight: 900; }
.photo-carousel { position: relative; min-width: 0; }
.carousel-track { position: relative; overflow: hidden; aspect-ratio: 1.06 / 1; border-radius: 8px 30px 8px 30px; background: #0c1c2b; box-shadow: 0 32px 65px rgba(8, 26, 43, .22); }
.carousel-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: scale(1.035); transition: opacity .7s ease, transform 1.05s ease; }
.carousel-slide::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(5, 16, 29, .06) 28%, rgba(5, 16, 29, .86) 100%); }
.carousel-slide.active { opacity: 1; transform: scale(1); }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-overlay { position: absolute; z-index: 2; inset: auto 0 0; padding: 7rem clamp(1.35rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.5rem); color: #fff; }
.slide-overlay span { font-size: .64rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.slide-overlay h2 { max-width: 580px; margin: .5rem 0 .4rem; font-size: clamp(1.45rem, 2.5vw, 2.35rem); }
.slide-overlay p { margin: 0; color: rgba(255, 255, 255, .76); font-size: .84rem; }
.carousel-status { position: absolute; z-index: 5; top: 1rem; right: 1rem; left: 1rem; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: .59rem; font-weight: 850; letter-spacing: .13em; }
.carousel-status > span { padding: .4rem .55rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(4, 18, 32, .35); backdrop-filter: blur(9px); }
.carousel-status b { font-size: .68rem; }
.carousel-control { position: absolute; z-index: 6; top: 50%; display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(255, 255, 255, .42); border-radius: 50%; background: rgba(3, 15, 29, .3); color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease; }
.carousel-control:hover { transform: scale(1.06); background: rgba(3, 15, 29, .66); }
.carousel-control .icon { width: 16px; height: 16px; }
.carousel-control.prev { left: 13px; }
.carousel-control.next { right: 13px; }
.carousel-dots { position: absolute; z-index: 6; right: 1.5rem; bottom: 1.35rem; display: flex; gap: .36rem; }
.carousel-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .46); transition: width .25s ease, background .25s ease; }
.carousel-dots button.active { width: 22px; background: #fff; }
.modules { background: #fff; }
.landing-page .compact-heading { max-width: 670px; margin-bottom: 1.55rem; }
.landing-page .compact-heading h2 { margin-bottom: .55rem; }
.landing-page .compact-heading p { margin-bottom: 0; font-size: .95rem; }
.module-grid, .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.feature-card { position: relative; min-height: 330px; overflow: hidden; border-radius: 20px; background: #0b1d31; box-shadow: 0 14px 34px rgba(10, 31, 51, .12); transition: transform .25s ease, box-shadow .25s ease; }
.feature-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(5,15,27,.02) 22%, rgba(5,15,27,.94) 100%); }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(10, 31, 51, .18); }
.feature-card > img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.feature-card:hover > img { transform: scale(1.035); }
.feature-card-copy { position: absolute; z-index: 2; inset: auto 0 0; padding: 1.15rem; color: #fff; }
.feature-card-copy small { position: absolute; top: 1.35rem; right: 1.2rem; color: rgba(255,255,255,.58); font-size: .63rem; font-weight: 800; }
.feature-icon, .quick-card > span, .delivery-icon, .tool-card > span, .activity-thumb, .metric-icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--ayampi-primary-soft); color: var(--ayampi-primary); }
.feature-icon { width: 52px; height: 52px; margin-bottom: .9rem; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px); }
.feature-icon .icon { width: 25px; height: 25px; }
.feature-card h3 { margin: 0 0 .35rem; font-size: 1.35rem; text-transform: none; }
.feature-card p { max-width: 310px; margin: 0; color: rgba(255,255,255,.72); font-size: .8rem; }
.pwa-wrap { overflow: hidden; background: #07192d; }
.pwa-section { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; color: #fff; }
.pwa-section p { color: #a9b7c8; }
.device-art { position: relative; min-height: 390px; }
.browser-frame { position: absolute; top: 5%; left: 0; width: 88%; overflow: hidden; aspect-ratio: 16 / 10; border: 6px solid #fff; border-radius: 15px; background: #eef3f8; box-shadow: 0 28px 65px rgba(0, 0, 0, .32); }
.browser-bar { display: flex; height: 27px; align-items: center; gap: 5px; padding: 0 10px; background: #fff; }
.browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #c3cedb; }
.browser-bar span { margin-left: .4rem; color: #8290a3; font-size: .53rem; }
.browser-ui { display: grid; height: calc(100% - 27px); grid-template-columns: 58px 1fr; background: #f0f4f9; }
.browser-ui aside { display: grid; align-content: start; justify-items: center; gap: 12px; padding: 13px 8px; background: #fff; }
.browser-ui aside img { width: 28px; height: 28px; object-fit: contain; }
.browser-ui aside b { width: 24px; height: 5px; border-radius: 5px; background: #d7e0ea; }
.browser-content { min-width: 0; padding: 20px; }
.browser-content small, .browser-content strong { display: block; color: #13263b; }
.browser-content small { color: #2e6f9e; font-size: .48rem; font-weight: 900; letter-spacing: .12em; }
.browser-content strong { margin: 3px 0 12px; font-size: .86rem; }
.browser-content > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.browser-content > div img { width: 100%; height: 145px; border-radius: 8px; object-fit: cover; }
.phone-frame { position: absolute; z-index: 3; right: 0; bottom: 0; width: 31%; overflow: hidden; aspect-ratio: 9 / 18; border: 6px solid #fff; border-radius: 28px; background: #f3f6fa; box-shadow: 0 25px 58px rgba(0, 0, 0, .38); }
.phone-speaker { position: absolute; z-index: 4; top: 6px; left: 50%; width: 34%; height: 5px; transform: translateX(-50%); border-radius: 5px; background: #c5cfda; }
.phone-ui { display: block; height: 100%; padding: 21px 8px 9px; color: #14273b; background: #f3f6fa; }
.phone-ui header { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; font-size: .48rem; font-weight: 900; }
.phone-ui header img { width: 20px; height: 20px; object-fit: contain; }
.phone-photo { width: 100%; height: 42%; margin-bottom: 8px; border-radius: 8px; object-fit: cover; }
.phone-ui small { display: block; color: #2e6f9e; font-size: .42rem; font-weight: 900; letter-spacing: .1em; }
.phone-ui strong { display: block; margin-top: 2px; font-size: .62rem; }
.phone-ui p { margin: 2px 0 10px; color: #7f8b9b; font-size: .46rem; }
.phone-ui nav { position: absolute; right: 8px; bottom: 8px; left: 8px; display: flex; justify-content: space-around; padding: 7px; border-radius: 8px; background: #fff; }
.phone-ui nav i { width: 12px; height: 3px; border-radius: 3px; background: #c7d1dd; }
.pwa-copy h2 { max-width: 480px; margin-bottom: .8rem; font-size: clamp(2rem, 3.7vw, 3.2rem); }
.pwa-copy > p { max-width: 460px; font-size: .94rem; }
.qr-card { display: flex; max-width: 390px; align-items: center; gap: .85rem; margin: 1.25rem 0; padding: .72rem; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); }
.qr-card img { width: 78px; height: 78px; padding: 4px; border-radius: 9px; background: #fff; }
.qr-card strong, .qr-card small { display: block; }
.qr-card strong { font-size: .8rem; }
.qr-card small { margin-top: .15rem; color: #8192a6; font-size: .66rem; }
.pricing { background: #eef3f8; }
.pricing .section-heading { margin-right: auto; margin-left: auto; text-align: center; }
.price-grid { grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: center; }
.price-card { position: relative; display: grid; padding: 1.35rem; border: 1px solid #dce4ee; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(13, 39, 65, .07); }
.price-card > span { color: #2e6f9e; font-size: .66rem; font-weight: 900; letter-spacing: .14em; }
.price-card h3 { margin: .65rem 0 .45rem; font-size: 2rem; }
.price-card h3 small, .price-card h3 em { font-size: .75rem; font-style: normal; }
.price-card h3 em { color: #7b8797; }
.price-card p { margin-bottom: 1rem; font-size: .8rem; }
.price-card .button { min-height: 42px; margin-top: auto; }
.price-card.featured { border: 2px solid #2e6f9e; }
.price-card.featured > b { position: absolute; top: .85rem; right: .85rem; padding: .3rem .52rem; border-radius: 999px; background: #e5eef5; color: #245a81; font-size: .58rem; letter-spacing: .07em; }
.public-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 2rem; padding: 1.35rem max(1.2rem, calc((100vw - 1180px) / 2)); background: #041426; color: #fff; }
.public-footer p, .public-footer small { margin: 0; color: #91a0b3; }
.public-footer p { font-size: .78rem; }
.public-footer small { justify-self: end; font-size: .68rem; }
.footer-brand { width: fit-content; padding: .34rem .5rem; border-radius: 8px; background: #fff; }
.footer-brand .brand-logo { width: 108px; }

/* Auth and shared feedback */
.flash-stack { position: fixed; z-index: 100; top: 82px; right: 1rem; display: grid; width: min(390px, calc(100% - 2rem)); gap: .5rem; }
.flash { padding: .9rem 1rem; border-left: 4px solid var(--ayampi-primary); border-radius: var(--ayampi-radius-sm); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow-hover); animation: toast-in .25s ease both; }
.flash-error { border-color: var(--ayampi-danger); }.flash-success { border-color: var(--ayampi-success); }.flash-warning { border-color: var(--ayampi-warning); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
.auth-page { display: grid; min-height: calc(100vh - 70px); place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(100%, 460px); padding: clamp(1.5rem, 5vw, 2.6rem); border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius-lg); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow); }
.auth-card .auth-icon { margin-bottom: 1.4rem; }.auth-card h1 { margin-bottom: .5rem; font-size: 2.15rem; }
.auth-logo { width: 70px; height: 70px; margin-bottom: 1.25rem; padding: 6px; border: 1px solid var(--ayampi-border); border-radius: 16px; background: #fff; object-fit: contain; }
.auth-tagline { margin: -.15rem 0 0; color: #2e6f9e; font-size: .88rem; font-weight: 750; letter-spacing: .035em; }
.auth-card form, .stack-form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.auth-card label, .stack-form label { display: grid; gap: .38rem; color: var(--ayampi-navy); font-size: .83rem; font-weight: 750; }
.auth-card input, .stack-form input, .stack-form select, .user-list select, .field-row input, .field-row select { width: 100%; min-width: 0; padding: .78rem .88rem; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius-sm); outline: none; background: var(--ayampi-background); color: var(--ayampi-navy); }
.auth-card input:focus, .stack-form input:focus, .field-row input:focus, .field-row select:focus { border-color: var(--ayampi-primary); box-shadow: 0 0 0 3px rgba(20, 100, 255, .11); }
.auth-card label small { color: var(--ayampi-secondary-text); font-weight: 500; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .78rem; }
.form-row a, .auth-switch a { color: var(--ayampi-primary); font-weight: 750; }
.check { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; }.check input { width: auto; }
.auth-switch { margin: 1.3rem 0 0; text-align: center; font-size: .85rem; }

/* Application shell */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; padding: 1.35rem; border-right: 1px solid var(--ayampi-border); background: var(--ayampi-card); }
.sidebar > .brand { padding: .2rem .35rem 1.8rem; }
.sidebar > .brand .brand-logo { width: 150px; }
[data-theme="dark"] .sidebar > .brand .brand-logo, [data-theme="dark"] .mobile-brand .brand-logo { padding: .28rem .4rem; border-radius: 9px; background: #fff; }
.side-nav { display: grid; gap: .3rem; }
.side-nav a { display: flex; min-height: 46px; align-items: center; gap: .75rem; padding: .68rem .8rem; border-radius: var(--ayampi-radius-sm); color: var(--ayampi-secondary-text); font-size: .88rem; font-weight: 720; transition: background .18s ease, color .18s ease, transform .18s ease; }
.side-nav a:hover { transform: translateX(2px); }
.side-nav a.active, .side-nav a:hover { background: var(--ayampi-primary-soft); color: var(--ayampi-primary); }
.sidebar-profile { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding: 1rem .25rem 0; border-top: 1px solid var(--ayampi-border); }
.sidebar-profile div { min-width: 0; }.sidebar-profile strong, .sidebar-profile small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.sidebar-profile small { color: var(--ayampi-secondary-text); font-size: .67rem; }
.avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--ayampi-primary-soft); color: var(--ayampi-primary); font-size: .85rem; font-weight: 900; }
.app-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.app-header { position: sticky; z-index: 20; top: 0; display: flex; height: 64px; align-items: center; justify-content: flex-end; padding: 0 clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid color-mix(in srgb, var(--ayampi-border) 70%, transparent); background: color-mix(in srgb, var(--ayampi-background) 88%, transparent); backdrop-filter: blur(16px); }
.mobile-brand { display: none; }.app-header-actions { display: flex; align-items: center; gap: .7rem; }
.icon-button { position: relative; display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: var(--ayampi-card); color: var(--ayampi-primary); cursor: pointer; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid var(--ayampi-card); border-radius: 50%; background: var(--ayampi-danger); }
.page-container { width: min(1160px, 100%); min-width: 0; margin: auto; padding: clamp(1.5rem, 4vw, 2.8rem) clamp(1rem, 4vw, 2.8rem) 6rem; }
.bottom-nav, .more-drawer, .mobile-page-label { display: none; }
.welcome-row, .page-heading, .section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.welcome-row h1, .page-heading h1 { font-size: clamp(2rem, 3.7vw, 3.05rem); }
.compact-heading { margin-bottom: 1.4rem; }.compact-heading p { margin-bottom: 0; }
.trial-chip { padding: .58rem .85rem; border-radius: 999px; background: var(--ayampi-primary-soft); color: var(--ayampi-primary); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 1.7rem 0 2.7rem; }
.metric-grid article { display: flex; min-width: 0; align-items: center; gap: .9rem; padding: 1.05rem; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow); }
.metric-grid small, .metric-grid em { display: block; overflow: hidden; color: var(--ayampi-secondary-text); font-size: .72rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.metric-grid strong { display: block; margin: .05rem 0; font-size: 1.7rem; line-height: 1; }
.metric-icon { width: 43px; height: 43px; }.metric-icon .icon { width: 20px; }
.section-title h2 { margin-bottom: .35rem; font-size: 1.45rem; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.quick-card { display: flex; min-width: 0; align-items: center; gap: .85rem; padding: 1.05rem; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--ayampi-shadow-hover); }.quick-card:active, .coverage-card:active, .delivery-card:active { transform: scale(.985); }
.quick-card > span { width: 44px; height: 44px; }.quick-card > span .icon { width: 20px; }.quick-card div { min-width: 0; }.quick-card h3 { margin: 0 0 .18rem; font-size: .86rem; letter-spacing: .04em; }.quick-card p { overflow: hidden; margin: 0; font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.card-chevron { width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto; color: var(--ayampi-primary); }
.activity-section { margin-top: 2.8rem; }.activity-card { overflow: hidden; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow); }
.activity-item { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-bottom: 1px solid var(--ayampi-border); }.activity-item:last-child { border: 0; }.activity-item > div { min-width: 0; }.activity-item strong, .activity-item small { display: block; }.activity-item strong { overflow: hidden; font-size: .86rem; white-space: nowrap; text-overflow: ellipsis; }.activity-item small { margin-top: .15rem; color: var(--ayampi-secondary-text); font-size: .7rem; }.activity-thumb { width: 40px; height: 40px; border-radius: var(--ayampi-radius-sm); }.activity-thumb .icon { width: 18px; }
.notice-card { margin: 1rem 0 1.8rem; padding: 1.2rem; border: 1px solid var(--ayampi-border); border-left: 5px solid var(--ayampi-warning); border-radius: var(--ayampi-radius); background: var(--ayampi-card); }.notice-card h2 { font-size: 1.12rem; }.notice-card p { margin-bottom: .55rem; }
.search-box { display: flex; width: min(100%, 560px); min-height: 50px; align-items: center; gap: .55rem; margin: 1rem 0; padding: 0 .9rem; border: 1px solid var(--ayampi-border); border-radius: 15px; background: var(--ayampi-card); box-shadow: 0 8px 25px rgba(21, 48, 102, .04); }.search-box .icon { width: 20px; color: var(--ayampi-secondary-text); }.search-box input { width: 100%; min-width: 0; padding: .8rem 0; border: 0; outline: 0; background: transparent; color: var(--ayampi-navy); }.search-submit { border: 0; background: transparent; color: var(--ayampi-primary); font-size: .78rem; font-weight: 800; cursor: pointer; }
.filter-tabs, .admin-tabs { display: flex; max-width: 100%; gap: .45rem; overflow-x: auto; padding: .2rem 0 1.25rem; scrollbar-width: none; }.filter-tabs::-webkit-scrollbar, .admin-tabs::-webkit-scrollbar { display: none; }.filter-tabs a, .admin-tabs a { min-height: 38px; padding: .48rem .82rem; border: 1px solid var(--ayampi-border); border-radius: 999px; background: var(--ayampi-card); font-size: .78rem; font-weight: 750; white-space: nowrap; }.filter-tabs a.active { border-color: var(--ayampi-primary); background: var(--ayampi-primary); color: #fff; }
.coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }.coverage-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow); transition: transform .18s ease, box-shadow .18s ease; }.coverage-card:hover { transform: translateY(-3px); box-shadow: var(--ayampi-shadow-hover); }.coverage-card > .card-chevron { position: absolute; right: 1rem; bottom: 1.2rem; }
.coverage-thumb { height: 155px; padding: .9rem; background: var(--ayampi-primary-soft); }.coverage-thumb span { padding: .28rem .52rem; border-radius: 99px; background: rgba(255, 255, 255, .88); color: #061b49; font-size: .64rem; font-weight: 850; }.scene-city { background: linear-gradient(160deg, #c4d5ff 0 48%, #315b9e 48% 62%, #102d64 62%); }.scene-coast { background: linear-gradient(160deg, #a9d9ff 0 45%, #f5e6c2 45% 58%, #398fd5 58%); }.scene-drone { background: linear-gradient(145deg, #c6d0a7, #54733d 55%, #ddcba5 56%); }.scene-portrait { background: linear-gradient(145deg, #f0d4ca, #84718f); }
.coverage-info { padding: 1rem; }.coverage-info h2 { overflow: hidden; margin: 0 1.5rem .25rem 0; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }.coverage-info p { margin: 0 0 .4rem; font-size: .76rem; }.coverage-info small { color: var(--ayampi-secondary-text); font-size: .7rem; }
.usage-card { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; padding: .7rem .9rem; border: 1px solid var(--ayampi-border); border-radius: 14px; background: var(--ayampi-card); }.usage-card strong { color: var(--ayampi-primary); font-size: 1.2rem; }.usage-card span { color: var(--ayampi-secondary-text); font-size: .78rem; }
.delivery-list { display: grid; gap: .7rem; }.delivery-card { display: flex; min-width: 0; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow); transition: transform .18s ease, box-shadow .18s ease; }.delivery-card:hover { transform: translateY(-2px); box-shadow: var(--ayampi-shadow-hover); }.delivery-main { min-width: 0; flex: 1; }.delivery-title-row { display: flex; align-items: center; gap: .6rem; }.delivery-main h2 { overflow: hidden; margin: 0; font-size: 1.02rem; white-space: nowrap; text-overflow: ellipsis; }.delivery-main > p { margin: .15rem 0 0; font-size: .82rem; }.delivery-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .58rem; color: var(--ayampi-secondary-text); font-size: .7rem; }.status-pill { flex: 0 0 auto; padding: .22rem .48rem; border-radius: 99px; background: color-mix(in srgb, var(--ayampi-success) 16%, var(--ayampi-card)); color: color-mix(in srgb, var(--ayampi-success) 65%, var(--ayampi-navy)); font-size: .6rem; font-weight: 850; }.status-pill.expired { background: color-mix(in srgb, var(--ayampi-secondary-text) 14%, var(--ayampi-card)); color: var(--ayampi-secondary-text); }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }.tool-card { display: flex; min-height: 174px; flex-direction: column; align-items: flex-start; padding: 1.15rem; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); color: var(--ayampi-navy); text-align: left; box-shadow: var(--ayampi-shadow); }.tool-card > span { width: 46px; height: 46px; }.tool-card > span .icon { width: 21px; }.tool-card strong { margin-top: .9rem; font-size: .98rem; }.tool-card small { margin-top: .22rem; color: var(--ayampi-secondary-text); }.tool-card em { margin-top: auto; color: var(--ayampi-primary); font-size: .62rem; font-style: normal; font-weight: 850; letter-spacing: .05em; }
.settings-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }.settings-card, .form-card, .detail-card, .admin-card { padding: 1.05rem; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow); }.settings-card h2 { margin: .15rem 0 .55rem; color: var(--ayampi-secondary-text); font-size: .66rem; letter-spacing: .13em; }.setting-row, .settings-link, .settings-disclosure summary { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem .1rem; border: 0; border-bottom: 1px solid var(--ayampi-border); background: transparent; color: var(--ayampi-navy); text-align: left; list-style: none; cursor: pointer; }.setting-row:last-child, .settings-link:last-child, .settings-disclosure:last-child summary { border-bottom: 0; }.setting-row b, .setting-row small, .settings-link b, .settings-link small { display: block; }.setting-row small, .settings-link small { color: var(--ayampi-secondary-text); font-size: .7rem; font-weight: 400; }.settings-link .icon, .settings-disclosure summary .icon { width: 17px; color: var(--ayampi-secondary-text); transition: transform .2s ease; }.settings-link.muted { color: var(--ayampi-secondary-text); cursor: default; }.settings-disclosure summary::-webkit-details-marker { display: none; }.settings-disclosure[open] summary .icon { transform: rotate(90deg); }.settings-fields { padding: .2rem .35rem .8rem; border-bottom: 1px solid var(--ayampi-border); }.field-row { display: grid; gap: .32rem; margin: .65rem 0; font-size: .78rem; font-weight: 750; }.field-row small { color: var(--ayampi-secondary-text); font-weight: 400; }.switch { position: relative; width: 44px !important; height: 24px !important; flex: 0 0 auto; accent-color: var(--ayampi-primary); }.settings-save { align-self: end; }.settings-avatar { width: 46px; height: 46px; }.logout-form { margin-top: .9rem; }.form-card { max-width: 720px; }.detail-card { display: grid; grid-template-columns: minmax(220px, .65fr) 1fr; gap: 1.5rem; align-items: center; }.detail-thumb { min-height: 260px; border-radius: 15px; }
.paywall-card { width: min(640px, 100%); margin: 5vh auto; padding: clamp(2rem, 6vw, 3.5rem); border-radius: var(--ayampi-radius-lg); background: var(--ayampi-card); text-align: center; box-shadow: var(--ayampi-shadow); }.paywall-card > span { color: var(--ayampi-warning); font-size: 3rem; }.paywall-prices { display: flex; justify-content: center; gap: 1rem; margin: 1.7rem 0; }.paywall-prices strong { padding: 1rem; border-radius: 14px; background: var(--ayampi-background); }.paywall-prices small { color: var(--ayampi-secondary-text); }
.empty-state { padding: 2rem; color: var(--ayampi-secondary-text); text-align: center; }.empty-state > span { display: inline-grid; color: var(--ayampi-primary); }.empty-state > span .icon { width: 30px; height: 30px; }.empty-state h3 { margin: .55rem 0; color: var(--ayampi-navy); }.empty-state.wide { grid-column: 1 / -1; border: 1px dashed var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); }

/* Admin */
.admin-tabs { margin-bottom: .8rem; }.admin-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }.admin-columns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: .9rem; }.user-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(230px, .8fr); align-items: center; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--ayampi-border); }.user-list article:last-child { border: 0; }.user-list small { display: block; overflow-wrap: anywhere; color: var(--ayampi-secondary-text); font-size: .68rem; }.user-list form { display: flex; gap: .32rem; }.user-list button { padding: .5rem; border: 0; border-radius: 8px; background: var(--ayampi-primary); color: #fff; }.admin-empty { margin-top: 1.5rem; }

@media (max-width: 1024px) {
  :root { --sidebar-width: 210px; }
  .hero { gap: 2rem; }.hero-copy h1 { font-size: clamp(2.55rem, 5vw, 3.7rem); }
  .user-list article { grid-template-columns: auto minmax(0, 1fr); }.user-admin-actions { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero, .pwa-section { grid-template-columns: 1fr; }.hero { min-height: auto; }.hero-copy { max-width: 680px; }.photo-carousel { width: min(100%, 720px); margin: auto; }.carousel-track { aspect-ratio: 16 / 10; }
  .pwa-copy { grid-row: 1; }.device-art { min-height: 350px; }.module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feature-card { min-height: 280px; }.feature-card:last-child { grid-column: 1 / -1; min-height: 240px; }
  .coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.settings-layout, .admin-columns { grid-template-columns: 1fr; }.admin-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 0px; }
  .sidebar { display: none; }.app-content { margin-left: 0; }.app-header { height: 58px; justify-content: space-between; padding: 0 1rem; background: var(--ayampi-header); }.mobile-brand { display: inline-flex; }.mobile-brand .brand-logo { width: 112px; }.app-header-actions .avatar { width: 34px; height: 34px; }.icon-button { width: 36px; height: 36px; background: transparent; }
  .page-container { padding: 1.25rem 1rem calc(6rem + env(safe-area-inset-bottom)); }.bottom-nav { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: .42rem .4rem calc(.42rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ayampi-border); background: var(--ayampi-header); box-shadow: 0 -8px 28px rgba(6, 27, 73, .07); backdrop-filter: blur(16px); }.bottom-nav a, .bottom-nav button { display: flex; min-width: 0; min-height: 45px; flex-direction: column; align-items: center; justify-content: center; gap: .16rem; padding: 0; border: 0; background: transparent; color: var(--ayampi-secondary-text); font-size: .63rem; font-weight: 750; }.bottom-nav .icon { width: 21px; height: 21px; }.bottom-nav .active { color: var(--ayampi-primary); }
  .more-drawer { position: fixed; z-index: 80; inset: 0; display: block; }.more-drawer[hidden] { display: none; }.drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(3, 11, 28, .52); }.more-drawer section { position: absolute; right: 0; bottom: 0; left: 0; padding: .7rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 23px 23px 0 0; background: var(--ayampi-card); box-shadow: 0 -18px 55px rgba(3, 11, 28, .2); animation: drawer-up .22s ease both; }.drawer-handle { width: 40px; height: 4px; margin: 0 auto .8rem; border-radius: 4px; background: var(--ayampi-border); }.more-drawer h2 { margin-bottom: .4rem; font-size: 1.25rem; }.more-drawer a, .drawer-logout { display: flex; width: 100%; min-height: 50px; align-items: center; gap: .75rem; padding: .75rem .2rem; border: 0; border-bottom: 1px solid var(--ayampi-border); background: transparent; color: var(--ayampi-navy); text-align: left; }.drawer-logout { color: var(--ayampi-danger); }.more-drawer form { margin: 0; }
  @keyframes drawer-up { from { transform: translateY(35%); opacity: .6; } }
  .welcome-row h1, .page-heading h1 { font-size: 2rem; }.metric-grid { margin: 1.25rem 0 2.2rem; }.metric-grid article { display: block; padding: .9rem; }.metric-icon { width: 36px; height: 36px; margin-bottom: .65rem; }.metric-grid strong { font-size: 1.55rem; }.quick-grid { grid-template-columns: 1fr; }.activity-section { margin-top: 2.2rem; }
}

@media(max-width:640px) {
  h1 { font-size: 2rem; }.public-header { height: 62px; }.menu-toggle { display: grid; place-items: center; }.public-nav { position: absolute; top: 68px; right: 1rem; left: 1rem; display: none; flex-direction: column; align-items: stretch; gap: .3rem; padding: .8rem; border: 1px solid var(--ayampi-border); border-radius: var(--ayampi-radius); background: var(--ayampi-card); box-shadow: var(--ayampi-shadow-hover); }.public-nav.open { display: flex; }.public-nav a { min-height: 44px; padding: .65rem; text-align: center; }
  .section-pad { padding: 3.25rem 1rem; }.landing-page .section-pad { padding-top: 3.25rem; padding-bottom: 3.25rem; }.hero { gap: 1.6rem; padding-top: 2.15rem; }.hero-copy h1 { font-size: clamp(2.35rem, 11vw, 3.05rem); }.hero-summary { font-size: .94rem; }.hero-actions { flex-direction: column; margin-top: 1.35rem; }.trust-row { display: grid; gap: .32rem; }.carousel-track { aspect-ratio: 4 / 5; border-radius: 6px 22px 6px 22px; }.slide-overlay { padding: 5.5rem 1.15rem 1.2rem; }.slide-overlay h2 { padding-right: .5rem; font-size: 1.52rem; }.slide-overlay p { padding-right: 3.7rem; font-size: .78rem; }.carousel-status { top: .8rem; right: .8rem; left: .8rem; }.carousel-dots { right: 1.1rem; bottom: 1.05rem; }.carousel-control { top: 46%; width: 34px; height: 34px; }.module-grid { grid-template-columns: 1fr; }.feature-card, .feature-card:last-child { min-height: 260px; grid-column: auto; }.feature-icon { width: 46px; height: 46px; }.device-art { min-height: 265px; }.browser-frame { width: 91%; }.browser-content { padding: 13px; }.browser-content > div img { height: 96px; }.phone-frame { width: 34%; }.qr-card { align-items: center; }.qr-card img { width: 74px; height: 74px; }.price-grid { grid-template-columns: 1fr; }.public-footer { grid-template-columns: 1fr; gap: .45rem; }.public-footer small { justify-self: start; }
  .flash-stack { top: 68px; }.auth-page { min-height: calc(100vh - 62px); align-items: start; }.auth-card { border-radius: 22px; }.field-grid { grid-template-columns: 1fr; }
  .welcome-row, .page-heading { display: flex; }.welcome-row { display: block; }.trial-chip { display: inline-block; margin-top: .4rem; }.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }.metric-grid article { min-height: 115px; }.metric-grid em { display: none; }.metric-grid small { white-space: normal; }.metric-grid strong { margin-top: .3rem; }.section-title h2 { font-size: 1.3rem; }
  .mobile-page-label { display: flex; align-items: center; gap: .25rem; margin-bottom: .8rem; font-size: .82rem; font-weight: 800; }.mobile-page-label .icon { width: 17px; }.module-heading .eyebrow, .settings-heading .eyebrow { display: none; }.module-heading h1, .settings-heading h1 { font-size: 1.65rem; }.module-heading p { font-size: .85rem; }.new-item-button { width: 46px; height: 46px; min-height: 46px; flex: 0 0 auto; padding: 0; border-radius: 50%; }.new-item-button .icon { width: 21px; }.desktop-button-label { display: none; }
  .search-box { width: 100%; margin-top: .6rem; }.filter-tabs { margin-right: -1rem; padding-right: 1rem; }.coverage-grid { grid-template-columns: 1fr; }.coverage-card { display: grid; grid-template-columns: 98px minmax(0, 1fr); min-height: 98px; }.coverage-thumb { height: 100%; min-height: 98px; padding: .55rem; }.coverage-thumb span { font-size: .55rem; }.coverage-info { align-self: center; padding: .85rem 2.2rem .85rem .85rem; }.coverage-info h2 { font-size: .96rem; }.coverage-card > .card-chevron { right: .75rem; bottom: 50%; transform: translateY(50%); }
  .delivery-card { align-items: flex-start; padding: .9rem; }.delivery-icon { width: 42px; height: 42px; }.delivery-title-row { align-items: flex-start; }.delivery-main h2 { white-space: normal; }.delivery-meta { gap: .25rem .7rem; }.delivery-card > .card-chevron { align-self: center; }.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }.tool-card { min-height: 145px; align-items: center; padding: .85rem .45rem; text-align: center; }.tool-card > span { width: 42px; height: 42px; }.tool-card strong { font-size: .82rem; }.tool-card small { font-size: .67rem; }.tool-card em { font-size: .54rem; }
  .settings-layout { display: block; }.settings-card { margin-bottom: .75rem; padding: .9rem 1rem; }.settings-save { width: 100%; }.settings-avatar { margin-top: .1rem; }.detail-card { grid-template-columns: 1fr; }.detail-thumb { min-height: 190px; }.page-heading .button-ghost { margin-bottom: 1rem; }.paywall-prices { flex-direction: column; }.admin-metrics { grid-template-columns: repeat(2, 1fr); }.admin-tabs { margin-right: -1rem; padding-right: 1rem; }.user-list article { grid-template-columns: auto minmax(0, 1fr); }.user-list form { grid-column: 1 / -1; flex-wrap: wrap; }.user-list select { flex: 1; min-width: 130px; }
}

@media (max-width: 430px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tool-card { min-height: 152px; }.metric-icon { display: none; }.metric-grid article { min-height: 88px; }.delivery-icon { display: none; }.delivery-meta span:last-child { flex-basis: 100%; }.form-row { align-items: flex-start; flex-direction: column; }
}

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

/* CAPTION workspace */
.stack-form textarea,.caption-form textarea,.caption-form select{width:100%;padding:.78rem .88rem;border:1px solid var(--ayampi-border);border-radius:var(--ayampi-radius-sm);background:var(--ayampi-background);color:var(--ayampi-navy);font:inherit;resize:vertical}.context-fields{padding:.9rem;border:1px solid var(--ayampi-border);border-radius:var(--ayampi-radius-sm)}.context-fields summary{cursor:pointer;font-weight:800}.context-fields[open] summary{margin-bottom:1rem}.real-thumb{position:relative;padding:0;overflow:hidden}.real-thumb img{width:100%;height:100%;object-fit:cover}.real-thumb span{position:absolute;top:.7rem;left:.7rem}.heading-actions{display:flex;flex-wrap:wrap;gap:.5rem}.coverage-meta-card{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin:1rem 0 2rem;padding:1rem;border:1px solid var(--ayampi-border);border-radius:var(--ayampi-radius);background:var(--ayampi-card);box-shadow:var(--ayampi-shadow)}.coverage-meta-card small,.coverage-meta-card strong{display:block}.coverage-meta-card small{color:var(--ayampi-secondary-text);font-size:.67rem}.coverage-meta-card strong{overflow-wrap:anywhere;font-size:.82rem}.caption-toolbar{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.caption-toolbar h2{margin:0;font-size:1.4rem}.upload-card{display:flex;align-items:end;gap:1rem;margin-bottom:1rem;padding:1rem;border:1px dashed var(--ayampi-primary);border-radius:var(--ayampi-radius);background:var(--ayampi-card)}.upload-card label{display:grid;flex:1;gap:.35rem;font-weight:800}.upload-card small{display:block;color:var(--ayampi-secondary-text);font-weight:400}.photo-editor-grid{display:grid;gap:1rem}.photo-editor-card{display:grid;grid-template-columns:minmax(220px,34%) minmax(0,1fr);gap:1rem;padding:1rem;border:1px solid var(--ayampi-border);border-radius:var(--ayampi-radius);background:var(--ayampi-card);box-shadow:var(--ayampi-shadow)}.photo-preview{min-height:240px;border-radius:var(--ayampi-radius-sm);overflow:hidden;background:var(--ayampi-background)}.photo-preview img{width:100%;height:100%;object-fit:contain}.photo-editor-copy{min-width:0}.photo-editor-copy>small{color:var(--ayampi-secondary-text)}.photo-name-row{display:flex;justify-content:space-between;gap:.5rem}.photo-name-row strong{overflow-wrap:anywhere}.caption-form{display:grid;gap:.6rem;margin-top:.8rem}.caption-form>div{display:flex;gap:.5rem}.caption-form select{flex:1}.caption-copy-button{margin-top:.55rem;border:0;background:transparent;color:var(--ayampi-primary);font-weight:750;cursor:pointer}
@media(max-width:900px){.coverage-meta-card{grid-template-columns:repeat(3,minmax(0,1fr))}.photo-editor-card{grid-template-columns:1fr}.photo-preview{min-height:300px}}
@media(max-width:640px){.coverage-detail-heading,.caption-toolbar{display:block}.heading-actions{margin-top:.75rem}.caption-toolbar .button{min-height:42px;padding:.55rem .75rem;font-size:.75rem}.upload-card{align-items:stretch;flex-direction:column}.coverage-meta-card{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-preview{min-height:220px}.caption-form>div{align-items:stretch;flex-direction:column}.coverage-form-card{padding:.9rem}}

/* CAPTION professional workspace */
.coverage-tabs{display:flex;gap:.35rem;margin:0 0 1.2rem;overflow-x:auto;padding-bottom:.25rem}.coverage-tabs a{flex:0 0 auto;padding:.68rem .9rem;border-bottom:3px solid transparent;color:var(--ayampi-secondary-text);font-size:.72rem;font-weight:850}.coverage-tabs a.active{border-color:var(--ayampi-primary);color:var(--ayampi-primary)}
.workspace-meta{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:1rem}.drop-zone{transition:border-color .18s,background .18s,transform .18s}.drop-zone.drag-active{border-color:var(--ayampi-success);background:color-mix(in srgb,var(--ayampi-success) 8%,var(--ayampi-card));transform:scale(1.005)}.drop-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.caption-selection-bar{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem;padding:.6rem .8rem;border:1px solid var(--ayampi-border);border-radius:12px;background:var(--ayampi-card);font-size:.74rem}.caption-selection-bar button{margin-left:auto;padding:.3rem .55rem;border:0;background:transparent;color:var(--ayampi-primary);font-weight:750;cursor:pointer}.caption-selection-bar button+button{margin-left:-.6rem}
.caption-workspace{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-areas:"filmstrip main";gap:1rem;min-width:0}.filmstrip{grid-area:filmstrip;display:flex;max-height:760px;flex-direction:column;gap:.55rem;overflow-y:auto;padding:.15rem}.filmstrip-item{position:relative;flex:0 0 auto;overflow:hidden;border:1px solid var(--ayampi-border);border-radius:13px;background:var(--ayampi-card)}.filmstrip-item.active{border-color:var(--ayampi-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--ayampi-primary) 22%,transparent)}.filmstrip-item>a{display:grid;grid-template-columns:82px minmax(0,1fr);gap:.65rem;align-items:center;padding:.45rem}.filmstrip-item img{width:82px;height:68px;border-radius:8px;object-fit:cover;background:var(--ayampi-background)}.filmstrip-item strong,.filmstrip-item small,.filmstrip-item i{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.filmstrip-item strong{font-size:.68rem}.filmstrip-item small{color:var(--ayampi-secondary-text);font-size:.61rem}.filmstrip-item .status-pill{display:inline-block;margin-top:.3rem}.filmstrip-item i{margin-top:.2rem;color:var(--ayampi-primary);font-size:.57rem;font-style:normal}.filmstrip-select{position:absolute;z-index:3;top:.35rem;left:.35rem;display:grid;width:23px;height:23px;place-items:center;border-radius:7px;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.18)}.filmstrip-select input{width:15px;height:15px;margin:0;accent-color:var(--ayampi-primary)}
.workspace-main{grid-area:main;min-width:0}.active-photo-stage{overflow:hidden;margin-bottom:1rem;border:1px solid var(--ayampi-border);border-radius:var(--ayampi-radius);background:var(--ayampi-card);box-shadow:var(--ayampi-shadow)}.active-photo-top,.photo-navigation{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .9rem;font-size:.75rem;font-weight:800}.active-photo-stage>img{width:100%;height:min(56vw,600px);object-fit:contain;background:#071020}.photo-navigation a{color:var(--ayampi-primary)}
.editor-preview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:1rem}.editor-panel,.generated-panel,.tab-panel{min-width:0;padding:1rem;border:1px solid var(--ayampi-border);border-radius:var(--ayampi-radius);background:var(--ayampi-card);box-shadow:var(--ayampi-shadow)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.panel-heading h3{overflow-wrap:anywhere;font-size:1rem}.autosave-state{flex:0 0 auto;color:var(--ayampi-success);font-size:.7rem;font-weight:800}.autosave-state[data-state=saving]{color:var(--ayampi-warning)}.autosave-state[data-state=error]{color:var(--ayampi-danger)}.editor-counter{justify-content:flex-end;color:var(--ayampi-secondary-text);font-size:.67rem}.drone-check{font-size:.78rem}.generated-panel p{min-height:180px;margin:1rem 0 0;padding:1rem;border-radius:12px;background:var(--ayampi-background);color:var(--ayampi-navy);white-space:pre-wrap}.template-label{display:flex;align-items:center;gap:.45rem;color:var(--ayampi-secondary-text);font-size:.72rem}.template-label select{min-width:0;margin-left:auto;padding:.38rem;border:1px solid var(--ayampi-border);border-radius:8px;background:var(--ayampi-background);color:var(--ayampi-secondary-text)}.caption-copy-button:disabled{opacity:.45;cursor:not-allowed}.narrative-readonly{white-space:pre-wrap}
.tab-panel{margin-bottom:1rem}.tab-panel>.stack-form{max-width:760px}.export-history{display:grid;gap:.65rem}.export-history article{display:flex;align-items:center;gap:.8rem;padding:.75rem;border-bottom:1px solid var(--ayampi-border)}.export-history article>div{min-width:0;flex:1}.export-history strong,.export-history small{display:block;overflow-wrap:anywhere}.export-history small{color:var(--ayampi-secondary-text);font-size:.68rem}
@media(max-width:1050px){.workspace-meta{grid-template-columns:repeat(4,minmax(0,1fr))}.caption-workspace{grid-template-columns:210px minmax(0,1fr)}.editor-preview-grid{grid-template-columns:1fr}.filmstrip-item>a{grid-template-columns:68px minmax(0,1fr)}.filmstrip-item img{width:68px;height:61px}}
@media(max-width:768px){.workspace-meta{grid-template-columns:repeat(3,minmax(0,1fr))}.caption-workspace{display:flex;flex-direction:column}.workspace-main{order:1}.filmstrip{order:2;display:flex;max-height:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:.25rem 0}.filmstrip-item{width:180px}.active-photo-stage>img{height:min(80vw,480px)}.caption-selection-bar{flex-wrap:wrap}.caption-selection-bar button{margin-left:0}.caption-selection-bar button+button{margin-left:0}.export-history article{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:520px){.workspace-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.active-photo-top,.photo-navigation{padding:.6rem .7rem}.editor-panel,.generated-panel,.tab-panel{padding:.8rem}.active-photo-stage>img{height:68vw}.template-label{align-items:flex-start;flex-direction:column}.template-label select{width:100%;margin-left:0}.filmstrip-item{width:165px}.caption-selection-bar{gap:.5rem}.export-history article .button{width:100%}}