/* ========================================================
   VaultStorage — Front website
   ======================================================== */
:root {
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-head: 'Sora', 'Manrope', system-ui, sans-serif;

    --indigo: #5b5bf0;
    --indigo-dark: #3d3dd6;
    --indigo-soft: #ececfe;
    --teal: #0ea5a0;
    --teal-soft: #e0f6f4;
    --amber: #f59e0b;
    --amber-soft: #fef3dc;
    --red: #ef4444;
    --red-soft: #fde8e8;
    --green: #16a34a;
    --green-soft: #e3f5e9;
    --pink: #e0529c;
    --pink-soft: #fce7f2;

    --bg: #ffffff;
    --bg-soft: #f5f6fc;
    --border: #e7e8f1;
    --text: #161827;
    --text-muted: #636780;
    --navy: #11132a;

    --shadow: 0 1px 2px rgba(17, 19, 42, .04), 0 10px 30px rgba(17, 19, 42, .06);
    --shadow-lg: 0 30px 70px rgba(30, 30, 100, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

a { text-decoration: none; }
.text-muted-c { color: var(--text-muted); }

.tone-indigo { background: var(--indigo-soft); color: var(--indigo); }
.tone-teal   { background: var(--teal-soft);   color: var(--teal); }
.tone-amber  { background: var(--amber-soft);  color: #c67c00; }
.tone-red    { background: var(--red-soft);    color: var(--red); }
.tone-green  { background: var(--green-soft);  color: var(--green); }
.tone-pink   { background: var(--pink-soft);   color: var(--pink); }
.c-amber { color: var(--amber); }
.c-teal  { color: var(--teal); }

/* ========================================================
   BUTTONS
   ======================================================== */
.btn-primary-s, .btn-ghost-s, .btn-primary-l, .btn-light-l, .btn-outline-l, .btn-white-l {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    border-radius: 12px;
    transition: all .2s;
    white-space: nowrap;
}

.btn-primary-s { background: var(--indigo); color: #fff; padding: 13px 22px; font-size: 14.5px; border-radius: 14px; }
.btn-primary-s:hover { background: var(--indigo-dark); color: #fff; }
.btn-ghost-s { color: var(--text); padding: 13px 16px; font-size: 14.5px; }
.btn-ghost-s:hover { background: var(--bg-soft); color: var(--text); }

.btn-primary-l {
    background: linear-gradient(135deg, #6d6dff, #4b4be6);
    color: #fff;
    padding: 14px 24px;
    box-shadow: 0 12px 28px rgba(91, 91, 240, .35);
}

.btn-primary-l:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(91, 91, 240, .45); }

.btn-light-l { background: #fff; color: var(--text); border: 1.5px solid var(--border); padding: 13px 22px; }
.btn-light-l .bi { color: var(--indigo); font-size: 18px; }
.btn-light-l:hover { border-color: var(--indigo); color: var(--text); }

.btn-outline-l {
    justify-content: center;
    width: 100%;
    border: 1.5px solid var(--text);
    color: var(--text);
    padding: 12px 22px;
}

.btn-outline-l.d-inline-flex { width: auto; }
.btn-outline-l:hover { background: var(--text); color: #fff; }

.btn-white-l { background: #fff; color: var(--indigo-dark); padding: 15px 26px; position: relative; z-index: 1; }
.btn-white-l:hover { color: var(--indigo-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }

/* ========================================================
   NAVBAR
   ======================================================== */
body { --announce-h: 42px; }
body.no-announce, body.scrolled { --announce-h: 0px; }

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 1100;
    background: linear-gradient(90deg, var(--indigo), var(--teal), var(--pink));
}

.announce {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 42px;
    display: flex;
    align-items: center;
    background: var(--navy);
    color: #d6d8ee;
    font-size: 13.5px;
    font-weight: 500;
    transition: transform .3s ease;
}

.announce .container { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; padding-right: 40px; }
.announce a { color: #fff; font-weight: 700; white-space: nowrap; }
.announce a:hover { color: #b9b9ff; }

.new-tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #e0529c);
}

.announce-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 18px;
    display: grid;
    place-items: center;
}

.announce-close:hover { background: rgba(255, 255, 255, .18); }
body.no-announce .announce, body.scrolled .announce { transform: translateY(-100%); }

.site-nav {
    position: fixed;
    top: var(--announce-h);
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 24px 0;
    transition: all .3s ease;
}

.site-nav.scrolled {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(17, 19, 42, .05);
    padding: 16px 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--border);
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: 30px;
    white-space: nowrap;
    transition: color .2s, background .2s;
}

.nav-links a:hover { color: var(--text); }
.nav-links a.active { background: var(--text); color: #fff; box-shadow: 0 6px 14px rgba(17, 19, 42, .18); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.3px;
}

.brand:hover { color: var(--text); }
.brand > span:last-child { color: var(--indigo); }
.brand.light { color: #fff; }
.brand.light > span:last-child { color: #a5a5ff; }

.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(135deg, #7c7cff, #5b5bf0 55%, #0ea5a0);
    box-shadow: 0 8px 20px rgba(91, 91, 240, .35);
}

.nav-menu { display: flex; align-items: center; gap: 6px; }

.nav-menu > a {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    transition: color .2s;
}

.nav-menu > a:hover { color: var(--text); }
.nav-actions { display: flex; gap: 6px; margin-left: 14px; }

.nav-toggle {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    font-size: 22px;
}

/* ========================================================
   SECTIONS
   ======================================================== */
.section { padding: 100px 0; }
.bg-soft { background: var(--bg-soft); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--indigo);
    background: var(--indigo-soft);
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 16px;
}

.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2, .faq-title { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: 16.5px; margin: 0; }

.section-head.light h2 { color: #fff; }
.section-head.light p { color: #a9acc9; }
.section-head.light .eyebrow { background: rgba(255, 255, 255, .1); color: #b9b9ff; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ========================================================
   1. HERO
   ======================================================== */
.hero {
    position: relative;
    padding: 195px 0 110px;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 88% 20%, rgba(14, 165, 160, .13), transparent 60%),
        radial-gradient(700px 500px at 0% 10%, rgba(91, 91, 240, .13), transparent 60%),
        linear-gradient(#fbfbff, #f4f5fc);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 91, 240, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 91, 240, .06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

/* Left copy */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: 40px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(17, 19, 42, .06);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 26px;
    transition: border-color .2s;
}

.hero-pill:hover { border-color: var(--indigo); color: var(--text); }

.hero-pill b {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--indigo), var(--teal));
}

.hero-pill .bi { color: var(--indigo); transition: transform .2s; }
.hero-pill:hover .bi { transform: translateX(3px); }

.hero h1 {
    font-family: var(--font-head);
    font-size: 60px;
    font-weight: 800;
    letter-spacing: -2.2px;
    line-height: 1.08;
    color: var(--text);
    margin-bottom: 24px;
}

.hero h1 .grad {
    position: relative;
    display: inline-block;
    background: linear-gradient(95deg, #4b4be6 0%, #7c5cff 45%, #0ea5a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 6px;
}

.hero h1 .swoosh {
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 18px;
}

.hero h1 .swoosh path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: draw 1.2s .5s ease forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.lead-text {
    font-size: 18.5px;
    color: var(--text-muted);
    max-width: 530px;
    line-height: 1.7;
    margin-bottom: 34px;
}

.lead-text b { color: var(--text); font-weight: 700; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero-cta .btn-primary-l { padding: 16px 26px; font-size: 15.5px; border-radius: 14px; }

.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 8px 8px;
    border-radius: 14px;
    font-weight: 700;
    color: var(--text);
    transition: background .2s;
}

.btn-play:hover { background: rgba(91, 91, 240, .07); color: var(--text); }

.btn-play .play {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--indigo);
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(91, 91, 240, .25);
}

.btn-play .play::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(91, 91, 240, .35);
    animation: pulse 2s ease-out infinite;
}

@keyframes pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

.hero-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 34px; }
.hero-checks span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.hero-checks .bi { color: var(--green); font-size: 16px; }

.hero-proof {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px 10px 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--border);
}

.hero-proof small { color: var(--text-muted); font-weight: 600; font-size: 13px; }
.hero-proof b { font-family: var(--font-head); }

.avatars { display: flex; }

.avatars span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #fff;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: grid;
    place-items: center;
    margin-left: -10px;
}

.avatars span:first-child { margin-left: 0; }
.stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }

/* Right visual */
.hero-visual { position: relative; padding: 30px 10px 50px 40px; }

.hero-visual .glow {
    position: absolute;
    inset: 8% 5% 10% 12%;
    border-radius: 40px;
    background: linear-gradient(135deg, #7c7cff, #0ea5a0);
    filter: blur(70px);
    opacity: .28;
}

.hero-visual .ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(91, 91, 240, .25);
    pointer-events: none;
}

.hero-visual .ring-1 { width: 520px; height: 520px; top: -40px; right: -80px; animation: spin 60s linear infinite; }
.hero-visual .ring-2 { width: 360px; height: 360px; top: 40px; right: 0; animation: spin 40s linear infinite reverse; }

@keyframes spin { to { transform: rotate(360deg); } }

.app-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 40px 90px rgba(30, 30, 100, .18);
    overflow: hidden;
    transform: perspective(1600px) rotateY(-10deg) rotateX(4deg);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.hero-visual:hover .app-card { transform: none; }

.app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.app-top .hello { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.app-top small { display: block; color: var(--text-muted); font-size: 12px; font-weight: 500; }

.app-top .me {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #0ea5a0, #5b5bf0);
}

.app-body { padding: 18px 20px 20px; }

.app-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }

.app-stat {
    border-radius: 16px;
    padding: 12px;
    border: 1px solid var(--border);
}

.app-stat .bi {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    margin-bottom: 8px;
}

.app-stat b { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 800; line-height: 1.1; }
.app-stat small { color: var(--text-muted); font-size: 11.5px; font-weight: 500; }

.app-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.app-title b { font-family: var(--font-head); font-size: 14px; }
.app-title span { font-size: 12px; font-weight: 700; color: var(--indigo); }

.mock-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.mock-row + .mock-row { border-top: 1px dashed var(--border); }
.mock-row b { font-size: 13.5px; font-weight: 700; }
.mock-row small { display: block; color: var(--text-muted); font-size: 11.5px; }

.m-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 17px;
    flex-shrink: 0;
}

.m-bar { height: 6px; background: var(--bg-soft); border-radius: 6px; margin-top: 6px; overflow: hidden; }
.m-bar i { display: block; height: 100%; border-radius: 6px; width: 0; animation: grow 1.4s .6s cubic-bezier(.2, .8, .2, 1) forwards; }

@keyframes grow { to { width: var(--w); } }

.m-tag { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }

/* Floating widgets */
.float-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px 16px 12px 12px;
    box-shadow: 0 24px 50px rgba(30, 30, 100, .16);
    animation: float 6s ease-in-out infinite;
    white-space: nowrap;
}

.float-card b { display: block; font-size: 13.5px; font-weight: 700; }
.float-card small { color: var(--text-muted); font-size: 12px; }

.fc-notif { top: 0; right: -10px; animation-delay: -2s; }
.fc-notif .m-ic { background: #25d366; color: #fff; }
.fc-notif .time { font-size: 11px; color: var(--text-muted); margin-left: 10px; align-self: flex-start; }

/* Scan widget */
.fc-scan {
    left: -20px;
    bottom: 10px;
    display: block;
    width: 200px;
    padding: 14px;
    animation-delay: -4s;
}

.fc-scan .scan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fc-scan .scan-head b { font-size: 13px; }
.fc-scan .live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--teal); }
.fc-scan .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: blink 1s infinite; }

@keyframes blink { 50% { opacity: .3; } }

.receipt {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: var(--bg-soft);
    padding: 10px 12px;
    display: grid;
    gap: 6px;
}

.receipt i { display: block; height: 6px; border-radius: 4px; background: #dfe1ee; }
.receipt i:nth-child(1) { width: 55%; background: #c9cbe0; }
.receipt i:nth-child(2) { width: 80%; }
.receipt i:nth-child(3) { width: 65%; }
.receipt i:nth-child(4) { width: 40%; background: var(--indigo); opacity: .5; }

.receipt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, rgba(14, 165, 160, .35));
    border-bottom: 2px solid var(--teal);
    animation: scan 2.2s ease-in-out infinite;
}

@keyframes scan { 0% { top: -30px; } 100% { top: 100%; } }

