/* ==========================================================================
   ALKAMORA POS — Landing page stylesheet
   Dipakai oleh views/landing.php (halaman etalase pengunjung belum login).
   Selaras dengan tema aplikasi kasir (assets/css/theme.css).
   ========================================================================== */

:root{
    /* Brand */
    --hijau:      #1B5E20;
    --hijau2:     #66BB6A;
    --hijau3:     #81C784;
    --muda:       #E8F5E9;
    --gradient-brand: linear-gradient(135deg, #1B5E20 0%, #2E7D32 45%, #43A047 100%);
    --gradient-cta:   linear-gradient(135deg, #66BB6A 0%, #43A047 100%);

    /* Neutrals (light) */
    --kk-bg:#f8f9fa; --kk-bg-2:#ffffff; --kk-text:#212529;
    --kk-muted:#6c757d; --kk-border:#e9ecef;
    --kk-card-bg:#ffffff; --kk-card-header-bg:#E8F5E9;
    --kk-input-bg:#ffffff; --kk-input-border:#dee2e6;
    --kk-navbar-bg:rgba(255,255,255,.88);

    --green-50:#E8F5E9; --green-100:#C8E6C9; --green-200:#A5D6A7;
    --green-300:#81C784; --green-400:#66BB6A; --green-500:#4CAF50;
    --green-700:#1B5E20;

    --radius:18px;
    --radius-sm:12px;
    --shadow-sm:0 2px 10px rgba(16,24,40,.06);
    --shadow:0 10px 30px rgba(16,24,40,.08);
    --shadow-lg:0 24px 60px rgba(16,24,40,.14);
    --ring:0 0 0 4px rgba(102,187,106,.25);

    color-scheme:light;
}

html[data-theme="dark"]{
    --hijau:      #81C784;
    --hijau2:     #A5D6A7;
    --hijau3:     #C8E6C9;
    --muda:       #1d2740;
    --gradient-brand: linear-gradient(135deg, #16351d 0%, #1d4a26 45%, #25602f 100%);

    --kk-bg:#12161f; --kk-bg-2:#1a2030; --kk-text:#e6eaf2;
    --kk-muted:#9aa3b2; --kk-border:#2a3348;
    --kk-card-bg:#1a2030; --kk-card-header-bg:#222b42;
    --kk-input-bg:#222b42; --kk-input-border:#2f3a55;
    --kk-navbar-bg:rgba(18,22,31,.88);

    --shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --shadow:0 10px 30px rgba(0,0,0,.45);
    --shadow-lg:0 24px 60px rgba(0,0,0,.55);

    color-scheme:dark;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
    font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color:var(--kk-text);
    background:var(--kk-bg);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5{ letter-spacing:-.02em; }
a{ text-decoration:none; }
/* height:auto wajib ada: atribut width/height pada <img> (dipakai landing_shot()
   untuk mencegah layout bergeser) dipakai browser sebagai tinggi tetap, sehingga
   tanpa height:auto gambar yang diberi width:100% akan ketarik/penyok. */
img{ max-width:100%; height:auto; }
::selection{ background:var(--hijau2); color:#fff; }

.text-secondary{ color:var(--kk-muted) !important; }
.eyebrow{
    display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color:var(--hijau); margin-bottom:.6rem;
}
html[data-theme="dark"] .eyebrow{ color:var(--hijau2); }

/* ---------- Navbar ---------- */
.site-nav{
    background:var(--kk-navbar-bg) !important;
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--kk-border);
    padding-top:.65rem; padding-bottom:.65rem;
}
.site-nav .navbar-brand{
    font-weight:800; letter-spacing:.3px; font-size:1.28rem; color:var(--kk-text);
    display:flex; align-items:center; gap:.6rem;
}
.site-nav .navbar-brand span{ color:var(--hijau2); }
.site-nav .brand-logo{
    width:38px; height:38px; border-radius:11px; background:var(--kk-bg-2);
    border:1px solid var(--kk-border); padding:3px; object-fit:contain;
}
.site-nav .nav-link{
    color:var(--kk-text); font-weight:600; font-size:.94rem; padding:.5rem .85rem;
    border-radius:10px; transition:background .18s ease, color .18s ease;
}
.site-nav .nav-link:hover{ background:var(--muda); color:var(--hijau); }
html[data-theme="dark"] .site-nav .nav-link:hover{ color:var(--hijau2); }
.site-nav .navbar-toggler{ border-color:var(--kk-border); }
html[data-theme="dark"] .site-nav .navbar-toggler-icon{ filter:invert(1) brightness(1.6); }

/* ---------- Buttons ---------- */
.btn-hijau{
    background:var(--gradient-cta); color:#fff; border:0; border-radius:12px;
    font-weight:700; padding:.75rem 1.5rem;
    box-shadow:0 8px 20px rgba(67,160,71,.28);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-hijau:hover,.btn-hijau:focus{
    color:#fff; transform:translateY(-2px); filter:brightness(1.05);
    box-shadow:0 12px 26px rgba(67,160,71,.36);
}
.btn-hijau:active{ transform:translateY(0); }
.btn-outline-hijau{
    border:2px solid var(--hijau); color:var(--hijau); border-radius:12px;
    font-weight:700; padding:.75rem 1.5rem; background:transparent;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn-outline-hijau:hover{ background:var(--hijau); color:#fff; transform:translateY(-2px); }
html[data-theme="dark"] .btn-outline-hijau{ border-color:rgba(129,199,132,.55); color:var(--hijau2); }
html[data-theme="dark"] .btn-outline-hijau:hover{ background:var(--hijau2); color:#0f1523; }
.btn-nav-ghost{
    border:1px solid var(--kk-border); color:var(--kk-text) !important; border-radius:10px;
    font-weight:700; background:var(--kk-bg-2);
}
.btn-nav-ghost:hover{ border-color:var(--hijau2); color:var(--hijau) !important; }
#themeToggleLanding{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:10px; border:1px solid var(--kk-border);
    background:var(--kk-bg-2); color:var(--kk-text); cursor:pointer;
    transition:transform .2s ease, border-color .2s ease;
}
#themeToggleLanding:hover{ border-color:var(--hijau2); }
#themeToggleLanding .theme-icon{ transition:transform .3s ease; }
html[data-theme="dark"] #themeToggleLanding .theme-icon{ transform:rotate(180deg); }

/* ---------- Section shell ---------- */
section{ padding:76px 0; }
.section-alt{ background:var(--kk-bg-2); border-top:1px solid var(--kk-border); border-bottom:1px solid var(--kk-border); }
.section-head{ max-width:720px; margin:0 auto 3rem; text-align:center; }
h2.sec{ font-weight:900; font-size:clamp(1.6rem, 3vw, 2.3rem); margin-bottom:.6rem; }
.section-head p{ color:var(--kk-muted); margin-bottom:0; }

/* ---------- Hero ---------- */
.hero{
    position:relative; overflow:hidden; padding:96px 0 84px;
    background:
        radial-gradient(1000px 480px at 82% -10%, rgba(102,187,106,.22), transparent 60%),
        radial-gradient(760px 420px at 8% 8%, rgba(27,94,32,.14), transparent 62%),
        linear-gradient(160deg, var(--muda) 0%, var(--kk-bg) 62%);
}
html[data-theme="dark"] .hero{
    background:
        radial-gradient(1000px 480px at 82% -10%, rgba(102,187,106,.14), transparent 60%),
        radial-gradient(760px 420px at 8% 8%, rgba(27,94,32,.28), transparent 62%),
        linear-gradient(160deg, #16202c 0%, var(--kk-bg) 62%);
}
.hero::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:
        linear-gradient(to right, rgba(120,140,160,.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120,140,160,.10) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(700px 340px at 50% 0%, #000 20%, transparent 75%);
    mask-image:radial-gradient(700px 340px at 50% 0%, #000 20%, transparent 75%);
}
.hero .container{ position:relative; z-index:2; }
.hero h1{ font-weight:900; font-size:clamp(2rem, 4.4vw, 3.25rem); line-height:1.1; }
.hero h1 .accent{
    background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-theme="dark"] .hero h1 .accent{
    background:linear-gradient(135deg,#A5D6A7,#66BB6A);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{ font-size:1.06rem; max-width:640px; color:var(--kk-muted); }
.badge-soft{
    background:var(--muda); color:var(--hijau); font-weight:700; font-size:.8rem;
    border-radius:999px; padding:.5em 1.1em; display:inline-flex; align-items:center; gap:.45rem;
    border:1px solid rgba(102,187,106,.35);
}
html[data-theme="dark"] .badge-soft{ color:var(--hijau2); border-color:rgba(129,199,132,.28); }
.hero-list{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.5rem; }
.hero-list li{ color:var(--kk-muted); font-size:.95rem; display:flex; align-items:flex-start; gap:.6rem; }
.hero-list i{ color:var(--hijau2); margin-top:.24rem; }

.preview-card{
    background:var(--kk-card-bg); border:1px solid var(--kk-border);
    border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden;
}
.preview-card .preview-head{
    display:flex; align-items:center; gap:.4rem;
    padding:.7rem .9rem; border-bottom:1px solid var(--kk-border);
    background:linear-gradient(180deg, var(--kk-card-header-bg), var(--kk-card-bg));
}
.preview-card .dot{ width:11px; height:11px; border-radius:50%; }
.preview-card .row-line{
    display:flex; justify-content:space-between; padding:.62rem 0;
    border-bottom:1px dashed var(--kk-border); font-size:.92rem;
}
.preview-card .row-line:last-child{ border-bottom:0; }

/* ---------- Stat bar ---------- */
.stat-bar{ padding:34px 0; background:var(--kk-bg-2); border-top:1px solid var(--kk-border); border-bottom:1px solid var(--kk-border); }
.stat-item{ text-align:center; }
.stat-item .num{ font-weight:900; font-size:clamp(1.35rem, 2.4vw, 1.9rem); color:var(--hijau); line-height:1; }
html[data-theme="dark"] .stat-item .num{ color:var(--hijau2); }
.stat-item .lbl{ font-size:.86rem; color:var(--kk-muted); margin-top:.35rem; }

/* ---------- Cards ---------- */
.usp-card{
    border:1px solid var(--kk-border); border-radius:var(--radius); background:var(--kk-card-bg);
    box-shadow:var(--shadow-sm); height:100%;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.usp-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(102,187,106,.5); }
.usp-card .ico{
    width:56px; height:56px; border-radius:15px; background:var(--muda); color:var(--hijau);
    display:flex; align-items:center; justify-content:center; font-size:1.45rem; margin-bottom:1rem;
}
html[data-theme="dark"] .usp-card .ico{ color:var(--hijau2); }
.usp-card h5{ font-weight:800; font-size:1.06rem; }

.audience-card{ text-align:center; padding:1.5rem 1rem; }
.audience-card i{ font-size:1.9rem; color:var(--hijau2); margin-bottom:.6rem; display:block; }
.audience-card b{ font-size:.95rem; }

/* ---------- Fitur rows ---------- */
.fitur-row{
    border:1px solid var(--kk-border); border-radius:var(--radius); overflow:hidden;
    background:var(--kk-card-bg); box-shadow:var(--shadow-sm); margin-bottom:1.25rem;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fitur-row:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(102,187,106,.5); }
.fitur-row .f-ico{
    background:var(--gradient-brand); color:#fff; font-size:1.7rem;
    display:flex; align-items:center; justify-content:center; min-height:132px;
}
.fitur-row h5{ font-weight:800; margin-bottom:.35rem; }
.fitur-row .f-tag{
    display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:var(--hijau); background:var(--muda); border-radius:999px; padding:.25em .7em; margin-bottom:.5rem;
}
html[data-theme="dark"] .fitur-row .f-tag{ color:var(--hijau2); }

/* ---------- Galeri screenshot ---------- */
.shot-tile{
    background:var(--kk-card-bg); border:1px solid var(--kk-border); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow-sm); height:100%; cursor:zoom-in;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.shot-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(102,187,106,.55); }
/* Bingkai screenshot: rasio 2:1 mengikuti screenshot aplikasi (1600x800) supaya
   tidak ada bagian sidebar / kolom kanan yang terpotong object-fit: cover. */
.shot-frame{ position:relative; aspect-ratio:2/1; background:var(--muda); overflow:hidden; }
.shot-frame img{ width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.shot-tile .shot-cap{ padding:.85rem 1rem; font-weight:700; font-size:.93rem; }
.shot-tile .shot-cap small{ display:block; font-weight:500; color:var(--kk-muted); font-size:.82rem; margin-top:.15rem; }
.shot-zoom{
    position:absolute; right:.6rem; bottom:.6rem; width:34px; height:34px; border-radius:10px;
    background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:.85rem; opacity:0; transition:opacity .2s ease;
}
.shot-tile:hover .shot-zoom{ opacity:1; }
.shot-missing{ opacity:.55; }
#shotModal .modal-content{ background:var(--kk-card-bg); border:1px solid var(--kk-border); border-radius:var(--radius); }
#shotModal img{ width:100%; height:auto; border-radius:var(--radius-sm); border:1px solid var(--kk-border); }

/* ---------- Langkah ---------- */
.langkah .no{
    width:54px; height:54px; border-radius:50%; background:var(--gradient-cta); color:#fff;
    font-weight:900; font-size:1.25rem; display:flex; align-items:center; justify-content:center;
    margin:0 auto .85rem; box-shadow:0 8px 18px rgba(67,160,71,.3);
}
.langkah h5{ font-weight:800; }

/* ---------- Testimoni ---------- */
.testimoni{
    background:var(--kk-card-bg); border:1px solid var(--kk-border); border-radius:var(--radius);
    padding:1.6rem; height:100%; box-shadow:var(--shadow-sm);
    transition:transform .22s ease, box-shadow .22s ease;
}
.testimoni:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.testimoni .stars{ color:#f5b301; margin-bottom:.7rem; font-size:.85rem; }
.testimoni p{ color:var(--kk-muted); font-size:.95rem; }
.testi-who{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.testi-ava{
    width:42px; height:42px; border-radius:50%; background:var(--gradient-brand); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex:0 0 auto;
}
.testi-who b{ display:block; font-size:.92rem; }
.testi-who small{ color:var(--kk-muted); font-size:.8rem; }

/* ---------- Harga ---------- */
.harga-card{
    border:1px solid var(--kk-border); border-radius:var(--radius); padding:1.9rem 1.6rem;
    background:var(--kk-card-bg); height:100%; box-shadow:var(--shadow-sm); position:relative;
    display:flex; flex-direction:column;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.harga-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.harga-card.populer{ border-color:var(--hijau2); box-shadow:0 18px 44px rgba(67,160,71,.22); }
html[data-theme="dark"] .harga-card.populer{ box-shadow:0 18px 44px rgba(0,0,0,.5); }
.harga-card .ribbon{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--gradient-cta); color:#fff; font-size:.72rem; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:.35em 1.1em; white-space:nowrap;
}
.harga-card .plan{ font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--kk-muted); }
.harga-card .price{ font-weight:900; font-size:2rem; line-height:1.15; margin:.5rem 0 .15rem; }
.harga-card .price small{ font-size:.85rem; font-weight:600; color:var(--kk-muted); }
.harga-card .price small.periode{ margin-left:.45rem; }
.harga-card ul{ list-style:none; padding:0; margin:1.1rem 0 1.4rem; }
.harga-card ul li{ padding:.4rem 0; font-size:.92rem; color:var(--kk-muted); display:flex; gap:.6rem; align-items:flex-start; }
.harga-card ul li i{ color:var(--hijau2); margin-top:.25rem; }
.harga-card .mt-auto-note{ margin-top:auto; }

/* ---------- FAQ ---------- */
.faq-acc .accordion-item{
    border:1px solid var(--kk-border); border-radius:var(--radius-sm) !important;
    margin-bottom:.7rem; overflow:hidden; background:var(--kk-card-bg);
}
.faq-acc .accordion-button{
    background:var(--kk-card-bg); color:var(--kk-text); font-weight:700; font-size:.98rem;
    padding:1.05rem 1.2rem; box-shadow:none;
}
.faq-acc .accordion-button:not(.collapsed){ background:var(--muda); color:var(--hijau); }
html[data-theme="dark"] .faq-acc .accordion-button:not(.collapsed){ color:var(--hijau2); }
.faq-acc .accordion-button:focus{ box-shadow:var(--ring); border-color:var(--hijau2); }
.faq-acc .accordion-body{ color:var(--kk-muted); font-size:.94rem; padding-top:.4rem; }
html[data-theme="dark"] .faq-acc .accordion-button::after{ filter:invert(1) brightness(1.8); }

/* ---------- CTA band ---------- */
.cta-band{
    background:var(--gradient-brand); color:#fff; border-radius:24px;
    padding:3rem 2rem; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.cta-band::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(520px 260px at 88% 0%, rgba(255,255,255,.16), transparent 65%);
}
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ font-weight:900; font-size:clamp(1.5rem, 3vw, 2.1rem); }
.cta-band p{ color:rgba(255,255,255,.86); }
.cta-band .btn-light-solid{
    background:#fff; color:var(--hijau); border:0; border-radius:12px; font-weight:800;
    padding:.8rem 1.6rem; transition:transform .18s ease;
}
.cta-band .btn-light-solid:hover{ transform:translateY(-2px); color:var(--hijau); }
.cta-band .btn-outline-light-soft{
    border:2px solid rgba(255,255,255,.7); color:#fff; border-radius:12px; font-weight:700;
    padding:.8rem 1.6rem; transition:background .18s ease, color .18s ease;
}
.cta-band .btn-outline-light-soft:hover{ background:#fff; color:var(--hijau); }

.kontak-box{
    background:var(--kk-card-bg); border:1px solid var(--kk-border); border-radius:var(--radius);
    padding:1.8rem; box-shadow:var(--shadow-sm);
}

/* ---------- Footer ---------- */
footer.site-footer{ background:#0f2a14; color:#cfe6d2; padding:56px 0 22px; }
html[data-theme="dark"] footer.site-footer{ background:#0d1119; color:#9aa3b2; }
footer.site-footer h6{
    color:#fff; font-weight:800; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem;
}
html[data-theme="dark"] footer.site-footer h6{ color:#e6eaf2; }
footer.site-footer a{ color:#cfe6d2; font-size:.92rem; }
html[data-theme="dark"] footer.site-footer a{ color:#9aa3b2; }
footer.site-footer a:hover{ color:#fff; text-decoration:underline; }
footer.site-footer .brand{ font-weight:800; font-size:1.2rem; color:#fff; }
footer.site-footer .brand span{ color:var(--hijau2); }
footer.site-footer .brand-logo{
    width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16); padding:3px; object-fit:contain;
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.14); margin-top:2rem; padding-top:1.1rem;
    font-size:.85rem; color:#a8c6ad;
}
html[data-theme="dark"] .footer-bottom{ border-color:rgba(255,255,255,.08); }

/* ---------- Floating actions ---------- */
.fab-wa{
    position:fixed; right:18px; bottom:20px; z-index:1040;
    display:inline-flex; align-items:center; gap:.55rem;
    background:#25D366; color:#fff; font-weight:700; border-radius:999px;
    padding:.75rem 1.15rem; box-shadow:0 10px 26px rgba(37,211,102,.4);
    transition:transform .18s ease, box-shadow .18s ease;
}
.fab-wa:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 14px 32px rgba(37,211,102,.5); }
.fab-wa i{ font-size:1.25rem; }
.fab-top{
    position:fixed; right:18px; bottom:86px; z-index:1040;
    width:44px; height:44px; border-radius:50%; border:1px solid var(--kk-border);
    background:var(--kk-card-bg); color:var(--kk-text); display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.fab-top.show{ opacity:1; visibility:visible; }
@media (max-width:576px){
    .fab-wa span{ display:none; }
    .fab-wa{ padding:.85rem; }
    .fab-wa i{ font-size:1.35rem; }
}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:991.98px){
    .hero{ padding:64px 0 56px; }
    section{ padding:58px 0; }
    .fitur-row .f-ico{ min-height:78px; }
    .site-nav .nav-link{ padding:.6rem .7rem; }
}
@media (max-width:575.98px){
    .cta-band{ padding:2rem 1.25rem; }
    .stat-bar{ padding:26px 0; }
    .hero .d-flex.flex-wrap.gap-2 > *{ width:100%; }
}
/* ---------- Preview aplikasi di hero ---------- */
.preview-card .preview-body{ padding:.85rem; }
.preview-card .preview-body img{
    width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--kk-border);
}
.preview-card .preview-url{
    margin-left:.45rem; font-size:.8rem; color:var(--kk-muted);
    background:var(--kk-bg); border:1px solid var(--kk-border); border-radius:999px; padding:.15rem .7rem;
}
.preview-card .preview-body .shot-missing{ opacity:.85; }
html[data-theme="dark"] #shotModal .btn-close{ filter:invert(1) grayscale(1) brightness(1.8); }
#shotModal .modal-title{ font-weight:800; }