:root{
  --accent:#154BA0;
  --accent-dark:#113A7C;
  --brand-blue:#154BA0;
  --brand-blue-deep:#0D3573;
  --brand-cyan:#0FA7A0;
  --brand-ink:#0F2747;
  --brand-sky:#E9F2FF;
  --text-main:#2c3e50;
  --text-dark:#1e1e1e;
  --text-soft:#4b4b4b;
  --shadow:0 16px 50px rgba(0,0,0,.14);
  --radius:20px
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text-main);
  background:
    radial-gradient(circle at top right,rgba(21,75,160,.14),transparent 28%),
    linear-gradient(135deg,#fafafa,#f0f0f0 55%,#ffffff);
  min-height:100vh
}
.app{max-width:1150px;margin:0 auto;padding:28px}
.app.hidden{display:none}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px}
.brand{display:flex;align-items:center;gap:16px}
.brand-mark{
  width:72px;height:72px;
  display:grid;place-items:center;
  flex:0 0 auto
}
.brand-mark-image{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain
}
h1{margin:0 0 6px;font-size:2rem}
.subtitle{margin:0;color:var(--text-soft);font-size:.98rem}
.hero-actions,.action-row,.mini-actions,.user-badge{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center
}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.card{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow)
}
.section-title{margin:0 0 18px;font-size:1.15rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:.92rem;font-weight:700;color:var(--text-dark)}
input,select{
  width:100%;
  border:1px solid #ddd;
  border-radius:14px;
  padding:14px 15px;
  background:#fff;
  font-size:.98rem;
  outline:none;
  caret-color:var(--accent);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease
}
input:hover,select:hover{
  border-color:rgba(21,75,160,.35)
}
input:focus,select:focus{
  border-color:rgba(21,75,160,.55);
  box-shadow:0 0 0 4px rgba(21,75,160,.10)
}
.btn{
  border:none;
  border-radius:14px;
  padding:13px 18px;
  font-size:.96rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;
  box-shadow:0 10px 24px rgba(21,75,160,.24)
}
.btn-secondary{
  background:#fff;
  color:var(--text-main);
  border:1px solid #ddd
}
.btn-manual{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-deep));
  color:#fff;
  border:none;
  box-shadow:0 6px 18px rgba(21,75,160,.28)
}
.btn-manual:hover{
  filter:brightness(1.1)
}
.btn-manual .btn-icon-svg{
  stroke:#fff
}
.btn-back{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-deep));
  color:#fff;
  border:none;
  font-weight:700;
  gap:6px;
  box-shadow:0 6px 18px rgba(21,75,160,.28)
}
.btn-back:hover{
  filter:brightness(1.1)
}
.btn-back .btn-icon-svg{
  stroke:#fff
}
.btn-danger{
  background:#fff;
  color:#9d2a31;
  border:1px solid #e6c8cb
}
.btn-icon-accent{color:var(--accent-dark)}
.btn-icon-only{
  width:46px;
  height:46px;
  padding:0;
  border-radius:12px;
  gap:0
}
.btn-icon-symbol{
  font-size:1.15rem;
  line-height:1
}
.btn-icon-svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.preview-wrap{display:flex;flex-direction:column;gap:18px;height:100%}
.qr-stage{
  background:linear-gradient(160deg,#fff,#fbfbfb);
  border:1px solid #ededed;
  border-radius:22px;
  padding:24px;
  min-height:440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px
}
.qr-box{
  background:#fff;
  border-radius:24px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border:1px solid #efefef
}
.code-pill{
  background:rgba(21,75,160,.08);
  color:var(--accent-dark);
  border:1px solid rgba(21,75,160,.14);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700
}
.status{
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  font-size:.92rem;
  display:none;
  white-space:pre-wrap
}
.status.show{display:block}
.status.ok{
  background:rgba(24,160,88,.10);
  color:#0e6b39;
  border:1px solid rgba(24,160,88,.18)
}
.status.warn{
  background:rgba(240,160,32,.12);
  color:#9a6200;
  border:1px solid rgba(240,160,32,.18)
}
.status.err{
  background:rgba(215,25,32,.10);
  color:#962229;
  border:1px solid rgba(215,25,32,.18)
}
dialog{
  border:none;
  padding:0;
  border-radius:24px;
  max-width:860px;
  width:calc(100% - 28px);
  box-shadow:0 35px 80px rgba(0,0,0,.28)
}
dialog::backdrop{
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(4px)
}
.modal-head{
  padding:22px 24px 12px;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:16px
}
.modal-body{padding:20px 24px 24px}
.close-btn{
  width:42px;height:42px;border-radius:14px;border:1px solid #ddd;
  background:#fff;cursor:pointer;font-size:1.2rem
}
.footer-note{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background:#f8f8f8;
  color:#555;
  font-size:.88rem;
  line-height:1.5
}
.number-inline{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.send-row{margin-top:34px}
.test-email-gap{margin-bottom:22px}
.manual-content{display:grid;gap:14px}
.manual-app{position:relative}
.manual-app::before{
  content:"";
  position:absolute;
  inset:8px 0 auto 0;
  height:260px;
  border-radius:34px;
  background:
    radial-gradient(circle at 20% 10%,rgba(21,75,160,.19),transparent 48%),
    radial-gradient(circle at 78% 30%,rgba(15,167,160,.16),transparent 44%),
    linear-gradient(120deg,rgba(13,53,115,.03),rgba(15,167,160,.02));
  pointer-events:none;
  z-index:0
}
.manual-hero,.manual-layout,.manual-footer-note{position:relative;z-index:1}
.manual-hero{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.86);
  border-radius:24px;
  padding:20px 24px;
  backdrop-filter:blur(8px);
  animation:manualRise .55s ease-out both
}
.manual-kicker{
  margin:0 0 4px;
  color:var(--brand-blue-deep);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700
}
.manual-brand-mark{
  width:76px;
  height:76px;
  background:linear-gradient(145deg,#ffffff,rgba(233,242,255,.82));
  border:1px solid rgba(13,53,115,.14);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(13,53,115,.13)
}
.manual-brand-image{transform:scale(.95)}
.manual-actions{justify-content:flex-end}
.manual-role-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.9rem;
  font-weight:700
}
.manual-role-pill-admin{
  color:#0f6d3a;
  background:rgba(24,160,88,.12);
  border-color:rgba(24,160,88,.24)
}
.manual-role-pill-user{
  color:#7a5a00;
  background:rgba(218,171,48,.16);
  border-color:rgba(218,171,48,.26)
}
.manual-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);
  gap:20px;
  align-items:start;
  animation:manualRise .55s ease-out .1s both
}
.manual-main-panel{
  border-radius:22px;
  display:grid;
  gap:16px;
  border-color:rgba(13,53,115,.08)
}
.manual-section-intro{
  background:linear-gradient(130deg,#f7fbff,#eef5ff 58%,#ffffff);
  border-color:#d5e4fa
}
.manual-section p{
  margin:0;
  line-height:1.6;
  color:#2a3a4a
}
.manual-content .manual-section,
.manual-side-section,
.manual-footer-note{
  animation:manualRise .5s ease-out both
}
.manual-content .manual-section:nth-child(1){animation-delay:.08s}
.manual-content .manual-section:nth-child(2){animation-delay:.14s}
.manual-content .manual-section:nth-child(3){animation-delay:.2s}
.manual-content .manual-section:nth-child(4){animation-delay:.26s}
.manual-content .manual-section:nth-child(5){animation-delay:.32s}
.manual-side-panel .manual-side-section:nth-child(1){animation-delay:.18s}
.manual-side-panel .manual-side-section:nth-child(2){animation-delay:.24s}
.manual-side-panel .manual-side-section:nth-child(3){animation-delay:.3s}
.manual-step-list{padding-left:0;list-style:none;gap:12px}
.manual-step-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  padding:12px;
  border-radius:14px;
  border:1px solid #dce8f8;
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.manual-step-list li:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(13,53,115,.08);
  border-color:#cfe0f7
}
.manual-step-list li p{margin:4px 0 0;color:#4e5965}
.step-index{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.82rem;
  color:var(--brand-blue-deep);
  background:linear-gradient(145deg,#e1eeff,#f2f8ff);
  border:1px solid #cfe0f7
}
.manual-alerts{
  background:linear-gradient(135deg,rgba(218,171,48,.13),rgba(218,171,48,.06));
  border-color:rgba(218,171,48,.32)
}
.manual-check-list li{position:relative;padding-left:4px}
.manual-focus-block h3{font-size:1.03rem}
.manual-side-panel{
  border-radius:22px;
  display:grid;
  gap:14px;
  background:linear-gradient(165deg,#ffffff,rgba(248,252,255,.96))
}
.manual-side-section{
  border:1px solid #d9e7f7;
  border-radius:16px;
  padding:14px;
  background:#fbfdff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.manual-side-section:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(13,53,115,.08);
  border-color:#c9dcf5
}
.manual-side-section h3{
  margin:0 0 8px;
  font-size:1rem;
  color:var(--brand-blue-deep)
}
.manual-side-section p{
  margin:0;
  color:#334658;
  line-height:1.55
}
.manual-compact-list{gap:6px;padding-left:18px}
.manual-contact-block{
  background:linear-gradient(140deg,rgba(21,75,160,.12),rgba(15,167,160,.12));
  border-color:rgba(21,75,160,.27)
}
.manual-footer-note{
  margin-top:14px;
  border-radius:16px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);
  padding:12px 16px;
  color:#425367;
  font-size:.88rem;
  animation-delay:.36s
}
.manual-footer-note p{margin:0}

.manual-kb-layout{
  grid-template-columns:minmax(260px,.38fr) minmax(0,1fr)
}
.manual-kb-nav{
  position:sticky;
  top:16px;
  align-self:start;
  display:grid;
  gap:14px;
  border:1px solid rgba(13,53,115,.11)
}
.manual-kb-nav h2{
  margin:0;
  font-size:1.1rem;
  color:var(--brand-ink)
}
.manual-kb-nav-text{
  margin:0;
  color:#516276;
  font-size:.9rem
}
.manual-kb-links{
  display:grid;
  gap:8px
}
.manual-kb-links a{
  text-decoration:none;
  color:#1b3f77;
  background:#f4f8ff;
  border:1px solid #dce8f8;
  border-radius:12px;
  padding:9px 11px;
  font-weight:700;
  font-size:.9rem;
  transition:all .2s ease
}
.manual-kb-links a:hover{
  color:#0f3166;
  background:#e9f2ff;
  border-color:#cfe0f7;
  transform:translateY(-1px)
}
.manual-kb-links a.is-active,
.manual-kb-links a[aria-current="true"]{
  color:#ffffff;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-deep));
  border-color:transparent;
  box-shadow:0 10px 18px rgba(13,53,115,.18)
}
.manual-kb-links a.admin-nav-link{
  color:#0e6b39;
  background:linear-gradient(145deg,rgba(24,160,88,.11),rgba(24,160,88,.04));
  border-color:rgba(24,160,88,.28)
}
.manual-kb-links a.admin-nav-link:hover{
  background:linear-gradient(145deg,rgba(24,160,88,.18),rgba(24,160,88,.08));
  border-color:rgba(24,160,88,.45);
  color:#085c2e;
  transform:translateY(-1px)
}
.manual-kb-links a.admin-nav-link.is-active,
.manual-kb-links a.admin-nav-link[aria-current="true"]{
  color:#fff;
  background:linear-gradient(135deg,#18a058,#0e6b39);
  border-color:transparent;
  box-shadow:0 10px 18px rgba(14,107,57,.22)
}
.manual-kb-callout{
  border-radius:14px;
  border:1px solid rgba(15,167,160,.28);
  background:linear-gradient(145deg,rgba(15,167,160,.13),rgba(15,167,160,.05));
  padding:11px 12px;
  display:grid;
  gap:4px;
  color:#174d58
}
.manual-kb-content{
  display:grid;
  gap:14px
}
.manual-kb-head h2{
  margin:0;
  color:var(--brand-ink)
}
.manual-kb-head p{
  margin:8px 0 0;
  color:#4f6174;
  line-height:1.6
}
.manual-content-search-banner{
  border:1px solid #cddff6;
  border-radius:16px;
  background:linear-gradient(140deg,#f3f9ff,#edf5ff 60%,#f9fcff);
  padding:14px;
  box-shadow:0 12px 24px rgba(13,53,115,.08)
}
.manual-content-search-banner .manual-search-wrap{
  margin-top:0
}
.manual-content-search-banner .manual-search-wrap input{
  background:#fff;
  border-color:#b8d0ef
}
.manual-content-search-banner .manual-search-wrap input:focus{
  border-color:#89b0e2
}
.manual-article-directory{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.manual-article-tile{
  text-decoration:none;
  border:1px solid #d7e5f7;
  border-radius:16px;
  background:linear-gradient(145deg,#fafdff,#f4f8ff);
  padding:14px 15px;
  display:grid;
  gap:6px;
  color:#173d74;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.manual-article-tile strong{font-size:.98rem}
.manual-article-tile span{color:#4a5f75;line-height:1.5}
.manual-article-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px rgba(13,53,115,.08);
  border-color:#c8dbf4
}
.manual-search-wrap{
  display:grid;
  gap:8px;
  margin-top:14px;
  font-weight:700;
  color:#183b6f
}
.manual-search-wrap input{
  border:1px solid #cbddf6;
  border-radius:12px;
  padding:11px 12px;
  font-size:.95rem;
  background:#f8fbff
}
.manual-search-wrap input:focus{
  border-color:#99bbe8;
  box-shadow:0 0 0 4px rgba(21,75,160,.10)
}
.manual-search-results{
  border:1px solid #dbe7f7;
  border-radius:14px;
  background:#fbfdff;
  padding:10px
}
.manual-search-results-title{
  margin:0 0 8px;
  color:#1a457f;
  font-size:.84rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em
}
.manual-search-results-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  max-height:280px;
  overflow:auto
}
.manual-search-result-item,
.manual-search-result-empty{
  border:1px solid #d9e7f7;
  border-radius:10px;
  background:#fff
}
.manual-search-result-link{
  text-decoration:none;
  color:#274666;
  padding:9px;
  display:grid;
  gap:6px
}
.manual-search-result-link strong{
  color:#153f7f;
  font-size:.86rem
}
.manual-search-result-link span{
  color:#4b6077;
  font-size:.82rem;
  line-height:1.45
}
.manual-search-result-link mark{
  background:#ffe7a3;
  color:#5f4300;
  padding:0 2px;
  border-radius:4px
}
.manual-search-result-link:hover{
  background:#f4f9ff
}
.manual-search-result-empty{
  padding:9px;
  color:#58708a;
  font-size:.82rem
}
.manual-article-card{
  border:1px solid #dce8f8;
  border-radius:16px;
  background:linear-gradient(150deg,#ffffff,#fbfdff);
  padding:15px 16px;
  display:grid;
  gap:10px
}
.manual-article-card h3{
  margin:0;
  color:#103c7d
}
.manual-article-admin{
  border-color:rgba(24,160,88,.28);
  background:linear-gradient(145deg,rgba(24,160,88,.11),rgba(24,160,88,.04))
}
.manual-article-user{
  border-color:rgba(218,171,48,.32);
  background:linear-gradient(145deg,rgba(218,171,48,.14),rgba(218,171,48,.05))
}
.manual-definition-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.manual-definition-card{
  border:1px solid #d9e7f7;
  border-radius:14px;
  background:#fbfdff;
  padding:13px 14px
}
.manual-definition-card h4,
.manual-flow-list h4{
  margin:0 0 8px;
  color:#123f80;
  font-size:.96rem
}
.manual-definition-card p,
.manual-flow-list p{
  margin:0;
  color:#465a70;
  line-height:1.55
}
.manual-definition-card-admin{
  border-color:rgba(24,160,88,.26);
  background:linear-gradient(145deg,rgba(24,160,88,.09),rgba(24,160,88,.03))
}
.manual-guided-shot{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);
  gap:14px;
  align-items:start
}
.manual-guided-panel{
  border:1px solid #d5e4f7;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  padding:14px;
  box-shadow:0 12px 24px rgba(13,53,115,.06)
}
.manual-guided-toolbar,
.manual-guided-modal-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.manual-guided-badge,
.manual-guided-modal-actions span{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border-radius:999px;
  background:#eef5ff;
  border:1px solid #d2e2f7;
  color:#133f80;
  font-size:.85rem;
  font-weight:700
}
.manual-guided-badge-danger{
  background:#fff4f5;
  border-color:#f0d2d5;
  color:#9d2a31
}
.manual-guided-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:14px
}
.manual-guided-field,
.manual-guided-button,
.manual-guided-modal-grid span{
  border:1px solid #d7e5f7;
  border-radius:14px;
  padding:11px 12px;
  background:#fff;
  color:#476076;
  min-height:46px;
  display:flex;
  align-items:center
}
.manual-guided-field-wide,
.manual-guided-modal-wide{grid-column:1/-1}
.manual-guided-button{
  justify-content:center;
  font-weight:700;
  color:#173d74;
  background:#f4f8ff
}
.manual-guided-button-primary{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-deep));
  color:#fff;
  border-color:transparent
}
.manual-guided-preview{
  margin-top:14px;
  border:1px solid #dbe7f7;
  border-radius:16px;
  background:#fbfdff;
  padding:14px;
  display:grid;
  justify-items:center;
  gap:12px
}
.manual-guided-qr{
  width:140px;
  height:140px;
  border-radius:12px;
  background:
    linear-gradient(90deg,#0d0d0d 10%,transparent 10%,transparent 20%,#0d0d0d 20%,#0d0d0d 30%,transparent 30%,transparent 40%,#0d0d0d 40%,#0d0d0d 50%,transparent 50%),
    linear-gradient(#0d0d0d 10%,transparent 10%,transparent 20%,#0d0d0d 20%,#0d0d0d 30%,transparent 30%,transparent 40%,#0d0d0d 40%,#0d0d0d 50%,transparent 50%),
    #fff;
  background-size:24px 24px;
  border:10px solid #fff;
  box-shadow:0 10px 20px rgba(0,0,0,.08)
}
.manual-guided-pill{
  padding:9px 12px;
  border-radius:999px;
  background:#edf5ff;
  border:1px solid #d5e4f7;
  color:#143f7e;
  font-weight:700;
  text-align:center
}
.manual-guided-notes{
  display:grid;
  gap:10px
}
.manual-guided-notes p{
  margin:0;
  border:1px solid #d9e7f7;
  border-radius:14px;
  background:#fbfdff;
  padding:12px 13px;
  color:#456075;
  line-height:1.55
}
.manual-flow-list{
  display:grid;
  gap:12px
}
.manual-flow-list section{
  border:1px solid #d9e7f7;
  border-radius:14px;
  background:#fbfdff;
  padding:13px 14px
}
.manual-mail-preview{
  border:1px solid #cadcf5;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 18px rgba(13,53,115,.07)
}
.manual-mail-preview-head{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-deep));
  color:#fff;
  padding:12px 14px;
  font-weight:700
}
.manual-mail-preview-body{
  padding:14px;
  display:grid;
  gap:9px;
  background:linear-gradient(180deg,#ffffff,#f8fbff)
}
.manual-mail-preview-body p{margin:0;color:#415467;line-height:1.55}
.manual-mail-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px
}
.manual-mail-actions span{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background:#f2f7ff;
  border:1px solid #d7e5f7;
  color:#1b447f;
  font-size:.86rem;
  font-weight:700
}
.manual-mail-image-wrap{
  margin:0;
  border:1px solid #cadcf5;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 18px rgba(13,53,115,.07)
}
.manual-mail-image{
  display:block;
  width:100%;
  height:auto
}
.manual-mail-image-missing{
  padding:14px;
  color:#7d2430;
  background:#fff4f5;
  border-top:1px solid #f0d2d5;
  font-weight:700
}
.manual-guided-modal{
  border:1px solid rgba(24,160,88,.24);
  border-radius:16px;
  background:linear-gradient(155deg,#ffffff,rgba(24,160,88,.05));
  padding:14px;
  display:grid;
  gap:12px
}
.manual-guided-modal-head{
  font-weight:800;
  color:#0f6d3a
}
.manual-guided-modal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.manual-faq-item{
  border:1px solid #d9e7f7;
  border-radius:12px;
  background:#fafdff;
  padding:10px 12px
}
.manual-faq-item + .manual-faq-item{margin-top:8px}
.manual-faq-item summary{
  cursor:pointer;
  font-weight:700;
  color:#153f80
}
.manual-faq-item p{
  margin:9px 0 0;
  color:#465a70;
  line-height:1.55
}
.manual-no-results{
  border:1px dashed #b8d0ef;
  border-radius:12px;
  padding:12px;
  background:#f3f8ff;
  color:#2b4e7f;
  font-weight:700;
  text-align:center
}

@keyframes manualRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  .manual-hero,
  .manual-layout,
  .manual-content .manual-section,
  .manual-side-section,
  .manual-footer-note,
  .manual-step-list li,
  .manual-side-section{
    animation:none !important;
    transition:none !important
  }
}
.manual-role-tag{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(21,75,160,.08);
  border:1px solid rgba(21,75,160,.18);
  color:var(--accent-dark);
  width:fit-content;
  font-size:.92rem
}
.manual-section{
  background:#fafcfe;
  border:1px solid #e6eef8;
  border-radius:16px;
  padding:14px 16px
}
.manual-section h3{
  margin:0 0 10px;
  color:#123c7f;
  font-size:1rem
}
.manual-list{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:8px;
  line-height:1.45
}
.admin-only{
  background:rgba(24,160,88,.08);
  border-color:rgba(24,160,88,.20)
}
.user-only{
  background:rgba(240,160,32,.10);
  border-color:rgba(240,160,32,.22)
}
.login-shell{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,16,20,.18);backdrop-filter:blur(6px);z-index:1000
}
.login-shell.hidden{display:none}
.login-layout{
  width:min(1100px,100%);
  display:grid;
  grid-template-columns:minmax(320px,.95fr) minmax(340px,1.05fr);
  gap:18px;
  align-items:stretch
}
.login-card{
  width:100%;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.95);
  border-radius:28px;
  padding:28px;
  box-shadow:0 35px 90px rgba(0,0,0,.20)
}
.login-top-simple{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.login-form-grid{display:grid;gap:8px}
.login-submit-row{display:flex;justify-content:flex-end;margin-top:8px}
.login-card #loginStatusBox{margin-top:12px}

.login-banner-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(241,247,255,.95));
  border:1px solid rgba(255,255,255,.9);
  border-radius:28px;
  padding:24px;
  box-shadow:0 30px 80px rgba(13,53,115,.18);
  display:grid;
  gap:14px
}
.login-banner-header h3{
  margin:0;
  color:#123b78;
  font-size:1.28rem
}
.login-banner-kicker{
  margin:0 0 6px;
  color:#285fae;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em
}
.login-banner-stage{
  position:relative;
  width:100%;
  aspect-ratio:var(--banner-stage-aspect,16/9)
}
.login-banner-item{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  display:grid;
  align-content:stretch;
  transition:opacity .35s ease, transform .35s ease
}
.login-banner-item.is-active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}
.login-banner-image{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:20px;
  display:block
}
.login-banner-tag{
  margin:0;
  width:fit-content;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #cfe0f7;
  background:#eef5ff;
  color:#164182;
  font-size:.8rem;
  font-weight:800
}
.login-banner-item h4{
  margin:0;
  font-size:1.15rem;
  color:#113a7b
}
.login-banner-item p{
  margin:0;
  color:#4b6077;
  line-height:1.6
}
.login-banner-dots{
  display:flex;
  gap:8px;
  justify-content:center
}
.login-banner-dots button{
  width:10px;
  height:10px;
  border:none;
  border-radius:999px;
  background:#c9d8ec;
  cursor:pointer;
  padding:0;
  transition:all .2s ease
}
.login-banner-dots button.is-active{
  width:26px;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-deep))
}
.login-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.login-top .brand-mark{width:82px;height:82px}
.login-title{margin:0;font-size:1.65rem}
.login-subtitle{margin:6px 0 0;color:var(--text-soft);line-height:1.45}
.user-badge{
  padding:10px 14px;border-radius:999px;
  background:rgba(21,75,160,.08);
  border:1px solid rgba(21,75,160,.12);
  font-weight:700
}
.login-help{
  margin-top:14px;color:#667;line-height:1.5;font-size:.9rem;
  background:#f7f9f9;border-radius:16px;padding:12px 14px
}
@media(max-width:920px){
  .grid{grid-template-columns:1fr}
  .hero{flex-direction:column;align-items:flex-start}
  .manual-layout{grid-template-columns:1fr}
  .manual-kb-layout{grid-template-columns:1fr}
  .manual-kb-nav{position:static}
  .manual-guided-shot{grid-template-columns:1fr}
  .login-layout{grid-template-columns:1fr}
}
@media(max-width:640px){
  .app{padding:16px}
  .card{padding:18px}
  .form-grid{grid-template-columns:1fr}
  h1{font-size:1.6rem}
  .manual-role-tag{width:100%;border-radius:14px}
  .hero-actions,.action-row,.mini-actions,.number-inline,.user-badge{
    display:flex;flex-direction:column;align-items:stretch
  }
  .manual-hero{padding:16px}
  .manual-role-pill{justify-content:center}
  .manual-step-list li{
    grid-template-columns:1fr;
    gap:10px
  }
  .manual-article-directory{grid-template-columns:1fr}
  .manual-definition-grid{grid-template-columns:1fr}
  .manual-guided-form{grid-template-columns:1fr}
  .manual-guided-modal-grid{grid-template-columns:1fr}
  .step-index{width:44px;height:34px;border-radius:10px}
  .login-card{padding:22px}
  .login-banner-panel{padding:18px}
}