.fc-scan .found { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fc-scan .found span { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }

/* Days ring widget */
.fc-ring { right: -24px; bottom: -6px; animation-delay: -1s; }

.ring-chart {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: conic-gradient(var(--green) 0 78%, var(--bg-soft) 78% 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.ring-chart::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.ring-chart span { position: relative; font-family: var(--font-head); font-weight: 800; font-size: 13px; }

@keyframes float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

/* Hero responsive */
@media (max-width: 1199.98px) {
    .hero h1 { font-size: 50px; }
    .fc-notif { right: 0; }
    .fc-ring { right: 0; }
    .fc-scan { left: 0; }
}

@media (max-width: 991.98px) {
    .hero { padding: 170px 0 70px; text-align: center; }
    .lead-text { margin-left: auto; margin-right: auto; }
    .hero-cta, .hero-checks { justify-content: center; }
    .hero-visual { max-width: 560px; margin: 20px auto 0; padding: 30px 10px 50px; }
    .app-card { transform: none; }
    .hero-visual .ring { display: none; }
}

@media (max-width: 575.98px) {
    .hero { padding: 150px 0 50px; }
    .hero h1 { font-size: 38px; letter-spacing: -1.2px; }
    .lead-text { font-size: 16px; }
    .hero-cta .btn-primary-l { width: 100%; justify-content: center; }
    .hero-cta { gap: 8px; }
    .hero-proof { flex-direction: column; text-align: center; gap: 8px; padding: 14px 18px; }
    .hero-visual { padding: 20px 0 30px; }
    .fc-scan, .fc-ring { display: none; }
    .fc-notif { top: -6px; right: 50%; transform: translateX(50%); }
    .app-stat b { font-size: 16px; }
    .app-body, .app-top { padding-left: 14px; padding-right: 14px; }
}

/* ========================================================
   2. STATS STRIP
   ======================================================== */
.stats-strip { padding: 60px 0; border-bottom: 1px solid var(--border); }
.stats-strip b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -1px; color: var(--text); }
.stats-strip span { color: var(--text-muted); font-weight: 500; }

.cat-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.cat-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    transition: all .2s;
}

.cat-row span .bi { color: var(--indigo); }
.cat-row span:hover { border-color: var(--indigo); color: var(--text); transform: translateY(-2px); }

/* ========================================================
   3. LIVE DEMO
   ======================================================== */
.demo-section {
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(91, 91, 240, .07), transparent 70%),
        #fff;
}

.demo-section .section-head { margin-bottom: 34px; }

/* ---------- Notice ---------- */
.dm-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1120px;
    margin: 0 auto 18px;
    padding: 12px 14px 12px 12px;
    border-radius: 16px;
    background: #fffaf0;
    border: 1px solid #f5e1b8;
    font-size: 14px;
    line-height: 1.55;
    color: #6b4e16;
}

.dm-notice-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 19px;
    color: #b7791f;
    background: #fdecc8;
}

.dm-notice-text { flex: 1; min-width: 0; }
.dm-notice-text b { color: #4a3510; }
.dm-notice-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.dm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #f0dcb0;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.dm-link-btn {
    border: 0;
    background: transparent;
    color: #8a5a00;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.dm-link-btn:hover { background: #fdecc8; }

/* ---------- App shell ---------- */
.dm-app {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    background: #f7f8fc;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(30, 30, 100, .14), 0 2px 6px rgba(17, 19, 42, .04);
    overflow: hidden;
    isolation: isolate;
}

.dm-header {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 66px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.dm-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 15.5px; }

.dm-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    background: linear-gradient(135deg, #7c7cff, #5b5bf0 55%, #0ea5a0);
}

.dm-badge {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #b45309;
    background: #fef3c7;
    padding: 3px 8px;
    border-radius: 6px;
}

.dm-search { position: relative; flex: 1; max-width: 360px; margin-left: auto; }
.dm-search .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }

.dm-search input {
    width: 100%;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f2f3f9;
    padding: 0 14px 0 38px;
    font-size: 14px;
    outline: none;
    transition: all .2s;
}

.dm-search input:focus { background: #fff; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }

.dm-head-actions { display: flex; align-items: center; gap: 10px; }

.dm-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 17px;
    transition: all .2s;
}

.dm-icon-btn:hover, .dm-icon-btn[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo); }
.dm-icon-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.dm-icon-btn.ring .bi { animation: bellRing .9s ease; }

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(18deg); }
    30% { transform: rotate(-16deg); }
    45% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
}

.dm-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
}

.dm-primary, .dm-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: all .2s;
}

.dm-primary { border: 0; color: #fff; background: var(--indigo); box-shadow: 0 6px 16px rgba(91, 91, 240, .28); }
.dm-primary:hover { background: var(--indigo-dark); }
.dm-primary.sm { height: 36px; font-size: 13px; margin-top: 12px; }
.dm-secondary { border: 1px solid var(--border); background: #fff; color: var(--text); }
.dm-secondary:hover { border-color: #c9cbe0; background: var(--bg-soft); }

.dm-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #0ea5a0, #5b5bf0);
}

/* Notification panel */
.dm-bell-wrap { position: relative; }

.dm-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: -60px;
    z-index: 30;
    width: 340px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(17, 19, 42, .18);
    overflow: hidden;
    animation: panelIn .18s ease-out;
}

@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.dm-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dm-panel-head b { font-family: var(--font-head); font-size: 14.5px; }
.dm-panel-head button { border: 0; background: transparent; color: var(--indigo); font-weight: 700; font-size: 12.5px; }
.dm-panel-list { max-height: 320px; overflow-y: auto; padding: 6px; }

.dm-note { position: relative; display: flex; gap: 12px; padding: 10px; border-radius: 12px; cursor: default; }
.dm-note:hover { background: var(--bg-soft); }
.dm-note.unread { background: #f6f6ff; }
.dm-note.unread::after { content: ""; position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); }
.dm-note b { display: block; font-size: 13px; padding-right: 16px; }
.dm-note p { margin: 1px 0 2px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.dm-note small { font-size: 11.5px; color: #9a9db3; }

.dm-note-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; }
.dm-note-ic.success { background: var(--green-soft); color: var(--green); }
.dm-note-ic.info { background: var(--indigo-soft); color: var(--indigo); }
.dm-note-ic.warning { background: var(--amber-soft); color: #c67c00; }
.dm-note-ic.danger { background: var(--red-soft); color: var(--red); }
.dm-note-empty { padding: 26px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ---------- Body ---------- */
.dm-body { padding: 22px 22px 24px; }

.dm-welcome { margin-bottom: 16px; }
.dm-welcome h3 { font-size: 21px; font-weight: 700; margin: 0 0 2px; }
.dm-welcome p { margin: 0; color: var(--text-muted); font-size: 14px; }

.dm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }

.dm-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    min-width: 0;
}

.dm-stat > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.dm-stat b { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.dm-stat small { display: block; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-stat b.bump { animation: bump .45s ease; }

@keyframes bump { 40% { transform: scale(1.18); color: var(--indigo); } }

.dm-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }

.dm-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.dm-tabs::-webkit-scrollbar { display: none; }

.dm-tabs button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    padding: 10px 12px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.dm-tabs button em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 20px;
    background: #eef0f6;
    color: var(--text-muted);
}

.dm-tabs button:hover { color: var(--text); }
.dm-tabs button.active { color: var(--indigo); }
.dm-tabs button.active em { background: var(--indigo); color: #fff; }
.dm-tabs button.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--indigo); }

.dm-table-head, .dm-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 84px;
    align-items: center;
    gap: 16px;
}

.dm-table-head {
    padding: 10px 18px;
    background: #fafbfe;
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #9a9db3;
}

.dm-rows { max-height: 372px; overflow-y: auto; }

.dm-row {
    padding: 12px 18px;
    cursor: pointer;
    transition: background .15s;
    outline: none;
    animation: rowIn .3s ease;
}

