/* Application chrome only. Resume typography and template styles live in the original stylesheets. */
@font-face {
  font-family: 'Forme UI';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --app-font: 'Forme UI', Inter, Arial, sans-serif;
  --app-ink: #172640;
  --app-copy: #475873;
  --app-muted: #65738b;
  --app-accent: #3156db;
  --app-accent-hover: #2548c4;
  --app-accent-soft: #edf2ff;
  --app-canvas: #f6f8fc;
  --app-border: #dfe6f1;
}
body { background: var(--app-canvas); }
.app-shell, .editor-shell, #modal, #toast { font-family: var(--app-font); font-weight: 400; }
.app-shell, .editor-shell, .main { background: var(--app-canvas); }
.app-shell, .editor-shell, #modal { color: var(--app-ink); }
.btn { color: #344561; border-color: #d5deed; font-weight: 600; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px #192b4904; }
.btn:hover { background: #f5f7fc; border-color: #bac9e1; }
.btn.primary { background: var(--app-accent); border-color: var(--app-accent); color: #fff; box-shadow: 0 3px 7px #3156db19; }
.btn.primary:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); }
.btn.soft { background: var(--app-accent-soft); color: #2d50c9; border-color: #dfe6ff; }
.btn.danger { background: #fff3f3; color: #ab3445; border-color: #f1d1d8; }
.text-btn { color: var(--app-accent); font-weight: 600; }
.text-btn:hover { color: #2143bc; }
.icon-only { background: #fff; border-color: var(--app-border); color: #65738b; }
.btn:focus-visible, .text-btn:focus-visible, .icon-only:focus-visible, .nav-item:focus-visible,
.filter-btn:focus-visible, .choice:focus-visible, .mini-template-choice:focus-visible,
.editor-tab:focus-visible, .menu-toggle:focus-visible, .editor-back:focus-visible { outline: 3px solid #8faaff; outline-offset: 3px; }
.field input:focus, .field textarea:focus, .field select:focus,
.search-wrap input:focus, .zoom-control select:focus, .editor-name:focus { outline: 2px solid #92abff; outline-offset: 1px; border-color: #7692ed; }

/* Navigation */
.sidebar { background: #fff; border-right-color: var(--app-border); padding-top: 31px; }
.brand, .editor-brand { font-family: var(--app-font); font-weight: 800; color: #142440; }
.brand { font-size: 29px; letter-spacing: -1.3px; }
.brand-dot { color: var(--app-accent); margin-left: -9px; }
.brand-mark { color: var(--app-accent); }
.brand-mark:after { background: var(--app-accent); border-color: var(--app-accent); }
.brand-mark i { background: #fff; box-shadow: 0 5px #fff; }
.nav-label { color: #65738b; font-size: 10px; font-weight: 650; letter-spacing: 1.4px; }
.nav-item { color: #50617b; font-size: 15px; font-weight: 550; border-radius: 9px; padding-top: 13px; padding-bottom: 13px; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { background: #f5f7fb; }
.nav-item.active { background: #edf2ff; color: #2c50d0; font-weight: 650; box-shadow: inset 0 0 0 1px #e2e9ff; }
.nav-item .count { background: #f2f5fa; color: #5a6b86; font-weight: 600; font-size: 11px; }
.nav-item.active .count { background: #dfe8ff; color: #3653ba; }
.nav-divider { background: #e6ebf4; }
.sidebar-note { background: #f7f9fe; border-color: #e1e8f4; border-radius: 12px; box-shadow: none; }
.sidebar-note .spark { color: #6683df; }
.sidebar-note h3 { font-family: var(--app-font); color: #263855; font-size: 14px; line-height: 1.55; font-weight: 650; letter-spacing: -.2px; }
.sidebar-note p { color: #5b6c85; font-size: 13px; line-height: 1.8; }
.sidebar-note .text-btn { font-size: 12px; }
.sidebar-footer { color: #5e6e86; font-size: 12px; }
.sidebar-footer span.dot { background: #8ca2e8; }
.topbar { height: 76px; background: #fff; border-bottom-color: var(--app-border); }
.breadcrumb { color: #63728b; font-size: 13px; }
.breadcrumb strong { color: #344761; font-weight: 600; }
.breadcrumb svg { color: #abb6c8; }
.subtle-label { color: #5b6e88; font-size: 11px; font-weight: 500; }
.subtle-label svg { color: #718bca; }
.topbar-right > .btn { background: var(--app-accent); border-color: var(--app-accent); color: #fff; font-size: 13px; }
.topbar-right > .btn:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); }
.menu-toggle { color: #526682; }

/* Gallery */
.gallery-wrap, .resumes-wrap { padding-top: 35px; }
.hero { gap: 34px; margin-bottom: 32px; }
.hero .eyebrow { color: #4d6ac4; font-size: 10px; font-weight: 650; letter-spacing: 1.1px; }
.hero .eyebrow:before { background: #7e98ee; }
.hero h1 { font-family: var(--app-font); color: #182945; font-size: clamp(32px, 3.1vw, 43px); font-weight: 730; letter-spacing: -1.7px; line-height: 1.16; margin: 13px 0 15px; }
.hero h1 em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--app-accent); }
.hero p { font-size: 15px; color: #596a84; font-weight: 400; line-height: 1.8; max-width: 570px; }
.hero-note { font-size: 12px; color: #5c6d87; font-weight: 500; gap: 16px; margin-top: 20px; }
.hero-note svg { color: #6985dc; width: 14px; height: 14px; }
.hero-note b { color: #bac5d9; }
.hero-art { height: 185px; }
.hero-orbit { border-color: #c8d5f6; }
.hero-orbit:after { background: #e8eeff; }
.art-page { border-color: #dce4f5; box-shadow: 0 9px 24px #1e397d0a; }
.art-page.back { background: #dfe8ff; border-color: #d0dcfa; }
.art-page.front:before { background: #edf2ff; }
.art-page.front:after { background: #829be5; box-shadow: 0 10px #e1e8f8, 0 20px #e1e8f8, 0 30px #e1e8f8, 0 46px #b1c3f0, 0 56px #e1e8f8; }
.art-spark { color: #728edd; }
.art-small-spark { color: #a3b6ed; }
.art-label { color: #7585a7; font-family: var(--app-font); font-style: normal; font-size: 11px; font-weight: 500; transform: none; }
.template-toolbar { gap: 14px; margin-bottom: 20px; }
.filter-tabs { gap: 5px; }
.filter-btn { font-size: 12px; font-weight: 550; min-height: 40px; padding: 9px 14px; color: #61718b; border-radius: 8px; }
.filter-btn:hover { background: #eaf0fc; }
.filter-btn.active { background: var(--app-accent); border-color: var(--app-accent); color: #fff; font-weight: 600; box-shadow: 0 3px 7px #3156db16; }
.filter-btn small { background: #e8eef9; color: #4b6287; font-size: 10px; font-weight: 600; border-radius: 4px; }
.filter-btn.active small { background: #fff; color: var(--app-accent); }
.search-wrap input { border-color: #d9e2ef; border-radius: 9px; color: #344762; background: #fff; font-weight: 400; }
.search-wrap svg { color: #8391a8; }
.search-wrap input::placeholder, .field input::placeholder, .field textarea::placeholder { color: #62718a; }
.gallery-meta, .gallery-footer { color: #5b6c86; font-size: 13px; font-weight: 400; }
.gallery-meta select { color: #526581; font-size: 12px; font-weight: 550; }
.gallery-footer { border-top-color: var(--app-border); }
.gallery-footer .made { font-family: var(--app-font); font-style: normal; color: #5b6c86; font-size: 12px; }
.template-card { border-color: #e0e7f1; border-radius: 13px; box-shadow: 0 3px 12px #1b355505; }
.template-visual, .template-visual.warm, .template-visual.cool, .template-visual.rose { background: #edf1f7; border-bottom-color: #e0e7f1; }
.template-visual:hover { background: #e7edf8; }
.card-preview { box-shadow: 0 5px 19px #2d41681a; }
.card-tag, .card-tag.popular, .card-tag.new { background: #f8faff; border-color: #dce5f5; color: #526989; font-size: 11px; font-weight: 600; }
.card-tag.new { background: #edf2ff; border-color: #d4dfff; color: #4665bc; }
.card-tag.popular { background: #edf2ff; color: #4966bd; }
.card-info h2 { font-family: var(--app-font); font-size: 18px; font-weight: 650; letter-spacing: -.35px; color: #233550; }
.card-info p { color: #596a84; font-weight: 400; font-size: 13px; line-height: 1.8; }
.card-actions .btn { font-size: 13px; font-weight: 600; }
.swatch { box-shadow: 0 0 0 1px #d6dfed; }
.preview-hit:focus-visible { outline: 3px solid #92aaff; outline-offset: -4px; }
.page-title-row h1 { font-family: var(--app-font); font-weight: 700; color: #1d304d; }
.page-title-row p { color: #596b86; font-weight: 400; }
.device-note { color: #536b8c; background: #f0f4ff; border-color: #dce5fc; }
.empty-dashboard { background: #fff; border-color: #ccd9ee; }
.empty-dashboard .empty-icon { background: #edf2ff; }
.empty-icon svg { color: #6d87d4; }
.empty-dashboard h2, .empty-results h3 { font-family: var(--app-font); color: #263957; font-weight: 650; }
.empty-dashboard p, .empty-results p { color: #596a84; }
.empty-results { background: #f0f4fc; }
.empty-results svg { color: #718bd5; }

/* Editor and controls */
.editor-topbar { background: #fff; border-bottom-color: var(--app-border); }
.editor-brand { color: #3156db; letter-spacing: -.9px; }
.editor-back { background: #f1f5fc; color: #71829c; }
.editor-name { color: #354865; font-weight: 600; font-size: 14px; }
.saved-state { color: #5d6f89; font-size: 12px; font-weight: 500; }
.saved-state svg { color: #6b87d6; }
.editor-panel { background: #fff; border-right-color: var(--app-border); }
.editor-tabs { background: #fff; border-bottom-color: var(--app-border); }
.editor-tab { color: #596b86; font-weight: 500; }
.editor-tab.active { color: var(--app-accent); border-bottom-color: var(--app-accent); font-weight: 600; }
.panel-intro { color: #5e708c; font-size: 13px; font-weight: 400; }
.example-banner { background: #f0f4ff; color: #526c99; border: 1px solid #e0e8fc; border-radius: 9px; }
.accordion { border-color: #dfe6f1; border-radius: 10px; }
.accordion > summary { color: #3d4f6d; font-weight: 600; }
.accordion > summary svg { color: #7b92bf; }
.accordion[open] > summary { border-bottom-color: #e7edf6; }
.section-count { color: #64748b; font-size: 11px; font-weight: 500; }
.field { color: #526480; font-weight: 550; }
.field input, .field textarea, .field select { border-color: #d6e0ee; color: #354964; font-weight: 400; border-radius: 7px; background: #fff; }
.field small { color: #61728c; font-weight: 400; }
.entry-editor { border-bottom-color: #e7edf6; }
.entry-editor-top { color: #5a7194; font-weight: 550; }
.entry-tools button { color: #667c9d; }
.entry-tools button:hover { color: var(--app-accent); background: #edf2ff; }
.add-entry { color: #5d7ac5; border-color: #c5d3ef; background: #f8faff; border-radius: 8px; font-weight: 550; }
.add-entry:hover { background: #edf2ff; }
.photo-circle { background: #edf2ff; color: #90a4cf; }
.photo-row p { color: #63738c; }
.subtle-action { color: #62738f; margin-left: 8px; }
.remove-section { color: #b35769; }
.editor-storage { color: #61718a; font-size: 12px; font-weight: 400; }
.preview-area { background: #eef2f8; }
.preview-toolbar { color: #5b6e8e; font-size: 12px; font-weight: 500; }
.preview-tools .text-btn { color: #4f6daa; font-size: 12px; }
.page-number { color: #586b89; font-size: 10px; font-weight: 500; }
.zoom-control { color: #5a6f91; font-size: 12px; font-weight: 500; }
.zoom-control select { color: #4e6381; border-color: #ccd8ec; background: #fff; font-size: 12px; font-weight: 500; }
.design-heading { color: #415674; font-weight: 600; }
.design-block { border-bottom-color: #e5ebf5; }
.design-count, .section-order-hint { color: #5e6f89; font-size: 12px; font-weight: 400; line-height: 1.8; }
.mini-template-choice { border-color: #dde5f2; background: #f1f5fb; }
.mini-template-choice.selected { border-color: #849ce5; box-shadow: 0 0 0 1px #849ce5; }
.mini-template-choice .tiny-name { color: #536987; font-weight: 550; }
.choice { border-color: #dfe6f1; color: #526a90; font-weight: 500; }
.choice.selected { border-color: #a4b6ee; background: #f1f5ff; color: #4b6bbd; }
.choice small { color: #61718b; }
.range-row, .range-row output, .section-order-row { color: #526985; font-weight: 500; }
.range-row input, .section-order-row input { accent-color: var(--app-accent); }
.section-order-row { border-bottom-color: #edf1f7; }

/* Dialogs and helper views */
#modal { background: #fff; border-color: #dce5f2; border-radius: 16px; box-shadow: 0 24px 90px #14294d33; }
#modal::backdrop { background: #172c4f59; }
.modal-header { border-bottom-color: #e4ebf5; }
.modal-header h2 { font-family: var(--app-font); color: #2a4063; font-size: 20px; font-weight: 650; letter-spacing: -.5px; }
.modal-header .icon-only { background: #f2f5fb; color: #687a97; }
.modal-body { color: #536882; font-size: 14px; font-weight: 400; }
.modal-footer { border-top-color: #e4ebf5; background: #fbfcff; }
.template-modal-info .eyebrow { color: #4f6bb1; font-size: 10px; font-weight: 600; }
.template-modal-info h3 { font-family: var(--app-font); font-size: 26px; color: #29426d; font-weight: 650; letter-spacing: -.6px; }
.template-modal-info p { color: #566b8c; font-size: 14px; font-weight: 400; }
.template-features { color: #5b7093; font-size: 13px; }
.template-features svg { color: #7b99d7; }
.template-modal-stage, .template-modal-paper { background: #eef3fa; }
.modal-preview-toolbar { background: #f7f9ff; border-bottom-color: #dee7f5; color: #587194; font-size: 11px; font-weight: 500; }
.guide-step .step-num { background: #edf2ff; color: #4566b6; }
.guide-step h3 { color: #4c6893; font-size: 13px; font-weight: 600; }
.guide-step p { color: #5b6d88; font-size: 13px; }
.section-choice { border-color: #dfe7f4; }
.section-choice:hover { background: #f5f8ff; border-color: #b7c9ec; }
.section-choice > svg { color: #8aa2d1; }
.section-choice span { color: #48617f; font-weight: 600; }
.section-choice small { color: #5a6d88; font-weight: 400; }
.export-info { color: #526f9d; background: #f0f5ff; font-size: 12px; }
.stat-pill { color: #4e6daf; background: #edf3ff; font-size: 11px; font-weight: 550; }
#toast { background: #263f6c; color: #fff; font-weight: 500; }

@media (min-width: 1600px) {
  .hero-art { margin-right: 55px; }
}
@media (max-width: 1200px) {
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 14px; }
  .filter-btn { padding-left: 12px; padding-right: 12px; }
  .sidebar-note h3 { font-size: 13px; }
}
@media (max-width: 950px) {
  .hero h1 { font-size: 36px; }
  .brand { font-size: 26px; }
  .sidebar-note { padding: 17px 13px; }
  .card-info h2 { font-size: 18px; }
}
@media (max-width: 700px) {
  .topbar { height: 66px; }
  .topbar-right > .btn { font-size: 11px; min-height: 38px; }
  .gallery-wrap, .resumes-wrap { padding-top: 29px; }
  .hero { margin-bottom: 27px; }
  .hero h1 { font-size: 34px; letter-spacing: -1.2px; line-height: 1.18; }
  .hero .eyebrow { font-size: 9px; }
  .hero p { font-size: 14px; line-height: 1.85; }
  .hero-note { font-size: 10px; gap: 9px; }
  .filter-btn { font-size: 11px; }
  .filter-btn small { font-size: 9px; }
  .sidebar .brand { font-size: 28px; }
  .editor-name { font-size: 12px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .template-modal-info h3 { font-size: 24px; }
}

@media (max-width: 560px) {
  .breadcrumb-parent, .breadcrumb > svg { display: none; }
  .breadcrumb strong { font-size: 13px; }
  .editor-name { min-width: 0; }
}