:root {
  color-scheme: dark;
  --bg: #15171b;
  --panel: #222329;
  --panel-2: #292a30;
  --surface: #1d1e23;
  --border: rgba(230,217,197,.105);
  --gold: #cfaa82;
  --gold-light: color-mix(in srgb, var(--gold) 75%, white);
  --cream: #f8eee0;
  --muted: #aca9aa;
  --text: #f5f1ed;
  --red: #f7a9ab;
  --radius: 19px;
  --shadow: 0 12px 30px rgba(0,0,0,.13);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
a { color: inherit; }
img { max-width: 100%; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#app { min-height: 100dvh; }
.boot { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 20px; color: var(--muted); font-size: 14px; }
.boot img { width: 155px; height: 155px; object-fit: contain; }
.app-shell { display: flex; min-height: 100dvh; }
.sidebar { width: 253px; position: fixed; inset: 0 auto 0 0; background: #1c1d21; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 28px 16px 22px; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 5px 26px; }
.brand img { width: 59px; height: 59px; object-fit: contain; }
.brand-name { font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 500; letter-spacing: .1em; line-height: 1.05; }
.brand-sub { color: var(--gold); font-family: "Brush Script MT", "Segoe Script", cursive; font-style: italic; font-size: 19px; margin-top: 2px; }
.side-caption { margin: 20px 12px 8px; color: #78777d; font-size: 10px; letter-spacing: .18em; font-weight: 750; text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; color: #b4b0b0; border: 0; border-radius: 12px; background: transparent; text-align: left; transition: color .14s, background .14s; }
.nav-item:hover { color: var(--cream); background: rgba(255,255,255,.035); }
.nav-item.active { color: var(--gold-light); background: #38302c; font-weight: 650; }
.nav-item.active svg { stroke-width: 2.1; }
.sidebar-spacer { flex: 1; }
.sidebar-foot { border-top: 1px solid var(--border); padding-top: 16px; color: var(--muted); font-size: 12px; }
.sidebar-foot button { width: 100%; }
.main { margin-left: 253px; width: calc(100% - 253px); min-width: 0; }
.topbar { height: 76px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px,3.7vw,54px); background: rgba(22,23,27,.6); }
.eyebrow { color: var(--gold); font-size: 10px; letter-spacing: .18em; font-weight: 800; text-transform: uppercase; }
.topbar-title { font-size: 13px; font-weight: 630; margin-top: 5px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.online { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--border); background: #24252b; border-radius: 99px; color: #bbb8b6; font-size: 12px; }
.online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a8c9aa; box-shadow: 0 0 0 3px rgba(168,201,170,.11); }
.mobile-logo, .bottom-nav { display: none; }
.content { width: min(1360px,100%); padding: 36px clamp(22px,3.7vw,54px) 64px; margin: 0 auto; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.page-header h1 { font-family: Georgia,"Times New Roman",serif; font-size: clamp(27px,2.7vw,38px); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; margin: 10px 0 6px; }
.page-header p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }
.actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.btn { appearance: none; border: 1px solid var(--border); background: #303036; color: var(--cream); border-radius: 11px; min-height: 43px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 650; font-size: 13px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s; }
.btn svg { width: 17px; height: 17px; }
.btn:hover:not(:disabled) { background: #414046; }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn.primary { background: linear-gradient(130deg,#dbb993,#bd9269); color: #29221d; border-color: #d7b68c; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(130deg,#e9cbaa,#c49d75); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: #292a2e; }
.btn.danger { color: #ffc2c2; border-color: rgba(255,160,160,.22); background: rgba(185,72,72,.12); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 12px; }
.btn.icononly { width: 43px; padding: 0; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 23px; }
.card-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.card-subtitle { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.55; }
.muted { color: var(--muted); }
.tiny { font-size: 11px; }
.kicker { color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: 10px; font-weight: 750; }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.hero { overflow: hidden; min-height: 255px; padding: 36px 40px; display: flex; justify-content: space-between; align-items: center; gap: 15px; background: radial-gradient(circle at 85% 46%,rgba(202,150,108,.22),transparent 42%),linear-gradient(120deg,#2e2828,#242328 61%,#292224); border: 1px solid rgba(226,183,140,.2); border-radius: 23px; }
.hero h1 { font-family: Georgia,serif; font-size: clamp(27px,3vw,43px); line-height: 1.12; font-weight: 400; margin: 10px 0 10px; }
.hero p { color: #c9bcb3; font-size: 14px; max-width: 390px; margin: 0 0 23px; line-height: 1.65; }
.hero-image { width: clamp(160px,24vw,280px); max-height: 240px; object-fit: contain; filter: drop-shadow(0 10px 25px #0003); }
.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin: 18px 0 25px; }
.stat { padding: 21px 23px; min-height: 129px; }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.stat-top svg { color: var(--gold); width: 19px; }
.stat-value { font-family: Georgia,serif; font-size: 32px; font-weight: 400; margin: 14px 0 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 15px; gap: 12px; }
.section-head h2 { font-size: 16px; margin: 0; }
.quick { border: 1px solid var(--border); background: var(--panel); border-radius: 16px; display: flex; flex-direction: column; gap: 24px; padding: 23px; text-align: left; min-height: 143px; color: var(--text); }
.quick:hover { background: #2d2b2e; }
.quick-icon { color: var(--gold); background: #37302d; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; }
.quick strong { display: block; font-size: 14px; }
.quick span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.label { display: block; font-size: 12px; font-weight: 700; color: #e6dcd1; margin-bottom: 8px; }
.field { width: 100%; min-height: 45px; border: 1px solid rgba(245,224,201,.13); background: #191b1f; border-radius: 11px; padding: 11px 13px; color: var(--text); font-size: 14px; outline: none; }
.field:focus { border-color: rgba(229,190,144,.6); box-shadow: 0 0 0 3px rgba(214,171,132,.09); }
.field::placeholder { color: #79777d; }
.field textarea, textarea.field { resize: vertical; min-height: 90px; line-height: 1.5; }
.field option { background: #222329; color: white; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-group { margin-bottom: 17px; min-width: 0; }
.form-note { margin: 8px 0 0; color: #a49fa0; font-size: 11px; line-height: 1.5; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.pill { display: inline-flex; align-items: center; border: 1px solid var(--border); color: var(--muted); border-radius: 99px; padding: 5px 9px; font-size: 10px; letter-spacing: .03em; }
.pill.sample { color: #e4b78f; border-color: #70543b; background: #352c29; }
.empty { padding: 35px 20px; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--muted); font-size: 13px; }
.empty svg { width: 31px; height: 31px; color: var(--gold); }
.calculator-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(285px,.8fr); gap: 20px; align-items: start; }
.choice-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.choice { min-height: 47px; min-width: 90px; display: flex; flex: 1 1 90px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #1b1c20; color: #d1cdca; border: 1px solid var(--border); border-radius: 11px; padding: 9px; text-align: center; font-size: 12px; }
.choice small { color: #aaa4a0; font-size: 11px; }
.choice.selected { background: #393028; border-color: rgba(222,181,142,.7); color: #f4dcbb; }
.check-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; margin: 8px 0; gap: 10px; }
.check-row strong { display: block; font-size: 12px; font-weight: 650; }
.check-row small { color: var(--muted); display: block; margin-top: 3px; font-size: 11px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { border: 1px solid var(--border); background: #34343b; color: white; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; }
.stepper button svg { width: 15px; }
.stepper span { min-width: 19px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.quote-card { padding: 26px; position: sticky; top: 18px; background: linear-gradient(165deg,#2d2827,#242328 66%); border-color: rgba(230,193,148,.2); }
.quote-total { font: normal clamp(37px,4.5vw,54px)/1.1 Georgia,serif; margin: 7px 0 5px; color: var(--gold-light); }
.breakdown { display: grid; gap: 11px; margin: 25px 0 27px; }
.breakdown-row { display: flex; align-items: start; justify-content: space-between; gap: 15px; font-size: 12px; }
.breakdown-row span:first-child { color: #bbb2ab; }
.breakdown-row b { font-size: 13px; white-space: nowrap; }
.breakdown-row.discount b { color: #b6d9b8; }
.catalog-list { display: grid; gap: 10px; }
.catalog-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 17px; border: 1px solid var(--border); border-radius: 13px; background: #202125; }
.catalog-item .name { font-size: 13px; font-weight: 700; }
.catalog-item .desc { color: var(--muted); margin-top: 5px; font-size: 11px; line-height: 1.5; }
.catalog-price { color: var(--gold-light); font-family: Georgia,serif; font-size: 18px; white-space: nowrap; }
.catalog-actions { display: flex; align-items: center; gap: 7px; }
.catalog-actions button { min-height: 34px; }
.price-tab { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.price-tab button { border-radius: 9px; border: 1px solid var(--border); background: #26262b; color: #bdb8b8; padding: 11px 16px; font-size: 12px; }
.price-tab button.active { background: #40342b; border-color: #aa8460; color: #f5d8b7; }
.editor-grid { display: grid; grid-template-columns: minmax(340px,.95fr) minmax(350px,1.05fr); align-items: start; gap: 20px; }
.editor-panel { padding: 23px; }
.editor-preview { padding: 21px 24px 24px; position: sticky; top: 15px; }
.editor-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.poster-stage { display: flex; align-items: center; justify-content: center; min-height: 350px; max-height: 650px; overflow: auto; padding: 15px; border: 1px dashed rgba(224,194,162,.19); border-radius: 13px; background: #1a1a1e; }
#flyer-preview { height: auto; max-height: 580px; width: auto; max-width: 100%; box-shadow: 0 10px 36px #0008; background: #ecd7be; }
.flyer-form-details { display: grid; gap: 4px; }
.format-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.format-option { border: 1px solid var(--border); background: #1b1b20; color: var(--muted); border-radius: 11px; padding: 11px 5px; display: grid; justify-items: center; gap: 5px; font-size: 11px; }
.format-option.selected { color: var(--gold-light); border-color: var(--gold); background: #362e2a; }
.format-option svg { width: 22px; height: 22px; }
.saved-flyers { display: grid; gap: 10px; }
.saved-flyer { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); padding: 15px; border-radius: 12px; background: #212126; gap: 12px; }
.saved-flyer strong { font-size: 13px; }
.saved-flyer small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.media-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.media-card { min-width: 0; padding: 9px; overflow: hidden; }
.media-thumb { border-radius: 11px; width: 100%; aspect-ratio: 1; object-fit: cover; background: #16181c; }
.media-meta { margin: 9px 2px 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.media-meta span { font-size: 11px; color: #bbb6b4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.media-meta .btn { min-height: 30px; padding: 0 8px; }
.upload-zone { padding: 30px; border: 1px dashed rgba(221,177,129,.4); background: #262326; border-radius: 17px; display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: 22px; }
.upload-zone svg { width: 31px; height: 31px; color: var(--gold); }
.upload-zone h3 { margin: 0; font-size: 15px; }
.upload-zone p { color: var(--muted); font-size: 12px; margin: 0; }
.login-shell { min-height: 100dvh; display: grid; grid-template-columns: 1fr minmax(440px,48%); background: #16171b; }
.login-visual { min-width: 0; background: radial-gradient(circle at 48% 55%,rgba(186,139,103,.18),transparent 46%),linear-gradient(130deg,#272326,#191a1e); display: grid; place-items: center; border-right: 1px solid var(--border); padding: 30px; }
.login-visual img { width: min(78%,460px); filter: drop-shadow(0 17px 65px #0004); }
.login-card-wrap { display: grid; place-items: center; padding: 45px 25px; }
.login-card { width: min(100%,400px); }
.login-card .eyebrow { margin-bottom: 13px; }
.login-card h1 { font: normal 39px/1.14 Georgia,serif; margin: 0 0 14px; }
.login-card > p { color: var(--muted); font-size: 14px; margin: 0 0 30px; line-height: 1.65; }
.login-card .btn { width: 100%; min-height: 49px; }
.login-error { font-size: 12px; margin: 15px 0; color: #ffb6b6; }
.login-footer { margin-top: 45px; font-size: 11px; color: #797779; }
#toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%,25px); background: #f6ebdd; color: #2a241f; border: 1px solid #ddc19e; border-radius: 13px; font-size: 13px; max-width: min(90vw,400px); text-align: center; padding: 12px 17px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .25s,transform .25s; box-shadow: 0 14px 44px #0007; }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
dialog { color: var(--text); border: 1px solid #554238; border-radius: 20px; background: #262529; box-shadow: 0 30px 100px #0009; padding: 0; width: min(95vw,510px); max-height: min(85dvh,720px); }
dialog::backdrop { background: #070708ab; backdrop-filter: blur(5px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 23px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 22px 23px; overflow: auto; }
.modal-foot { padding: 16px 23px 23px; display: flex; gap: 10px; justify-content: end; }
.warning { border: 1px solid #776145; background: rgba(196,143,78,.09); color: #e5c6a0; padding: 12px 14px; border-radius: 11px; font-size: 12px; line-height: 1.6; }
.settings-wrap { max-width: 790px; display: grid; gap: 20px; }
.footer-line { color: #767479; font-size: 11px; margin-top: 30px; text-align: center; }
@media (max-width: 1130px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-preview { position: static; }
  .poster-stage { max-height: 560px; }
  #flyer-preview { max-height: 500px; }
  .media-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .sidebar { width: 210px; }
  .main { margin-left: 210px; width: calc(100% - 210px); }
  .brand img { width: 44px; height: 44px; }
  .brand-name { font-size: 15px; }
  .brand-sub { font-size: 16px; }
  .stats-grid { gap: 10px; }
  .stat { padding: 18px; }
  .calculator-grid { grid-template-columns: 1fr; }
  .quote-card { position: static; }
  .hero { padding: 30px; }
  .hero-image { width: 165px; }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main { width: 100%; margin: 0; }
  .topbar { height: 65px; padding: 0 17px; position: sticky; top: 0; z-index: 8; background: rgba(23,24,28,.94); backdrop-filter: blur(18px); }
  .mobile-logo { display: block; width: 43px; height: 43px; object-fit: contain; }
  .topbar .eyebrow { letter-spacing: .15em; font-size: 10px; }
  .topbar-title { font-size: 12px; margin-top: 4px; }
  .top-actions .online { display: none; }
  .content { padding: 24px 16px calc(110px + env(safe-area-inset-bottom)); }
  .page-header { align-items: start; }
  .page-header h1 { font-size: 29px; margin-top: 8px; }
  .page-header p { font-size: 12px; }
  .page-header .actions .btn:not(.primary) { display: none; }
  .hero { min-height: 192px; padding: 22px; border-radius: 19px; }
  .hero h1 { font-size: clamp(23px,6vw,30px); }
  .hero p { font-size: 12px; margin-bottom: 15px; max-width: 225px; }
  .hero-image { width: clamp(90px,25vw,150px); max-height: 150px; margin-right: -9px; }
  .hero .btn { min-height: 38px; padding: 0 12px; font-size: 11px; }
  .stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 12px 0 21px; }
  .stat { padding: 12px 11px; min-height: 96px; border-radius: 14px; }
  .stat-top { font-size: 10px; gap: 3px; }
  .stat-top svg { width: 14px; height: 14px; }
  .stat-value { font-size: 25px; margin: 12px 0 0; }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .quick { min-height: 142px; padding: 17px; gap: 18px; }
  .quick-icon { width: 38px; height: 38px; }
  .quick strong { font-size: 13px; }
  .quick span { font-size: 11px; }
  .card-pad { padding: 18px; }
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 8px calc(9px + env(safe-area-inset-bottom)); background: rgba(26,27,31,.97); backdrop-filter: blur(18px); border-top: 1px solid var(--border); z-index: 20; justify-content: space-around; }
  .bottom-nav button { display: grid; justify-items: center; align-content: center; flex: 1; gap: 5px; min-height: 53px; padding: 5px 2px; color: #9c9796; background: none; border: 0; font-size: 10px; }
  .bottom-nav button.active { color: var(--gold-light); }
  .bottom-nav button.active svg { stroke-width: 2.4; }
  .bottom-nav button svg { width: 20px; height: 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .calculator-grid { gap: 12px; }
  .quote-card { padding: 22px; }
  .editor-grid { grid-template-columns: 1fr; gap: 13px; }
  .editor-panel { padding: 18px; }
  .editor-preview { padding: 18px; }
  .poster-stage { padding: 9px; max-height: 550px; min-height: 300px; }
  #flyer-preview { max-height: 480px; }
  .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .catalog-item { padding: 13px; }
  .catalog-actions { flex-direction: column; }
  .catalog-price { font-size: 16px; }
  .login-shell { display: block; }
  .login-visual { min-height: 36dvh; border: none; padding: 22px 0 0; background: radial-gradient(circle at 50% 45%,rgba(189,143,103,.22),transparent 52%),#17181b; }
  .login-visual img { width: min(53vw,220px); }
  .login-card-wrap { padding: 18px 27px 45px; display: block; }
  .login-card { width: min(100%,460px); margin: auto; }
  .login-card h1 { font-size: 32px; }
  .login-card > p { font-size: 13px; margin-bottom: 23px; }
  #toast { bottom: calc(87px + env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  .hero-image { width: 85px; }
  .hero { padding: 17px; }
  .hero h1 { font-size: 22px; }
  .page-header h1 { font-size: 26px; }
  .content { padding-left: 12px; padding-right: 12px; }
  .btn { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}