.dm-row + .dm-row { border-top: 1px solid #f0f1f6; }
.dm-row:hover, .dm-row:focus-visible { background: #f8f8ff; }
.dm-row.flash { animation: rowFlash 1.6s ease; }

@keyframes rowIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rowFlash { 0%, 40% { background: #e8fbf3; } 100% { background: transparent; } }

.dm-item { display: flex; align-items: center; gap: 12px; min-width: 0; }

.dm-item-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

.dm-item-text { min-width: 0; }
.dm-item-text b, .dm-exp b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-item-text small, .dm-exp small { display: block; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-status { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.dm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.dm-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dm-pill.active { background: var(--green-soft); color: var(--green); }
.dm-pill.soon { background: var(--amber-soft); color: #b36b00; }
.dm-pill.urgent, .dm-pill.today { background: #fff1e6; color: #e8590c; }
.dm-pill.expired { background: var(--red-soft); color: var(--red); }

.dm-mini { display: block; width: 100%; max-width: 150px; height: 5px; border-radius: 5px; background: #eef0f6; overflow: hidden; }
.dm-mini.wide { max-width: none; height: 7px; margin: 10px 0 6px; }
.dm-mini i { display: block; height: 100%; border-radius: 5px; background: var(--green); transition: width .6s ease; }
.dm-mini i.soon { background: var(--amber); }
.dm-mini i.urgent, .dm-mini i.today { background: #f97316; }
.dm-mini i.expired { background: var(--red); }

.dm-row-actions { display: flex; justify-content: flex-end; gap: 6px; }

.dm-row-actions button {
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14.5px;
    transition: all .2s;
}

.dm-row:hover .dm-row-actions button { border-color: var(--border); background: #fff; }
.dm-row-actions button:hover { color: var(--indigo); border-color: var(--indigo) !important; }
.dm-row-actions button.danger:hover { color: var(--red); border-color: var(--red) !important; background: var(--red-soft) !important; }

.dm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 42px 16px; color: var(--text-muted); }
.dm-empty > span { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; background: var(--bg-soft); color: #9a9db3; margin-bottom: 12px; }
.dm-empty b { color: var(--text); font-size: 15px; }
.dm-empty small { font-size: 13px; }

/* ---------- Overlays (modal + drawer) — full screen, fixed ---------- */
html.dm-lock, html.dm-lock body { overflow: hidden; }

.dm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 17, 38, .5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s ease;
}

.dm-overlay.show { opacity: 1; }

.dm-modal {
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 40px 100px rgba(15, 17, 38, .35);
    transform: translateY(16px) scale(.98);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.dm-overlay.show .dm-modal { transform: none; }

.dm-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.dm-modal-ic {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, #7c7cff, #5b5bf0 55%, #0ea5a0);
}

.dm-modal-head > div { flex: 1; min-width: 0; }
.dm-modal-head h4 { font-size: 18px; font-weight: 700; margin: 0 0 2px; }
.dm-modal-head p { margin: 0; font-size: 13.5px; color: var(--text-muted); }

.dm-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all .2s;
}

.dm-close:hover { background: var(--border); color: var(--text); }

.dm-modal-body {
    flex: 1;
    min-height: 0;
    padding: 18px 22px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dm-modal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: #fafbfe;
    flex-shrink: 0;
}

.dm-modal-foot .dm-foot-note { margin-right: auto; font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.dm-modal-foot .dm-foot-note .bi { color: var(--green); }

/* Quick fill */
.dm-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--bg-soft);
}

.dm-examples span { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-right: 4px; }

.dm-examples button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    transition: all .15s;
}

.dm-examples button .bi { color: var(--indigo); }
.dm-examples button:hover { border-color: var(--indigo); color: var(--indigo); }

/* Fields */
.dm-field { margin-bottom: 16px; min-width: 0; }
.dm-field > label, .dm-label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.dm-label small { font-weight: 500; color: var(--text-muted); }

.dm-field input, .dm-field select {
    display: block;
    width: 100%;
    height: 46px;
    border: 1.5px solid #e1e3ee;
    border-radius: 12px;
    background: #fff;
    padding: 0 14px;
    font-size: 14.5px;
    color: var(--text);
    outline: none;
    transition: border .15s, box-shadow .15s;
}

.dm-field input::placeholder { color: #a6a9bd; }
.dm-field input:hover, .dm-field select:hover { border-color: #cfd2e3; }
.dm-field input:focus, .dm-field select:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
.dm-field.invalid input { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.dm-err { display: none; font-size: 12.5px; font-weight: 600; color: var(--red); margin-top: 6px; }
.dm-field.invalid .dm-err { display: block; }

.dm-input-ic { position: relative; }
.dm-input-ic > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: var(--text-muted); pointer-events: none; }
.dm-input-ic input { padding-left: 28px; }

.dm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Type: segmented control */
.dm-seg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.dm-seg button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all .15s;
}

.dm-seg button .bi { font-size: 15px; }
.dm-seg button:hover { color: var(--text); }
.dm-seg button.active { background: #fff; color: var(--indigo); box-shadow: 0 2px 8px rgba(17, 19, 42, .1); }

/* Coverage summary */
.dm-coverage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    background: var(--bg-soft);
    color: var(--text-muted);
    transition: background .2s, color .2s;
}

.dm-coverage > .bi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: rgba(255, 255, 255, .7); flex-shrink: 0; }
.dm-coverage b { display: block; font-size: 14px; }
.dm-coverage small { font-size: 12.5px; opacity: .9; }
.dm-coverage.active { background: var(--green-soft); color: var(--green); }
.dm-coverage.soon { background: var(--amber-soft); color: #a96400; }
.dm-coverage.urgent, .dm-coverage.today { background: #fff1e6; color: #d9480f; }
.dm-coverage.expired { background: var(--red-soft); color: var(--red); }

/* Reminder checkboxes */
.dm-toggles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.dm-check {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid #e1e3ee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}

.dm-check input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.dm-check .box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #c9ccdc;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    transition: all .15s;
}

.dm-check .box .bi { opacity: 0; transform: scale(.4); transition: all .15s; }
.dm-check .txt { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text-muted); }
.dm-check .txt b { display: block; font-size: 14px; color: var(--text); }

.dm-check:hover { border-color: #cfd2e3; }
.dm-check:has(input:checked) { border-color: var(--indigo); background: #f7f7ff; }
.dm-check:has(input:checked) .box { background: var(--indigo); border-color: var(--indigo); }
.dm-check:has(input:checked) .box .bi { opacity: 1; transform: none; }
.dm-check:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--indigo-soft); }

/* Drawer */
.dm-overlay-drawer { justify-content: flex-end; padding: 0; }

.dm-drawer {
    width: 100%;
    max-width: 460px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -20px 0 60px rgba(15, 17, 38, .25);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}

.dm-overlay-drawer.show .dm-drawer { transform: none; }


.dr-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.dr-title { flex: 1; min-width: 0; }
.dr-title h4 { font-size: 17px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-title small { color: var(--text-muted); font-size: 13px; }

.dr-body { flex: 1; overflow-y: auto; padding: 18px 20px; }

.dr-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background: var(--bg-soft);
    margin-bottom: 14px;
}

.dr-ring {
    --c: var(--green);
    width: 92px;
    height: 92px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), #e4e6f0 0);
    position: relative;
}

.dr-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.dr-ring > div { position: relative; text-align: center; line-height: 1.1; }
.dr-ring b { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.dr-ring small { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }

.dr-status.soon .dr-ring { --c: var(--amber); }
.dr-status.urgent .dr-ring, .dr-status.today .dr-ring { --c: #f97316; }
.dr-status.expired .dr-ring { --c: var(--red); background: var(--red-soft); }

.dr-status-text { flex: 1; min-width: 0; }
.dr-status-text p { margin: 8px 0 0; font-size: 13.5px; color: var(--text-muted); }
.dr-status-text p b { color: var(--text); }
.dr-status-text small { font-size: 12px; color: var(--text-muted); }

.dr-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
.dr-details > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.dr-details dt { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.dr-details dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }

.dr-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9a9db3; margin: 0 0 10px; }

.dr-timeline { list-style: none; padding: 0; margin: 0 0 18px; position: relative; }
.dr-timeline::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--border); }
.dr-timeline li { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.dr-timeline li > div { flex: 1; }
.dr-timeline b { display: block; font-size: 13.5px; }
.dr-timeline small { font-size: 12px; color: var(--text-muted); }

.dr-timeline .dot {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
    border: 2px solid #fff;
    background: #eef0f6;
    color: var(--text-muted);
}

.dr-timeline em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: #eef0f6; color: var(--text-muted); }
.dr-timeline li.sent .dot { background: var(--green); color: #fff; }
.dr-timeline li.sent em { background: var(--green-soft); color: var(--green); }
.dr-timeline li.due .dot { background: #f97316; color: #fff; }
.dr-timeline li.due em { background: #fff1e6; color: #e8590c; }
.dr-timeline li.scheduled .dot { background: var(--indigo-soft); color: var(--indigo); }
.dr-timeline li.scheduled em { background: var(--indigo-soft); color: var(--indigo); }

.dr-channels { display: flex; gap: 4px; padding: 4px; background: var(--bg-soft); border-radius: 12px; margin-bottom: 10px; }

.dr-channels button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    height: 34px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.dr-channels button.active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(17, 19, 42, .08); }

.dr-preview { animation: rowIn .25s ease; }

.pv-mail { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; font-size: 13.5px; }
.pv-mail-head { padding: 10px 14px; background: #fafbfe; border-bottom: 1px solid var(--border); display: grid; gap: 3px; font-size: 12.5px; color: var(--text-muted); }
.pv-mail-head span { display: inline-block; width: 58px; color: #9a9db3; }
.pv-mail-head b { color: var(--text); }
.pv-mail-body { padding: 14px; line-height: 1.6; }
.pv-mail-body p { margin: 0 0 8px; }
.pv-btn { display: inline-block; padding: 7px 14px; border-radius: 9px; background: var(--indigo); color: #fff; font-weight: 700; font-size: 12.5px; }

.pv-wa {
    padding: 16px;
    border-radius: 14px;
    background: #efe7de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23dcd0c2'/%3E%3C/svg%3E");
}

.pv-bubble {
    position: relative;
    max-width: 92%;
    background: #fff;
    border-radius: 0 12px 12px 12px;
    padding: 9px 12px 20px;
    font-size: 13.5px;
    line-height: 1.55;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

.pv-bubble .from { display: block; font-size: 12px; font-weight: 800; color: #128c7e; margin-bottom: 2px; }
.pv-bubble .tm { position: absolute; right: 10px; bottom: 4px; font-size: 10.5px; color: #8a8f99; }
.pv-bubble .tm .bi { color: #53bdeb; }

.pv-push {
    padding: 18px 14px;
    border-radius: 14px;
    background: linear-gradient(160deg, #1f2150, #3b2f7a 60%, #0e6b69);
}

.pv-push-card {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    font-size: 13px;
}

.pv-app { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7c7cff, #0ea5a0); flex-shrink: 0; }
.pv-push-card > div { flex: 1; min-width: 0; }
.pv-push-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); }
.pv-push-top b { font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pv-push-card strong { display: block; font-size: 13.5px; }
.pv-push-card p { margin: 0; color: #444; }

.dr-foot { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: #fafbfe; }
.dr-foot .dm-secondary, .dr-foot .dm-primary { flex: 1; }

/* ---------- CTA under demo ---------- */
.demo-cta {
    max-width: 1120px;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border-radius: 18px;
    background: linear-gradient(120deg, var(--indigo-soft), var(--teal-soft));
}

.demo-cta b { display: block; font-family: var(--font-head); font-size: 17px; }
.demo-cta span { color: var(--text-muted); font-size: 14px; }

/* ========================================================
   PAGE NOTIFICATIONS (toast stack)
   ======================================================== */
.vs-notify {
    position: fixed;
    top: 88px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.vs-note {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 40px 16px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(17, 19, 42, .16), 0 2px 6px rgba(17, 19, 42, .05);
    overflow: hidden;
    pointer-events: auto;
    animation: noteIn .35s cubic-bezier(.2, .9, .3, 1.2);
}

.vs-note.out { animation: noteOut .3s ease forwards; }

@keyframes noteIn { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes noteOut { to { opacity: 0; transform: translateX(40px); } }

.vs-note-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 17px; }
.vs-note.success .vs-note-ic { background: var(--green-soft); color: var(--green); }
.vs-note.info .vs-note-ic { background: var(--indigo-soft); color: var(--indigo); }
.vs-note.warning .vs-note-ic { background: var(--amber-soft); color: #d18700; }
.vs-note.danger .vs-note-ic { background: var(--red-soft); color: var(--red); }

.vs-note-body { flex: 1; min-width: 0; }
.vs-note-body b { display: block; font-size: 14px; color: var(--text); }
.vs-note-body p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }

.vs-note-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9a9db3;
    font-size: 17px;
    display: grid;
    place-items: center;
}

.vs-note-close:hover { background: var(--bg-soft); color: var(--text); }

.vs-note-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    animation: noteBar linear forwards;
    background: var(--indigo);
}

.vs-note.success .vs-note-bar { background: var(--green); }
.vs-note.warning .vs-note-bar { background: var(--amber); }
.vs-note.danger .vs-note-bar { background: var(--red); }
.vs-note.paused .vs-note-bar { animation-play-state: paused; }

@keyframes noteBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ========================================================
   4. PROBLEM vs SOLUTION
   ======================================================== */
.problem-section { background: var(--bg-soft); }

.text-grad {
    background: linear-gradient(95deg, #4b4be6, #0ea5a0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vs-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }

.vs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    padding: 30px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}

.vs-card:hover { transform: translateY(-4px); }

.vs-card.bad { background: #fff; border: 1px solid #f6d9d9; }

.vs-card.good {
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 160, .55), transparent 45%),
        linear-gradient(140deg, #2b2bb8, #5b5bf0);
    box-shadow: 0 30px 60px rgba(91, 91, 240, .28);
}

.vs-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.vs-emoji { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; flex-shrink: 0; }
.bad .vs-emoji { background: var(--red-soft); }
.good .vs-emoji { background: rgba(255, 255, 255, .16); }
.vs-top small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.bad .vs-top small { color: var(--red); }
.good .vs-top small { color: #9ff3ee; }
.vs-top h3 { font-family: var(--font-head); font-weight: 800; font-size: 22px; margin: 0; }

.vs-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }

.vs-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
    transition: background .2s, transform .2s;
}

.vs-list li:hover { transform: translateX(4px); }
.vs-list li > span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.vs-list b { display: block; font-size: 15px; }
.vs-list small { font-size: 13px; }

.bad .vs-list li { background: #fff8f8; }
.bad .vs-list li > span { background: var(--red-soft); color: var(--red); }
.bad .vs-list b { color: var(--text); text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, .45); }
.bad .vs-list small { color: var(--text-muted); }

.good .vs-list li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.good .vs-list li:hover { background: rgba(255, 255, 255, .14); }
.good .vs-list li > span { background: #fff; color: var(--indigo); }
.good .vs-list small { color: #d2d4ff; }

.vs-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 12px 14px; border-radius: 14px; }
.bad-foot { background: var(--red-soft); color: var(--red); }
.good-foot { background: #fff; color: var(--indigo); justify-content: center; }
.good-foot:hover { color: var(--indigo-dark); box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }

.vs-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.vs-badge.reveal { transform: translate(-50%, calc(-50% + 26px)); }
.vs-badge.reveal.in { transform: translate(-50%, -50%); }

.vs-badge span {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #e0529c);
    border: 6px solid var(--bg-soft);
    box-shadow: 0 10px 24px rgba(224, 82, 156, .35);
}

/* ---------- Demo: larger layout ---------- */
.demo-section .container { max-width: 1320px; }
.dm-notice, .dm-app, .demo-cta { max-width: 1280px; }

.dm-notice { padding: 14px 18px 14px 14px; font-size: 14.5px; }

.dm-app { min-height: 760px; display: flex; flex-direction: column; border-radius: 28px; }
.dm-header { height: 76px; padding: 0 28px; gap: 20px; }
.dm-brand { font-size: 16.5px; }
.dm-logo { width: 38px; height: 38px; font-size: 18px; }
.dm-search { max-width: 420px; }
.dm-search input { height: 44px; font-size: 14.5px; }
.dm-icon-btn { width: 44px; height: 44px; }
.dm-primary, .dm-secondary { height: 44px; padding: 0 18px; font-size: 14.5px; }
.dm-avatar { width: 42px; height: 42px; }

.dm-body { flex: 1; display: flex; flex-direction: column; padding: 30px 32px 34px; }
.dm-welcome { margin-bottom: 22px; }
.dm-welcome h3 { font-size: 26px; }
.dm-welcome p { font-size: 15px; }

.dm-stats { gap: 16px; margin-bottom: 22px; }
.dm-stat { padding: 18px 20px; gap: 14px; border-radius: 18px; }
.dm-stat > span { width: 48px; height: 48px; font-size: 21px; border-radius: 14px; }
.dm-stat b { font-size: 25px; }
.dm-stat small { font-size: 13px; }

.dm-card { flex: 1; display: flex; flex-direction: column; border-radius: 20px; min-height: 440px; }
.dm-tabs { padding: 10px 16px 0; gap: 8px; }
.dm-tabs button { font-size: 14.5px; padding: 12px 12px 14px; }
.dm-table-head { padding: 12px 24px; font-size: 12px; }
.dm-rows { flex: 1; max-height: 540px; }
.dm-row { padding: 16px 24px; gap: 20px; }
.dm-item-ic { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
.dm-item-text b, .dm-exp b { font-size: 15px; }
.dm-item-text small, .dm-exp small { font-size: 13px; }
.dm-pill { font-size: 12.5px; padding: 5px 12px; }
.dm-mini { max-width: 180px; height: 6px; }
.dm-row-actions button { width: 38px; height: 38px; font-size: 15px; }

.dm-empty { flex: 1; justify-content: center; padding: 60px 16px; }
.dm-empty > span { width: 72px; height: 72px; font-size: 30px; border-radius: 22px; }
.dm-empty b { font-size: 17px; margin-bottom: 2px; }
.dm-empty small { font-size: 14px; }
.dm-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.dm-empty-actions .sm { margin-top: 0; height: 42px; }

.dm-panel { width: 380px; }

.demo-cta { padding: 22px 28px; margin-top: 24px; }

@media (max-width: 1199.98px) {
    .dm-app { min-height: 700px; }
    .dm-body { padding: 24px; }
    .dm-row { padding: 14px 18px; }
}

/* ========================================================
   DEMO: app shell with sidebar
   ======================================================== */
.dm-shell { flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; }

.dm-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 16px;
    background: #fff;
    border-right: 1px solid var(--border);
}

.dm-nav { display: flex; flex-direction: column; gap: 4px; }

.dm-nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14.5px;
    text-align: left;
    transition: all .15s;
}

.dm-nav button .bi { font-size: 18px; }
.dm-nav button span { flex: 1; }
.dm-nav button em { font-style: normal; font-size: 11.5px; font-weight: 700; min-width: 24px; text-align: center; padding: 2px 7px; border-radius: 20px; background: #eef0f6; }
.dm-nav button:hover { background: var(--bg-soft); color: var(--text); }
.dm-nav button.active { background: var(--indigo-soft); color: var(--indigo); }
.dm-nav button.active em { background: var(--indigo); color: #fff; }

.dm-storage { margin-top: auto; padding: 14px; border-radius: 14px; background: var(--bg-soft); font-size: 13px; }
.dm-storage b { font-size: 13.5px; }
.dm-storage span { font-weight: 700; color: var(--indigo); }
.dm-storage-bar { height: 7px; border-radius: 7px; background: #e2e4f0; margin: 10px 0 8px; overflow: hidden; }
.dm-storage-bar i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, #7c7cff, #0ea5a0); transition: width .5s ease; }
.dm-storage small { color: var(--text-muted); }

.dm-main { min-width: 0; display: flex; flex-direction: column; }
.dm-view { display: none; flex: 1; flex-direction: column; padding: 30px 32px 34px; min-width: 0; }
.dm-view.active { display: flex; animation: rowIn .25s ease; }

.dm-clip { font-size: 13px; color: var(--text-muted); margin-left: 4px; }

.dm-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    box-shadow: 0 6px 16px rgba(239, 68, 68, .28);
}

.dm-danger:hover { background: #dc2626; }
.dm-secondary.sm, .dm-primary.sm { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; margin-top: 0; }
.dm-icon-btn.sm { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }

.dm-inline-link { border: 0; background: none; padding: 0; color: var(--indigo); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* modal sizes + icon tones */
.dm-modal.sm { max-width: 460px; }
.dm-modal.lg { max-width: 760px; }
.dm-modal-ic.danger { background: var(--red-soft); color: var(--red); }
.dm-modal-ic.success { background: var(--green-soft); color: var(--green); }
.dm-modal-ic.soft { background: var(--indigo-soft); }
.dm-modal-ic.soft.tone-red { background: var(--red-soft); color: var(--red); }
.dm-modal-ic.soft.tone-teal { background: var(--teal-soft); color: var(--teal); }
.dm-modal-ic.soft.tone-amber { background: var(--amber-soft); color: #c67c00; }
.dm-modal-ic.soft.tone-indigo { background: var(--indigo-soft); color: var(--indigo); }
.dm-modal-ic.soft.tone-green { background: var(--green-soft); color: var(--green); }
.dm-modal-head h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-field textarea {
    display: block;
    width: 100%;
    border: 1.5px solid #e1e3ee;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14.5px;
    color: var(--text);
    outline: none;
    resize: vertical;
    transition: border .15s, box-shadow .15s;
}
.dm-field textarea:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
.dm-field.invalid textarea { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }

.c-indigo { color: var(--indigo); }
.c-pink { color: var(--pink); }

/* attach field in add-item modal */
.dm-attach {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px dashed #cfd2e3;
    border-radius: 14px;
    background: #fafbff;
    cursor: pointer;
    transition: all .15s;
}

.dm-attach:hover { border-color: var(--indigo); background: var(--indigo-soft); }
.dm-attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dm-attach-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--indigo); font-size: 18px; flex-shrink: 0; }
.dm-attach-text { flex: 1; min-width: 0; }
.dm-attach-text b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-attach-text small { font-size: 12.5px; color: var(--text-muted); }
.dm-attach.has-file { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.dm-attach.has-file .dm-attach-ic { color: var(--green); }
.dm-attach-clear { position: relative; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 9px; background: #fff; color: var(--text-muted); font-size: 18px; }
.dm-attach-clear:hover { color: var(--red); }

/* ========================================================
   FILES
   ======================================================== */
.fm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.fm-top h3 { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.sh-sub { margin: 0; color: var(--text-muted); font-size: 15px; }
.fm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-upload-btn { cursor: pointer; margin: 0; }

.fm-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--text-muted); }
.fm-crumbs button { border: 0; background: none; padding: 3px 6px; border-radius: 7px; color: var(--text-muted); font-weight: 600; }
.fm-crumbs button:hover { background: var(--indigo-soft); color: var(--indigo); }
.fm-crumbs .bi-chevron-right { font-size: 10px; opacity: .6; }
.fm-crumbs .current { padding: 3px 6px; font-weight: 700; color: var(--text); }

.fm-dropzone {
    position: relative;
    flex: 1;
    min-height: 420px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
}

.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }

.fm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    animation: rowIn .25s ease;
    min-width: 0;
}

.fm-card:hover, .fm-card:focus-visible { border-color: #c9cbe0; box-shadow: 0 12px 28px rgba(17, 19, 42, .08); transform: translateY(-2px); }
.fm-card.folder { background: linear-gradient(180deg, #fbfbff, #fff); }

.fm-more {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .9);
    color: var(--text-muted);
    font-size: 16px;
    opacity: 0;
    transition: opacity .15s, background .15s;
}

.fm-card:hover .fm-more, .fm-card:focus-within .fm-more { opacity: 1; }
.fm-more:hover { background: var(--bg-soft); color: var(--text); }

.fm-folder { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; margin-bottom: 10px; }

.fm-thumb {
    position: relative;
    height: 118px;
    margin: -4px -4px 10px;
    border-radius: 12px;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.fm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .3s; }
.fm-thumb.loaded img { opacity: 1; }
.fm-thumb.loaded .fm-file-ic, .fm-thumb.loaded .fm-ext { opacity: 0; }
.fm-thumb.pdf { background: #fff4f4; }
.fm-thumb.text { background: #f5f5ff; }
.fm-thumb.zip { background: #fff8ec; }

.fm-file-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; flex-shrink: 0; }
.fm-file-ic.sm { width: 38px; height: 38px; font-size: 18px; border-radius: 11px; }

.fm-ext { position: absolute; bottom: 8px; right: 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #9a9db3; background: #fff; padding: 2px 6px; border-radius: 6px; }

.fm-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
.fm-card small { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-card .fm-path { color: var(--indigo); font-weight: 600; }

.fm-dropzone .dm-empty { position: absolute; inset: 0; }

.fm-drop-overlay {
    position: absolute;
    inset: 8px;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2.5px dashed var(--indigo);
    border-radius: 16px;
    background: rgba(236, 236, 254, .92);
    color: var(--indigo);
    pointer-events: none;
}

.fm-drop-overlay .bi { font-size: 40px; }
.fm-drop-overlay b { font-size: 17px; }
.fm-drop-overlay small { font-weight: 600; }
.fm-dropzone.drag .fm-drop-overlay { display: flex; }

/* floating context menu */
.fm-menu {
    position: fixed;
    z-index: 1600;
    width: 210px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(17, 19, 42, .18);
    animation: panelIn .15s ease-out;
}

.fm-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; }
.fm-menu button .bi { color: var(--text-muted); font-size: 15px; }
.fm-menu button:hover { background: var(--bg-soft); }
.fm-menu button:hover .bi { color: var(--indigo); }
.fm-menu button.danger, .fm-menu button.danger .bi { color: var(--red); }
.fm-menu button.danger:hover { background: var(--red-soft); }
.fm-menu hr { margin: 4px 6px; border-color: var(--border); opacity: 1; }

/* preview */
.pv-file { min-height: 240px; display: grid; place-items: center; }
.pv-loading { color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.pv-img { max-width: 100%; max-height: 62vh; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-soft); }
.pv-img.mini { max-height: 320px; }
.pv-pdf { width: 100%; height: 62vh; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); }
.pv-pdf.mini { height: 340px; }
.pv-text { width: 100%; max-height: 60vh; margin: 0; padding: 16px 18px; overflow: auto; border-radius: 12px; background: #f7f8fc; border: 1px solid var(--border); font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.pv-text.mini { max-height: 280px; }
.pv-none { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-muted); padding: 30px; }
.pv-none > .bi { font-size: 34px; }
.pv-none b { color: var(--text); }

.dm-modal-foot .flex-fill { flex: 1; }

/* move / pick lists */
.md-pick { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; padding: 2px; }
.md-pick.grid { display: grid; grid-template-columns: repeat(2, 1fr); max-height: none; margin-bottom: 14px; }
.md-pick.files { max-height: 250px; }

.md-pick-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1.5px solid #e1e3ee;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all .15s;
    min-width: 0;
}

.md-pick-row input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.md-pick-row > .bi { font-size: 18px; color: var(--text-muted); }
.md-pick-row > span:last-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-pick-row small { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.md-pick-row:hover { border-color: #cfd2e3; background: #fafbff; }
.md-pick-row:has(input:checked) { border-color: var(--indigo); background: #f7f7ff; box-shadow: inset 0 0 0 1px var(--indigo); }
.md-pick-row:has(input:checked)::after { content: "\F633"; font-family: bootstrap-icons; color: var(--indigo); font-size: 18px; }
.md-pick-row:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--indigo-soft); }

.md-colors { display: flex; gap: 8px; }
.md-color { width: 48px; height: 44px; border-radius: 12px; border: 2px solid transparent; font-size: 20px; }
.md-color.active { border-color: currentColor; box-shadow: 0 0 0 3px #fff inset; }

/* ========================================================
   INSTANT SHARE
   ======================================================== */
.sh-stats { margin-bottom: 18px; }

.sh-list { display: flex; flex-direction: column; }

.sh-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .9fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    animation: rowIn .25s ease;
}

.sh-row + .sh-row { border-top: 1px solid #f0f1f6; }
.sh-row:hover { background: #fbfbff; }
.sh-row.expired, .sh-row.revoked { opacity: .75; }

.sh-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sh-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.sh-text { min-width: 0; }
.sh-text b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-text small { display: block; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sh-link { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }

.sh-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-soft);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sh-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-chip .bi { color: var(--text-muted); flex-shrink: 0; }
button.sh-chip:hover { border-color: var(--indigo); color: var(--indigo); }
button.sh-chip:hover .bi { color: var(--indigo); }
.sh-chip.code { background: var(--amber-soft); border-color: #f5e1b8; color: #7a4b00; letter-spacing: 1.5px; }
.sh-chip.code.none { background: #fff; color: var(--text-muted); letter-spacing: 0; font-family: var(--font-body); }

.sh-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sh-meta small { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.sh-actions { display: flex; align-items: center; gap: 6px; }

.sh-none { padding: 18px; text-align: center; color: var(--text-muted); font-size: 14px; background: var(--bg-soft); border-radius: 12px; }
.sh-none .bi { margin-right: 4px; }

/* create share modal */
.sh-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }

.sh-kinds button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px;
    border: 1.5px solid #e1e3ee;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    transition: all .15s;
}

.sh-kinds button > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; margin-bottom: 8px; }
.sh-kinds button b { font-size: 14px; }
.sh-kinds button small { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.sh-kinds button:hover { border-color: #cfd2e3; }
.sh-kinds button.active { border-color: var(--indigo); background: #f7f7ff; box-shadow: inset 0 0 0 1px var(--indigo); }

.sh-picker { margin-bottom: 4px; }
.sh-pick-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sh-pick-head .dm-label small { color: var(--indigo); font-weight: 700; }
.sh-pick-search { position: relative; }
.sh-pick-search .bi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); }
.sh-pick-search input { height: 34px; width: 200px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px 0 30px; font-size: 13px; outline: none; }
.sh-pick-search input:focus { border-color: var(--indigo); }

.sh-settings { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0 14px; margin-top: 16px; }
.dm-seg.two { grid-template-columns: repeat(2, 1fr); }

.dm-input-ic.suffix > i { left: auto; right: 14px; }
.dm-input-ic.suffix input { padding-left: 14px; padding-right: 48px; }

.sh-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; background: var(--bg-soft); cursor: pointer; }
.sh-toggle input { position: absolute; opacity: 0; }
.sh-toggle .sw { position: relative; width: 44px; height: 26px; border-radius: 20px; background: #d6d8e5; flex-shrink: 0; transition: background .2s; }
.sh-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.sh-toggle input:checked + .sw { background: var(--indigo); }
.sh-toggle input:checked + .sw::after { transform: translateX(18px); }
.sh-toggle input:focus-visible + .sw { box-shadow: 0 0 0 4px var(--indigo-soft); }
.sh-toggle b { display: block; font-size: 14px; }
.sh-toggle small { font-size: 12.5px; color: var(--text-muted); }

/* share created */
.sh-done .dm-label { margin-bottom: 8px; }
.sh-copy-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1.5px dashed var(--indigo); border-radius: 12px; background: #f7f7ff; }
.sh-copy-box > .bi { color: var(--indigo); font-size: 20px; }
.sh-copy-box span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 600; }
.sh-code-box { display: flex; align-items: center; gap: 6px; }
.sh-code-box span { width: 44px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.sh-code-box .dm-secondary { margin-left: 6px; height: 52px; width: 48px; padding: 0; }
.sh-tip { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.sh-tip .bi { color: var(--amber); }
.sh-tip.warn { color: #9a5f00; }
.sh-done-meta { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 13px; color: var(--text-muted); }

/* recipient page */
.rc-page { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #f4f5fb; }
.rc-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #e9ebf4; }
.rc-bar .dots { display: flex; gap: 5px; }
.rc-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; }
.rc-bar .dots i:nth-child(2) { background: #ffbd2e; }
.rc-bar .dots i:nth-child(3) { background: #28c941; }
.rc-url { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-url .bi { color: var(--green); }
.rc-body { padding: 22px; }
.rc-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--font-head); font-weight: 700; }
.rc-brand .dm-logo { width: 30px; height: 30px; font-size: 14px; }
.rc-brand em { font-style: normal; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--indigo); background: var(--indigo-soft); padding: 2px 8px; border-radius: 20px; }

.rc-state { max-width: 420px; margin: 10px auto 18px; padding: 26px; text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 18px; }
.rc-state-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; font-size: 28px; background: var(--red-soft); color: var(--red); }
.rc-state-ic.lock { background: var(--indigo-soft); color: var(--indigo); }
.rc-state h3 { font-weight: 700; font-size: 19px; }
.rc-state p { color: var(--text-muted); font-size: 14px; }
.rc-code { display: flex; gap: 8px; margin-top: 6px; }
.rc-code input { flex: 1; min-width: 0; height: 50px; border: 1.5px solid #e1e3ee; border-radius: 12px; text-align: center; font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: 8px; outline: none; }
.rc-code input:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
.rc-code input.bad { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); animation: shake .35s; }
.rc-code .dm-primary { height: 50px; }
.rc-err { display: block; margin-top: 8px; color: var(--red); font-size: 13px; font-weight: 600; }
.rc-hint { display: block; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }

@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.rc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rc-head h3 { margin: 0 0 2px; font-weight: 700; font-size: 18px; }
.rc-head small { color: var(--text-muted); font-size: 13px; }
.rc-msg { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--indigo); border-radius: 0 10px 10px 0; background: #fff; font-size: 14px; color: var(--text); }
.rc-msg .bi { color: var(--indigo); margin-right: 4px; }
.rc-note { background: #fff; }
.rc-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.rc-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); flex-wrap: wrap; }
.rc-preview { margin-bottom: 12px; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; display: grid; place-items: center; }
.rc-files { display: flex; flex-direction: column; gap: 8px; }
.rc-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.rc-file.active { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.rc-file-text { flex: 1; min-width: 0; }
.rc-file-text b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-file-text small { font-size: 12.5px; color: var(--text-muted); }
.rc-lock { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-muted); }

/* drawer attachment */
.dr-attach { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 14px; }
.dr-attach-text { flex: 1; min-width: 0; }
.dr-attach-text b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-attach-text small { font-size: 12.5px; color: var(--text-muted); }
.dr-attach.empty { color: var(--text-muted); font-size: 13.5px; background: var(--bg-soft); border-style: dashed; }

/* ---------- shell responsive ---------- */
@media (max-width: 1199.98px) {
    .dm-shell { grid-template-columns: 200px minmax(0, 1fr); }
    .dm-view { padding: 24px; }
    .sh-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "link meta"; row-gap: 12px; }
    .sh-main { grid-area: main; }
    .sh-actions { grid-area: actions; }
    .sh-link { grid-area: link; }
    .sh-meta { grid-area: meta; align-items: flex-end; }
}

@media (max-width: 991.98px) {
    .dm-shell { grid-template-columns: 1fr; }
    .dm-side { flex-direction: row; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
    .dm-nav { flex-direction: row; }
    .dm-nav button { height: 40px; white-space: nowrap; }
    .dm-storage { display: none; }
    .dm-view { padding: 20px 16px; }
    .sh-kinds { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .dm-nav button em { display: none; }
    .fm-top h3 { font-size: 22px; }
    .fm-actions { width: 100%; }
    .fm-actions > * { flex: 1; }
    .fm-actions span { display: none; }
    .fm-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .fm-card { padding: 10px; }
    .fm-thumb { height: 92px; }
    .fm-more { opacity: 1; }
    .fm-dropzone { padding: 10px; min-height: 320px; }
    .sh-row { grid-template-columns: 1fr; grid-template-areas: "main" "link" "meta" "actions"; padding: 14px; }
    .sh-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .sh-actions .dm-secondary { flex: 1; }
    .sh-settings { grid-template-columns: 1fr; }
    .md-pick.grid { grid-template-columns: 1fr; }
    .sh-pick-search input { width: 100%; }
    .sh-pick-search { width: 100%; }
    .sh-code-box span { width: 38px; height: 46px; font-size: 19px; }
    .rc-body { padding: 14px; }
    .rc-file .dm-secondary span { display: none; }
}

/* ========================================================
   ENTER PASSKEY (recipient side)
   ======================================================== */
.ac-wrap { flex: 1; display: flex; flex-direction: column; }

.ac-card {
    width: 100%;
    max-width: 520px;
    margin: auto;
    padding: 40px 36px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(17, 19, 42, .07);
    animation: rowIn .3s ease;
}

.ac-lock {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 32px;
    color: #fff;
    background: linear-gradient(135deg, #7c7cff, #5b5bf0 55%, #0ea5a0);
    box-shadow: 0 14px 30px rgba(91, 91, 240, .35);
}

.ac-card h3 { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.ac-card > p { color: var(--text-muted); font-size: 14.5px; max-width: 380px; margin: 30px auto 24px; }

.ac-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 380px; margin: 0 auto; }

.ac-boxes input {
    width: 100%;
    height: 62px;
    border: 1.5px solid #e1e3ee;
    border-radius: 14px;
    background: var(--bg-soft);
    text-align: center;
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    outline: none;
    transition: all .15s;
}

.ac-boxes input:focus { background: #fff; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); transform: translateY(-2px); }
.ac-boxes input.filled { background: var(--indigo-soft); border-color: var(--indigo); color: var(--indigo); }
.ac-boxes input.bad { border-color: var(--red); background: var(--red-soft); color: var(--red); animation: shake .35s; }

.ac-err { display: block; margin-top: 14px; color: var(--red); font-size: 13.5px; font-weight: 600; }
.ac-submit { width: 100%; max-width: 380px; margin: 22px auto 0; height: 50px; }

.ac-help { max-width: 380px; margin: 22px auto 0; text-align: left; font-size: 13.5px; }
.ac-help summary { cursor: pointer; font-weight: 700; color: var(--indigo); list-style: none; text-align: center; }
.ac-help summary::-webkit-details-marker { display: none; }
.ac-help summary::before { content: "\F4FE"; font-family: bootstrap-icons; margin-right: 6px; }
.ac-help p { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); color: var(--text-muted); line-height: 1.6; }

/* opened share */
.ac-result { flex: 1; }
.ac-open { max-width: 760px; margin: 0 auto; animation: rowIn .3s ease; }

.ac-open-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ac-open-title { flex: 1; min-width: 0; }
.ac-open-title h3 { margin: 0 0 2px; font-size: 22px; font-weight: 700; word-break: break-word; }
.ac-open-title small { color: var(--text-muted); font-size: 13.5px; }

.ac-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ac-flag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.ac-flag .bi { color: var(--indigo); }

.ac-foot-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-muted); text-align: center; }
.ac-foot-note .bi { color: var(--green); }

/* share list extras */
.sh-once { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--pink); }

.sh-code-box.big { justify-content: center; gap: 8px; }
.sh-code-box.big span { width: 52px; height: 62px; font-size: 26px; border-radius: 14px; background: var(--indigo-soft); border-color: transparent; color: var(--indigo); }

.sh-steps { display: grid; gap: 8px; margin-top: 18px; }
.sh-steps div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.sh-steps span { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: #fff; font-size: 11.5px; font-weight: 800; }
.sh-steps b { color: var(--text); }


@media (max-width: 575.98px) {
    .ac-card { padding: 28px 18px 22px; border-radius: 18px; }
    .ac-card h3 { font-size: 20px; }
    .ac-lock { width: 62px; height: 62px; font-size: 27px; border-radius: 20px; }
    .ac-boxes { gap: 6px; }
    .ac-boxes input { height: 52px; font-size: 21px; border-radius: 12px; }
    .ac-open-head .dm-secondary span { display: none; }
    .sh-code-box.big span { width: 40px; height: 52px; font-size: 21px; }
}

/* ========================================================
   CONFIRM DIALOG
   ======================================================== */
.dm-modal.confirm { max-width: 440px; text-align: center; overflow: visible; }
.dm-modal.confirm .dm-modal-body { padding: 34px 30px 8px; overflow: visible; }
.dm-modal.confirm .dm-modal-foot { background: #fff; border-top: 0; padding: 18px 30px 26px; gap: 12px; }

.dm-close.floating {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: transparent;
}

.md-confirm-ic {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 33px;
    color: #fff;
    background: linear-gradient(140deg, #ff6b6b, #ef4444 60%, #d13333);
    box-shadow: 0 16px 34px rgba(239, 68, 68, .35);
}

.md-confirm-ic::before,
.md-confirm-ic::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, .35);
    animation: ringPulse 2.4s cubic-bezier(.2, .7, .3, 1) infinite;
}

.md-confirm-ic::after { animation-delay: 1.2s; }

@keyframes ringPulse {
    0% { transform: scale(.88); opacity: .9; }
    70% { transform: scale(1.25); opacity: 0; }
    100% { opacity: 0; }
}

.md-confirm h4 { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 8px; }
.md-confirm p { margin: 0 auto 18px; max-width: 330px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

.md-target {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-soft);
}

.md-target-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.md-target b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-target small { display: block; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.md-confirm-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.md-confirm-note .bi { color: var(--text-muted); font-size: 14px; margin-top: 1px; }
.md-confirm-note.ok { background: var(--green-soft); color: #14663a; }
.md-confirm-note.ok .bi { color: var(--green); }

.dm-secondary.block, .dm-danger.block, .dm-primary.block { flex: 1; height: 48px; font-size: 15px; }
.dm-danger { transition: transform .15s, box-shadow .2s, background .2s; }
.dm-danger:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(239, 68, 68, .35); }
.dm-danger:focus-visible { outline: 3px solid var(--red-soft); outline-offset: 2px; }

/* undo button inside notifications */
.vs-note-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    transition: all .15s;
}

.vs-note-action:hover { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-soft); }
.vs-note-action .bi { font-size: 14px; }

@media (max-width: 575.98px) {
    .dm-modal.confirm { max-width: none; }
    .dm-modal.confirm .dm-modal-body { padding: 28px 18px 6px; }
    .dm-modal.confirm .dm-modal-foot { padding: 14px 18px 22px; }
    .md-confirm-ic { width: 70px; height: 70px; font-size: 28px; }
    .md-confirm h4 { font-size: 19px; }
}

/* ========================================================
   LIVE TRANSFER (device to device)
   ======================================================== */
.lv-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }

.lv-modes > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
}

.lv-modes span { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; }
.lv-modes b { font-size: 14.5px; }
.lv-modes small { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.lv-panel { margin-bottom: 18px; }

.lv-card {
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(17, 19, 42, .08);
    animation: rowIn .3s ease;
}

.lv-card.ok { border-color: #c9d4ff; }
.lv-card.done { border-color: #bfe6cf; background: linear-gradient(180deg, #f6fffa, #fff); }

.lv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lv-head-text { flex: 1; min-width: 0; }
.lv-head-text b { display: block; font-family: var(--font-head); font-size: 17px; }
.lv-head-text small { color: var(--text-muted); font-size: 13px; }

.lv-ic {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, #7c7cff, #5b5bf0 55%, #e0529c);
    flex-shrink: 0;
}

.lv-card.done .lv-ic { background: linear-gradient(135deg, #34d399, #16a34a); }

.lv-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lv-code { display: flex; gap: 6px; }

.lv-code span {
    width: 46px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--indigo-soft);
    color: var(--indigo);
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 800;
}

.lv-status { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.lv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); animation: blink 1.2s infinite; }
.lv-status.ok { color: var(--indigo); }
.lv-status.ok .lv-dot { background: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
.lv-status.done { color: var(--green); }
.lv-status.done .lv-dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); animation: none; }

.lv-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lv-steps li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--text-muted); }
.lv-steps b { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg-soft); color: var(--text); font-size: 11px; }

.lv-progress { margin-top: 4px; }
.lv-bar { height: 10px; border-radius: 10px; background: #eceef6; overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #7c7cff, #0ea5a0); transition: width .25s ease; }
.lv-stats { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.lv-stats b { color: var(--text); font-family: var(--font-head); }
.lv-file { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lv-files { display: grid; gap: 8px; margin: 14px 0; max-height: 220px; overflow-y: auto; }
.lv-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.lv-file-row b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-file-row small { font-size: 12.5px; color: var(--text-muted); }
.lv-file-row > div { min-width: 0; }

.lv-hint { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-muted); background: var(--bg-soft); padding: 10px 12px; border-radius: 12px; margin: 0 0 14px; }
.lv-hint .bi { color: var(--indigo); }
.lv-accept { width: 100%; height: 48px; }

@media (max-width: 991.98px) {
    .lv-modes { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .lv-card { padding: 16px; border-radius: 16px; }
    .lv-code span { width: 38px; height: 48px; font-size: 20px; }
    .lv-head-text b { font-size: 15.5px; }
}

/* ---------- Demo + VS responsive ---------- */
@media (max-width: 991.98px) {
    .dm-app, .dm-card { min-height: 0; }
    .dm-body { padding: 20px 16px; }
    .dm-header { padding: 0 16px; }
    .dm-notice { flex-wrap: wrap; }
    .dm-notice-side { width: 100%; justify-content: space-between; padding-left: 54px; }
    .dm-stats { grid-template-columns: repeat(2, 1fr); }
    .dm-table-head { display: none; }
    .dm-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "item actions" "exp status"; row-gap: 10px; }
    .dm-item { grid-area: item; }
    .dm-row-actions { grid-area: actions; }
    .dm-exp { grid-area: exp; }
    .dm-status { grid-area: status; align-items: flex-end; }
    .dm-status .dm-pill { align-self: flex-end; }
    .dm-panel { right: -110px; }
    .dm-rows { max-height: 460px; }

    .vs-wrap { grid-template-columns: 1fr; gap: 44px; }
    .vs-badge, .vs-badge.reveal, .vs-badge.reveal.in { transform: translate(-50%, -50%); }
}

@media (max-width: 575.98px) {
    .dm-notice { font-size: 13px; }
    .dm-notice-side { padding-left: 0; flex-wrap: wrap; }
    .dm-header { height: 60px; padding: 0 12px; gap: 8px; }
    .dm-search input { height: 38px; }
    .dm-primary { padding: 0 12px; }
    .dm-avatar { display: none; }
    .dm-body { padding: 16px 12px; }
    .dm-stats { gap: 8px; }
    .dm-stat { padding: 10px; gap: 8px; }
    .dm-stat > span { width: 34px; height: 34px; font-size: 15px; }
    .dm-stat b { font-size: 17px; }
    .dm-row { padding: 12px; }
    .dm-row-actions button { border-color: var(--border); }
    .dm-panel { position: fixed; top: 80px; left: 12px; right: 12px; width: auto; }
    .dm-overlay { padding: 0; align-items: flex-end; }
    .dm-modal { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(40px); }
    .dm-modal-head { padding: 16px; }
    .dm-modal-ic { display: none; }
    .dm-modal-body { padding: 14px 16px 4px; }
    .dm-modal-foot { padding: 12px 16px; }
    .dm-modal-foot .dm-foot-note { display: none; }
    .dm-modal-foot .dm-secondary, .dm-modal-foot .dm-primary { flex: 1; height: 46px; }
    .dm-seg { grid-template-columns: repeat(2, 1fr); }
    .dm-grid-2 { grid-template-columns: 1fr 1fr; gap: 0 10px; }
    .dm-toggles { grid-template-columns: repeat(2, 1fr); }
    .dm-drawer { max-width: none; }
    .dr-foot { flex-wrap: wrap; }
    .dr-foot .dm-secondary, .dr-foot .dm-primary { flex: 1 1 40%; }
    .demo-cta .btn-primary-l { width: 100%; justify-content: center; }
    .vs-card { padding: 22px 18px; border-radius: 22px; }
    .vs-top h3 { font-size: 19px; }
    .vs-notify { top: 76px; right: 16px; }
}

/* ========================================================
   4. FEATURES
   ======================================================== */
.feature {
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.f-ic {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 25px;
    margin-bottom: 20px;
    transition: transform .3s;
}

.feature:hover .f-ic { transform: rotate(-8deg) scale(1.08); }
.feature h3 { font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.feature p { color: var(--text-muted); margin: 0; line-height: 1.6; }

/* ========================================================
   5. HOW IT WORKS
   ======================================================== */
.steps { display: flex; align-items: flex-start; gap: 10px; }

.step { flex: 1; text-align: center; position: relative; padding: 0 10px; }

.step-no {
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #d6d8ea;
    margin-bottom: -26px;
}

.s-ic {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, #7c7cff, #5b5bf0 55%, #0ea5a0);
    box-shadow: 0 14px 30px rgba(91, 91, 240, .35);
}

.step h3 { font-weight: 700; font-size: 19px; margin-bottom: 10px; }
.step p { color: var(--text-muted); max-width: 280px; margin: 0 auto; }

.step-line {
    flex: 0 0 80px;
    height: 2px;
    margin-top: 90px;
    background: repeating-linear-gradient(90deg, #c9cbe0 0 8px, transparent 8px 14px);
}

/* ========================================================
   6. SHOWCASE
   ======================================================== */
.bg-dark-brand {
    background:
        radial-gradient(circle at 90% 0%, rgba(14, 165, 160, .25), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(91, 91, 240, .35), transparent 45%),
        var(--navy);
    color: #fff;
}

.show-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: 0 auto 30px;
    padding: 6px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
}

.show-tabs button {
    border: 0;
    background: transparent;
    color: #a9acc9;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
}

.show-tabs button:hover { color: #fff; }
.show-tabs button.active { background: #fff; color: var(--navy); }

.show-panel {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 28px;
    padding: 48px;
}

.tab-pane-c { display: none; }
.tab-pane-c.show { display: block; animation: fadeIn .45s ease; }

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

.show-panel h3 { font-weight: 800; font-size: 30px; letter-spacing: -.6px; margin-bottom: 14px; }
.show-panel p { color: #b4b7d3; line-height: 1.7; }

.tick-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.tick-list li { display: flex; gap: 10px; align-items: center; font-weight: 500; }

.tick-list .bi {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(14, 165, 160, .2);
    color: #5fe0da;
    font-size: 14px;
}

.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pv-card {
    background: #fff;
    color: var(--text);
    border-radius: 20px;
    padding: 22px;
}

.pv-card > span {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 21px;
    margin-bottom: 14px;
}

.pv-card b { display: block; font-size: 32px; font-weight: 800; line-height: 1; }
.pv-card small { color: var(--text-muted); font-weight: 500; }
.pv-card.wide { grid-column: 1 / -1; }

.mini-chart { display: flex; align-items: flex-end; gap: 12px; height: 110px; margin-top: 14px; }
.mini-chart i { flex: 1; background: var(--indigo-soft); border-radius: 8px 8px 3px 3px; }
.mini-chart i.on { background: linear-gradient(180deg, #7c7cff, var(--indigo)); }

.phone {
    max-width: 380px;
    margin: 0 auto;
    background: #1b1d38;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 34px;
    padding: 30px 16px;
    display: grid;
    gap: 12px;
}

.notif {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(255, 255, 255, .95);
    color: var(--text);
    border-radius: 18px;
    padding: 12px 14px;
}

.notif > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.notif b { display: block; font-size: 13.5px; }
.notif small { color: var(--text-muted); font-size: 12.5px; }
.notif em { font-style: normal; font-size: 11px; color: var(--text-muted); margin-left: auto; }

.share-box {
    background: #fff;
    color: var(--text);
    border-radius: 22px;
    padding: 26px;
    max-width: 480px;
    margin: 0 auto;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed var(--indigo);
    background: var(--indigo-soft);
    border-radius: 14px;
    padding: 8px 8px 8px 14px;
    font-weight: 600;
}

.share-link .bi { font-size: 22px; color: var(--indigo); }
.share-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.share-link button {
    border: 0;
    background: var(--indigo);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 16px;
}

.share-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.share-meta div { background: var(--bg-soft); border-radius: 12px; padding: 12px; }
.share-meta small { display: block; color: var(--text-muted); font-size: 12px; }
.share-meta b { font-size: 15px; }

/* ========================================================
   7. PERSONAS
   ======================================================== */
.persona {
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    transition: all .25s;
}

.persona:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.p-top {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.persona h3 { font-weight: 700; font-size: 19px; }
.persona p { color: var(--text-muted); line-height: 1.6; }

.p-tag {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--indigo);
    border-bottom: 2px solid var(--indigo-soft);
}

/* ========================================================
   8. FREE FOREVER
   ======================================================== */
.free-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.free-ic {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #e0529c);
    margin-bottom: 18px;
}

.free-main h3 { font-family: var(--font-head); font-weight: 800; font-size: 28px; letter-spacing: -.6px; margin-bottom: 10px; }
.free-main p { color: var(--text-muted); margin-bottom: 24px; }
.free-note { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.free-note .bi { color: var(--green); }

.free-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.free-list li { display: flex; gap: 11px; align-items: flex-start; font-weight: 500; line-height: 1.5; }
.free-list li .bi { color: var(--green); font-size: 18px; flex: none; margin-top: 1px; }

@media (max-width: 767.98px) {
    .free-card { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; }
    .free-main h3 { font-size: 23px; }
}

/* ========================================================
   9. REVIEWS
   ======================================================== */
.review {
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.review::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    right: 24px;
    font-size: 90px;
    line-height: 1;
    color: var(--indigo-soft);
    font-family: Georgia, serif;
}

.review p { font-size: 15.5px; line-height: 1.7; margin: 16px 0 24px; flex: 1; }
.who { display: flex; align-items: center; gap: 12px; }

.who > span {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.who b { display: block; }
.who small { color: var(--text-muted); }

/* ========================================================
   10. FAQ
   ======================================================== */
.faq-title { margin-bottom: 14px; }

.faq .accordion-item {
    border: 1px solid var(--border);
    border-radius: 16px !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.faq .accordion-button {
    font-weight: 700;
    font-size: 16px;
    padding: 20px 24px;
    color: var(--text);
    background: #fff;
    box-shadow: none;
}

.faq .accordion-button:not(.collapsed) { color: var(--indigo); }
.faq .accordion-button:focus { box-shadow: none; }
.faq .accordion-body { padding: 0 24px 22px; color: var(--text-muted); line-height: 1.7; }

/* ========================================================
   CTA + FOOTER
   ======================================================== */
.cta-wrap { padding: 0 0 100px; background: var(--bg-soft); }

/* when the section above is white, the band needs its own breathing room */
.section:not(.bg-soft) + .cta-wrap, .bl-main + .cta-wrap { padding-top: 84px; }

.cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding: 56px 60px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(14, 165, 160, .6), transparent 45%),
        radial-gradient(circle at 60% 120%, rgba(224, 82, 156, .5), transparent 45%),
        linear-gradient(120deg, #2b2bb8, #5b5bf0);
    box-shadow: 0 30px 60px rgba(91, 91, 240, .3);
}

.cta h2 { font-weight: 800; font-size: 36px; letter-spacing: -1px; margin-bottom: 8px; position: relative; z-index: 1; }
.cta p { opacity: .85; margin: 0; font-size: 16px; position: relative; z-index: 1; }

.cta-art {
    position: absolute;
    right: 30%;
    bottom: -60px;
    font-size: 220px;
    opacity: .1;
    transform: rotate(-14deg);
}

.site-footer { background: var(--navy); color: #a4a8c7; padding: 80px 0 30px; }
.site-footer p { line-height: 1.7; }
.site-footer h6 { color: #fff; font-weight: 700; margin-bottom: 18px; }

.site-footer .col-6 a, .site-footer .col-lg-2 a {
    display: block;
    color: #a4a8c7;
    margin-bottom: 10px;
    transition: color .2s;
}

.site-footer a:hover { color: #fff; }

.socials { display: flex; gap: 10px; margin-top: 20px; }

.socials a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transition: background .2s;
}

.socials a:hover { background: var(--indigo); }

.news { display: flex; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 5px; }
.news input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; padding: 0 12px; }
.news input::placeholder { color: #7d81a3; }
.news button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--indigo); color: #fff; }

.foot-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 50px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13.5px;
}

.foot-bottom a { color: #a4a8c7; margin-left: 20px; }

.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--indigo);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 24px rgba(91, 91, 240, .4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all .3s;
    z-index: 900;
}

.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { color: #fff; background: var(--indigo-dark); }

.v-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2000;
    background: var(--text);
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 120px);
    opacity: 0;
    transition: all .35s cubic-bezier(.2, .8, .2, 1);
}

.v-toast .bi { color: #5fe0da; }
.v-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ========================================================
   EXTRA: marquee, footer links, badges
   ======================================================== */
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.cat-title {
    text-align: center;
    margin: 44px 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9a9db3;
}

.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}

.marquee-track span .bi { color: var(--indigo); font-size: 16px; }
.marquee-track span:hover { color: var(--text); border-color: var(--indigo); }

@keyframes marquee { to { transform: translateX(-50%); } }

.foot-links a { display: flex !important; align-items: center; gap: 6px; }
.foot-links a .bi { font-size: 10px; opacity: .5; transition: transform .2s, opacity .2s; }
.foot-links a:hover .bi { transform: translateX(3px); opacity: 1; color: var(--teal); }

.contact-list { display: grid; gap: 8px; margin-top: 18px; font-size: 14px; }
.contact-list a, .contact-list span { color: #a4a8c7; display: flex; align-items: center; gap: 8px; }
.contact-list .bi { color: #7c7cff; }

.foot-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.foot-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
    font-weight: 600;
}

.foot-badges .bi { color: #5fe0da; }
.foot-bottom { margin-top: 30px; }

@media (max-width: 575.98px) {
    .announce { font-size: 12px; }
    .announce .container { gap: 6px; padding-left: 10px; }
    .announce .new-tag { display: none; }
}

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 991.98px) {
    .site-nav { background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border); }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 12px;
        box-shadow: var(--shadow-lg);
        display: none;
    }

    .nav-menu.open { display: flex; animation: menuIn .2s ease-out; }
    .nav-links { flex-direction: column; align-items: stretch; background: transparent; border: 0; padding: 0; gap: 2px; }
    .nav-links a { padding: 12px 14px; border-radius: 12px; }
    .nav-actions { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); flex-direction: column; }
    .nav-actions a { justify-content: center; padding: 12px; }

    .section { padding: 72px 0; }
    .section-head { margin-bottom: 40px; }
    .section-head h2, .faq-title { font-size: 32px; }


    .steps { flex-direction: column; align-items: center; gap: 40px; }
    .step-line { display: none; }

    .show-panel { padding: 30px; }
    .cta { padding: 40px 32px; }
    .cta h2 { font-size: 28px; }
}

@media (max-width: 575.98px) {
    .stats-strip b { font-size: 28px; }
    .section-head h2, .faq-title { font-size: 27px; }
    .pain-card, .gain-card, .feature, .persona, .review { padding: 24px 20px; }
    .show-tabs { width: 100%; }
    .show-tabs button { flex: 1; justify-content: center; padding: 10px 6px; font-size: 13px; }
    .show-panel { padding: 22px 18px; border-radius: 22px; }
    .show-panel h3 { font-size: 24px; }
    .preview-grid { gap: 10px; }
    .pv-card { padding: 16px; }
    .pv-card b { font-size: 26px; }
    .share-meta { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .cta { padding: 32px 22px; border-radius: 24px; }
    .cta .btn-white-l { width: 100%; justify-content: center; }
    .foot-bottom { justify-content: center; text-align: center; }
    .foot-bottom a { margin: 0 10px; }
    .to-top { right: 16px; bottom: 16px; }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .nav-links a { padding: 10px 13px; font-size: 13.5px; }
    .nav-links a[href="#reviews"] { display: none; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-links a { padding: 9px 10px; font-size: 13px; }
    .nav-links a[href="#how"], .nav-links a .bi { display: none; }
    .nav-actions .btn-ghost-s { display: none; }
}

/* Typography: headings Sora, body Manrope */
h1, h2, h3, h4, h5, h6, .brand, .stats-strip b, .pv-card b, .step-no, .cta h2, .faq .accordion-button { font-family: var(--font-head); }
h1, h2, h3 { letter-spacing: -.03em; }
/* ========================================================
   NOTES + MOBILE POLISH
   ======================================================== */
.dm-pill.note { background: var(--green-soft); color: var(--green); }
.dm-note-peek { display: block; font-weight: 600 !important; color: var(--text-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-note { background: #fffdf3; border-color: #f2e6c4; max-height: 44vh; margin-bottom: 18px; }
.dr-note-hint { display: flex; gap: 8px; margin: 16px 0 0; font-size: 12.5px; color: var(--text-muted); }
.dr-note-hint .bi { color: var(--indigo); }
.lv-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.lv-tag .bi { color: var(--green); }

/* ---------- tablet ---------- */
@media (max-width: 991.98px) {
    .dm-side { gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .dm-side::-webkit-scrollbar { display: none; }
    .dm-tabs { padding-left: 12px; padding-right: 12px; }
    .lv-code-row { justify-content: space-between; }
}

/* ---------- phone ---------- */
@media (max-width: 575.98px) {
    /* demo notice reads better stacked */
    .dm-notice { flex-direction: column; align-items: flex-start; gap: 10px; }
    .dm-notice-side { width: 100%; justify-content: space-between; gap: 6px; }
    .dm-chip { font-size: 11.5px; padding: 5px 10px; }

    /* app header: logo, search icon, bell, action */
    .dm-header { gap: 6px; padding: 0 10px; }
    .dm-brand span:not(.dm-logo):not(.dm-badge) { display: none; }
    .dm-badge { display: none; }
    .dm-search { max-width: none; }
    .dm-search input { font-size: 16px; }   /* stops iOS zooming in */

    /* item rows */
    .dm-row { gap: 6px 10px; padding: 12px 14px; }
    .dm-item-ic { width: 40px; height: 40px; font-size: 17px; border-radius: 12px; }
    .dm-item-text b { font-size: 14px; }
    .dm-exp b, .dm-exp small { font-size: 12.5px; }
    .dm-status { flex-direction: row; align-items: center; gap: 8px; }
    .dm-mini { max-width: 90px; }
    .dm-note-peek { max-width: 60vw; }

    /* stats: two per row, tighter */
    .dm-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dm-welcome h3 { font-size: 20px; }
    .dm-welcome p { font-size: 13.5px; }

    /* files */
    .fm-top h3 { font-size: 20px; }
    .fm-crumbs { font-size: 13px; }
    .fm-grid { grid-template-columns: repeat(2, 1fr); }

    /* live transfer */
    .lv-code { width: 100%; justify-content: space-between; gap: 4px; }
    .lv-code span { width: auto; flex: 1; height: 52px; font-size: 21px; }
    .lv-code-row .dm-secondary { width: 100%; justify-content: center; }
    .lv-stats { font-size: 12px; }
    .lv-modes > div { grid-template-columns: 38px 1fr; padding: 12px; }
    .lv-modes span { width: 38px; height: 38px; font-size: 17px; }
    .lv-files { max-height: 180px; }
    .sh-actions .lv-tag { display: none; }

    /* forms inside modals never trigger iOS zoom */
    .dm-field input, .dm-field select, .dm-field textarea { font-size: 16px; }
    .ac-boxes input, .rc-code input { font-size: 20px; }

    /* notifications sit above the browser bar */
    .vs-notify { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; flex-direction: column-reverse; }
    .vs-note { padding: 12px 36px 14px 12px; }
    .vs-note-body b { font-size: 13.5px; }
    .vs-note-body p { font-size: 12.5px; }
}


/* ========================================================
   QR CODE (live transfer)
   ======================================================== */
.lv-share { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.lv-share-left { flex: 1; min-width: 220px; }
.lv-share-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.lv-qr { text-align: center; }
.lv-qr-box { width: 148px; height: 148px; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.lv-qr-box svg { width: 100%; height: 100%; display: block; }
.lv-qr-box svg rect:first-child { fill: #fff; }
.lv-qr small { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.lv-qr small .bi { color: var(--indigo); }

.ac-scan {
    display: flex;
    gap: 10px;
    max-width: 380px;
    margin: 26px auto 0;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-soft);
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: left;
}

.ac-scan .bi { color: var(--indigo); font-size: 15px; flex: none; margin-top: 1px; }

@media (max-width: 575.98px) {
    .lv-share { justify-content: center; }
    .lv-qr-box { width: 128px; height: 128px; }
    .lv-share-btns .dm-secondary { flex: 1; justify-content: center; }
}

/* ---------- text message over a live transfer ---------- */
.lv-text-preview {
    margin: 0 0 14px;
    padding: 14px 16px;
    max-height: 190px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid #f2e6c4;
    background: #fffdf3;
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

#mdTextBody { min-height: 150px; resize: vertical; line-height: 1.6; }

@media (max-width: 575.98px) {
    .lv-text-preview { max-height: 150px; font-size: 13px; }
    .rc-actions .dm-primary { width: 100%; justify-content: center; }
}

/* ========================================================
   INSIDE THE APP (bento cards)
   ======================================================== */
.bx-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }

.bx-card {
    grid-column: span 12;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px 28px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.bx-card::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -60px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--indigo-soft);
    opacity: .5;
}

.bx-card > * { position: relative; z-index: 1; }
.bx-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #d9dcee; }
.bx-card.c4 { grid-column: span 4; }
.bx-card.c5 { grid-column: span 5; }
.bx-card.c7 { grid-column: span 7; }

.bx-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 23px;
    margin-bottom: 18px;
}

.bx-card h3 { font-family: var(--font-head); font-size: 21px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 10px; }
.bx-card > p { color: var(--text-muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 20px; }

.bx-list { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 11px; }
.bx-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.bx-list li .bi { color: var(--green); font-size: 16px; flex: none; margin-top: 2px; }

.bx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.bx-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 6px 11px;
    border-radius: 20px;
}

.bx-chips .bi { color: var(--indigo); }

.bx-file {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfbfe;
}

.bx-file span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; flex: none; }
.bx-file b { display: block; font-size: 14px; }
.bx-file small { color: var(--text-muted); font-size: 12.5px; }
.bx-file > .bi { margin-left: auto; color: var(--text-muted); }

/* mini calendar */
.bx-cal { margin-top: auto; border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: #fff; }
.bx-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bx-cal-head b { font-size: 14px; font-family: var(--font-head); }
.bx-cal-head span { display: flex; gap: 10px; color: var(--text-muted); font-size: 12px; }

.bx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.bx-cal-grid em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-muted); padding-bottom: 4px; }
.bx-cal-grid i { font-style: normal; font-size: 13px; font-weight: 600; padding: 7px 0; border-radius: 9px; }
.bx-cal-grid i.soon { background: var(--amber-soft, #fff4e0); color: #b26a00; }
.bx-cal-grid i.due { background: var(--red-soft); color: var(--red); }

.bx-cal-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.bx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }

/* passkey flow */
.bx-flow {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fbfbfe;
    margin-bottom: 16px;
}

.bx-dev { text-align: center; }
.bx-dev > .bi { font-size: 26px; color: var(--indigo); }
.bx-dev b { display: block; font-size: 14px; margin-top: 8px; }
.bx-dev small { color: var(--text-muted); font-size: 12.5px; }

.bx-wire { text-align: center; }

.bx-key {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--indigo);
    background: var(--indigo-soft);
    padding: 7px 14px;
    border-radius: 20px;
}

.bx-line { position: relative; height: 2px; margin: 12px 0 8px; background: linear-gradient(90deg, var(--indigo-soft), var(--indigo), var(--indigo-soft)); }
.bx-line .bi { position: absolute; right: -4px; top: -9px; color: var(--indigo); font-size: 15px; }
.bx-wire small { color: var(--text-muted); font-size: 12px; font-weight: 600; }

.bx-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.bx-tags span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.bx-tags .bi { color: var(--green); }

/* dashboard mini */
.bx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.bx-stats > div { text-align: center; padding: 12px 8px; border: 1px solid var(--border); border-radius: 14px; background: #fbfbfe; }
.bx-stats b { display: block; font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.bx-stats small { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

.bx-rows { display: grid; gap: 10px; margin-top: auto; }

.bx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.bx-row span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; flex: none; }
.bx-row b { display: block; font-size: 13.5px; }
.bx-row small { color: var(--text-muted); font-size: 12px; }
.bx-row em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 20px; white-space: nowrap; }
.bx-row em.soon { background: var(--amber-soft, #fff4e0); color: #b26a00; }
.bx-row em.ok { background: var(--green-soft); color: var(--green); }

/* ========================================================
   HOW IT WORKS (four steps)
   ======================================================== */
.hw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.hw-step {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 26px 24px;
    transition: transform .25s, box-shadow .25s;
}

.hw-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.hw-no {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 800;
    color: #e7e9f6;
    letter-spacing: -1px;
}

.hw-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; }
.hw-step h3 { font-family: var(--font-head); font-size: 18.5px; font-weight: 700; margin-bottom: 9px; }
.hw-step > p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 18px; }

.hw-mini { margin-top: auto; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #fbfbfe; }
.hw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hw-field { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: 8px; }
.hw-pair .hw-field { margin-bottom: 0; }
.hw-field small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.hw-field b { font-size: 13.5px; }

.hw-drop {
    border: 1.5px dashed #cdd2e8;
    border-radius: 11px;
    padding: 14px 10px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 9px;
}

.hw-drop .bi { color: var(--indigo); font-size: 16px; display: block; margin-bottom: 4px; }

.hw-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
}

.hw-chip .bi { color: #e0529c; }
.hw-chip em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--green); font-weight: 700; }

.hw-ticks { display: grid; gap: 8px; }

.hw-ticks span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
}

.hw-ticks span.on { color: var(--indigo); border-color: rgba(91, 91, 240, .35); background: var(--indigo-soft); }
.hw-ticks .bi { font-size: 14px; }

.hw-key { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }

.hw-key span {
    text-align: center;
    padding: 9px 0;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--border);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 800;
    color: var(--indigo);
}

.hw-key-note { display: block; margin-top: 9px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.hw-time { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.hw-time .bi { color: var(--indigo); }

.hw-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
    padding: 28px 30px;
    border-radius: 22px;
    background: var(--indigo-soft);
    border: 1px solid rgba(91, 91, 240, .16);
}

.hw-foot b { display: block; font-family: var(--font-head); font-size: 19px; margin-bottom: 6px; }
.hw-foot p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; max-width: 620px; }

/* ========================================================
   SHOWCASE EXTRAS
   ======================================================== */
.sc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; color: #fff; }
.sc-link:hover { color: #c9c9ff; }
.sc-link .bi { transition: transform .2s; }
.sc-link:hover .bi { transform: translateX(4px); }

.sc-window { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(6, 8, 30, .45); }
.sc-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #f2f3fa; border-bottom: 1px solid var(--border); }
.sc-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d7dae8; }
.sc-bar span:first-child { background: #ff6058; }
.sc-bar span:nth-child(2) { background: #ffbd2e; }
.sc-bar span:nth-child(3) { background: #28c840; }
.sc-bar em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.sc-body { padding: 18px; }

.sc-rows { display: grid; gap: 10px; margin-top: 14px; }

.sc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfbfe;
}

.sc-row span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; flex: none; }
.sc-row b { display: block; font-size: 14px; color: var(--text); }
.sc-row small { color: var(--text-muted); font-size: 12.5px; }
.sc-row em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; white-space: nowrap; }
.sc-row em.soon { background: var(--amber-soft, #fff4e0); color: #b26a00; }
.sc-row em.ok { background: var(--green-soft); color: var(--green); }
.sc-row em.late { background: var(--red-soft); color: var(--red); }

.sc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

.sc-timeline { display: grid; gap: 12px; }

.sc-tl {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

.sc-tl span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 15px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.sc-tl b { display: block; font-size: 14.5px; color: #fff; }
.sc-tl small { font-size: 12.5px; color: rgba(255, 255, 255, .7); line-height: 1.5; }
.sc-tl.done span { background: var(--green); }
.sc-tl.now { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); }
.sc-tl.now span { background: var(--amber, #f59e0b); }

.sc-transfer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

.sc-side { text-align: center; color: #fff; }
.sc-side .bi { font-size: 22px; }
.sc-side b { display: block; font-size: 12.5px; margin-top: 5px; font-weight: 600; }

.sc-track { height: 8px; border-radius: 10px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.sc-track i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #7c7cff, #0ea5a0); }
.sc-progress small { display: block; margin-top: 8px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .75); font-weight: 600; }

/* ========================================================
   RESPONSIVE FOR THE THREE NEW BLOCKS
   ======================================================== */
@media (max-width: 1199.98px) {
    .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .bx-card.c4, .bx-card.c5, .bx-card.c7 { grid-column: span 6; }
    .sc-split { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .bx-card.c4, .bx-card.c5, .bx-card.c7 { grid-column: span 12; }
    .hw-grid { grid-template-columns: minmax(0, 1fr); }
    .hw-foot { padding: 24px 22px; }
    .bx-flow { grid-template-columns: 1fr; text-align: center; }
    .bx-line { max-width: 160px; margin: 12px auto 8px; }
    .sc-transfer { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .bx-card { padding: 24px 20px; }
    .bx-stats b { font-size: 19px; }
    .sc-row em, .bx-row em { font-size: 11px; padding: 4px 8px; }
    .hw-foot .btn-primary-l { width: 100%; justify-content: center; }
}

/* ========================================================
   BROWSER PUSH (demo)
   ======================================================== */
.dr-push {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-soft);
}

.dr-push > .bi { font-size: 20px; color: var(--indigo); flex: none; }
.dr-push b { display: block; font-size: 14px; }
.dr-push small { color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.dr-push .dm-secondary { margin-left: auto; flex: none; }
.dr-push.on { background: var(--green-soft); border-color: rgba(34, 160, 107, .25); }
.dr-push.on > .bi { color: var(--green); }
.dr-push.off { background: #fff6f6; border-color: #f3dede; }
.dr-push.off > .bi { color: var(--red); }

.dm-push-ask {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--indigo-soft);
    transition: background .2s;
}

.dm-push-ask:hover { background: #e4e4fd; }
.dm-push-ask b { display: block; font-size: 13.5px; }
.dm-push-ask p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.dm-push-ask em {
    margin-left: auto;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: var(--indigo);
    padding: 7px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ========================================================
   MOBILE — no sideways wobble, and the demo behaves like an app
   ======================================================== */

/* nothing may push the page wider than the screen.
   'clip' is used rather than 'hidden' so sticky headers keep working. */
html { overflow-x: clip; }

body {
    overflow-x: clip;
    max-width: 100%;
}

img, svg, video, canvas, iframe { max-width: 100%; }
.float-card { max-width: calc(100vw - 32px); }

@media (max-width: 991.98px) {
    .hero-visual { overflow: hidden; }
    .cta, .free-card, .dm-app, .bx-card, .hw-step, .sc-window { max-width: 100%; }
}

/* ---------- the demo as a phone app ---------- */
@media (max-width: 767.98px) {
    .demo-section .container { padding-left: 12px; padding-right: 12px; }
    .dm-app { border-radius: 22px; min-height: 0; }

    /* app bar */
    .dm-header {
        position: sticky;
        top: 0;
        z-index: 20;
        height: 58px;
        gap: 8px;
        padding: 0 12px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: saturate(1.4) blur(10px);
    }

    .dm-search { flex: 1; max-width: none; }
    .dm-search input { height: 38px; font-size: 16px; }

    /* the screen scrolls inside the card, the tabs stay put */
    .dm-shell { grid-template-columns: 1fr; display: flex; flex-direction: column; }
    .dm-main { order: 1; max-height: 64vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .dm-view { padding: 16px 14px 20px; }

    /* bottom tab bar */
    .dm-side {
        order: 2;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
        overflow: visible;
        border-right: 0;
        border-bottom: 0;
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(17, 19, 42, .06);
    }

    .dm-nav { flex-direction: row; width: 100%; gap: 4px; }

    .dm-nav button {
        position: relative;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        height: auto;
        min-width: 0;
        padding: 8px 2px 7px;
        border-radius: 14px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }

    .dm-nav button .bi { font-size: 19px; }
    .dm-nav button span { flex: none; display: block; }

    .dm-nav button em {
        display: block;
        position: absolute;
        top: 3px;
        left: 50%;
        transform: translateX(6px);
        min-width: 17px;
        padding: 1px 5px;
        font-size: 10px;
        line-height: 1.5;
    }

    .dm-nav button.active { background: var(--indigo-soft); color: var(--indigo); }
    .dm-storage { display: none; }

    /* tab strips scroll instead of wrapping */
    .dm-tabs, .fm-crumbs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .dm-tabs::-webkit-scrollbar, .fm-crumbs::-webkit-scrollbar { display: none; }
    .dm-tabs button { flex: none; scroll-snap-align: start; }

    /* the item drawer becomes a bottom sheet */
    .dm-overlay-drawer { align-items: flex-end; justify-content: center; }

    .dm-drawer {
        max-width: none;
        height: auto;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -20px 60px rgba(15, 17, 38, .3);
    }

    .dm-overlay-drawer.show .dm-drawer { transform: none; }

    .dm-drawer .dr-head {
        position: relative;
        padding-top: 22px;
    }

    .dm-drawer .dr-head::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 4px;
        background: #dfe2ef;
    }

    .dr-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    .dr-foot .dm-secondary, .dr-foot .dm-primary { flex: 1; justify-content: center; }

    /* touch targets */
    .dm-row-actions button, .fm-item button { min-width: 38px; min-height: 38px; }
    .dm-primary, .dm-secondary { height: 42px; }
}

@media (max-width: 575.98px) {
    .dm-app { border-radius: 18px; }
    .dm-main { max-height: 68vh; }
    .dm-view { padding: 14px 12px 18px; }
    .dm-nav button { font-size: 10.5px; padding: 7px 1px 6px; }
    .dm-nav button .bi { font-size: 18px; }
    .dm-brand span:not(.dm-logo):not(.dm-badge) { display: none; }
    .dm-logo { width: 34px; height: 34px; font-size: 16px; }
    .dm-primary#dmPrimary { width: 42px; padding: 0; }
    .dm-panel { position: fixed; top: 70px; left: 10px; right: 10px; width: auto; max-height: 60vh; overflow-y: auto; }
}

/* short tab labels on a phone: "Instant Share" reads as "Share" */
@media (max-width: 767.98px) {
    .dm-nav button span[data-short] { font-size: 0; }
    .dm-nav button span[data-short]::after { content: attr(data-short); font-size: 11px; }
}

@media (max-width: 575.98px) {
    .dm-nav button span[data-short]::after { font-size: 10.5px; }
}

/* the announcement line must never widen the page on a small screen */
@media (max-width: 575.98px) {
    .announce { font-size: 11.5px; }
    .announce .container {
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 6px;
        padding-left: 10px;
        padding-right: 38px;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .announce a { flex: none; }
}

/* marks a feature that is still being built */
.soon-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--amber-soft);
    color: #b26a00;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    vertical-align: middle;
}

/* the honest line under the hero buttons */
.hero-proof b { display: block; font-size: 14.5px; }
.hero-proof small { color: var(--text-muted); font-size: 13px; line-height: 1.5; }

.hp-ic {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--indigo), #0ea5a0);
}

/* ========================================================
   KEYBOARD AND SCREEN READER
   ======================================================== */
.skip-link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 3000;
    padding: 12px 20px;
    border-radius: 0 0 14px 14px;
    background: var(--indigo);
    color: #fff;
    font-weight: 700;
    transition: top .18s;
}

.skip-link:focus { top: 0; color: #fff; outline: 3px solid #fff; outline-offset: -6px; }

/* every control shows where the keyboard is */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--indigo);
    outline-offset: 2px;
    border-radius: 6px;
}

/* for text only a screen reader should reach */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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


/* ---------- what a passkey transfer delivered, in the demo ---------- */
.rcv-list { display: grid; gap: 8px; margin: 16px 0 4px; }

.rcv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border: 1px solid var(--dm-border, #e7e8f1);
    border-radius: 14px;
    background: #fff;
}

.rcv-open {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.rcv-open .fm-file-ic { flex: none; overflow: hidden; }
.rcv-open .fm-file-ic img { width: 100%; height: 100%; object-fit: cover; }

.rcv-name { min-width: 0; }
.rcv-name b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcv-name small { font-size: 12px; color: #6b6f86; }
.rcv-open:hover .rcv-name b { color: #5b5bf0; }

.rcv-tools { display: flex; gap: 6px; flex: none; }

.rcv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rcv-actions .dm-primary, .rcv-actions .dm-secondary { flex: 1 1 auto; justify-content: center; }

@media (max-width: 575.98px) {
    .rcv-actions .dm-primary, .rcv-actions .dm-secondary { flex: 1 1 100%; }
}


/* ---------- why you were sent back to the sign-in screen ---------- */
.auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 13px 15px;
    border: 1px solid #f6caca;
    border-radius: 13px;
    background: #fdeeee;
    font-size: 13.5px;
    line-height: 1.6;
    color: #8a3a3a;
}

.auth-notice .bi { color: #ef4444; font-size: 15px; line-height: 1.5; }