:root{
    --navy:#111827;
    --navy-deep:#081a45;
    --navy-mid:#102756;
    --gold:#d4aa2a;
    --gold-soft:#efd57a;
    --bg:#f3f4f6;
    --card:#fff;
    --border:#e5e7eb;
    --text:#111827;
    --muted:#6b7280;
    --blue:#2563eb;
    --blue-dark:#1d4ed8;
    --green:#16a34a;
    --shadow:0 22px 50px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.muted{color:var(--muted)}

.app-body{min-height:100vh;padding:18px;background:var(--bg)}
.app-body.with-navbar{min-height:calc(100vh - 136px);padding:0;background:#fff}
.app-body.with-public-navbar{min-height:100vh;padding:var(--public-header-height, 88px) 0 0;background:#fff}
.app-body.without-navbar{padding:0}
.app-body.home-blank{padding:0}

.flash{max-width:1180px;margin:14px auto;padding:10px 46px 10px 14px;border-radius:10px;border:1px solid;font-weight:600;position:relative;display:flex;align-items:center;gap:10px;transition:opacity .26s ease,transform .26s ease,max-height .26s ease,margin .26s ease,padding .26s ease;overflow:hidden}
.flash.success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.flash.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.flash__text{display:block;min-width:0}
.flash__close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:999px;background:rgba(255,255,255,.72);color:inherit;font-size:18px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.flash__close:hover{background:#fff;box-shadow:0 6px 14px rgba(15,23,42,.10)}
.flash.is-hiding{opacity:0;transform:translateY(-8px);pointer-events:none}
.flash.is-removed{display:none!important}

.page-card{background:var(--card);border:1px solid var(--border);max-width:1180px;margin:0 auto;padding:24px;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.page-card.narrow{max-width:680px}
.page-card h1,.page-card h2,.page-card h3{margin:0 0 10px}
.page-card h1{font-size:28px}
.page-card h2{font-size:22px}
.button-row{display:flex;gap:10px;align-items:center}
.button-row.wrap{flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--border);background:#fff;color:var(--text);font-weight:700;border-radius:10px;cursor:pointer;transition:.2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.08)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-dark)}
.split-layout{display:grid;grid-template-columns:430px minmax(0,1fr);gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;min-height:300px}
.input-panel{position:sticky;top:100px}
.preview-panel{overflow:auto}

/* Landing / login */
.landing-page{min-height:100vh;padding:38px 22px;background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 26%),
    radial-gradient(circle at bottom right, rgba(17,24,39,.16), transparent 28%),
    linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%)}
.landing-shell{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.15fr .95fr;gap:24px;align-items:stretch}
.landing-hero{background:linear-gradient(160deg, rgba(17,24,39,.98) 0%, rgba(30,41,59,.96) 55%, rgba(37,99,235,.96) 100%);color:#fff;border-radius:28px;padding:34px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;min-height:760px}
.hero-badge,.legal-hero-badge{display:inline-flex;align-self:flex-start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;margin-bottom:18px}
.hero-logo-wrap{display:flex;gap:20px;align-items:center;margin-bottom:22px}
.hero-logo{width:86px;height:86px;flex:0 0 86px;border-radius:22px;background:#fff;padding:10px;box-shadow:0 16px 32px rgba(0,0,0,.18)}
.landing-hero h1{font-size:54px;line-height:1.05;margin:0 0 10px;letter-spacing:-.8px}
.hero-subtitle{max-width:700px;font-size:18px;color:rgba(255,255,255,.88);margin:0}
.hero-highlights{display:grid;gap:14px;margin-top:26px}
.hero-point{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);padding:16px 18px;border-radius:18px}
.hero-point strong{display:block;font-size:16px;margin-bottom:4px}
.hero-point span{display:block;color:rgba(255,255,255,.86)}

.landing-login-grid{display:grid;gap:24px;align-content:center}
.login-card{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.75);border-radius:26px;padding:26px;box-shadow:var(--shadow)}
.login-card.admin-card{border-color:#dbeafe}
.login-card-head h2{font-size:28px;margin:8px 0 6px}
.login-card-head p{margin:0 0 14px;color:#475569}
.login-badge{display:inline-flex;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.3px}
.login-badge.user{background:#dbeafe;color:#1d4ed8}
.login-badge.admin{background:#dcfce7;color:#166534}
.login-form-grid{gap:14px}
.login-submit{width:100%;min-height:46px;font-size:15px;margin-top:4px}
.admin-btn{background:#111827;border-color:#111827}
.admin-btn:hover{background:#1f2937}
.demo-note{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px dashed #cbd5e1;color:#334155;font-size:13px}

/* ATS modern public homepage */
html{scroll-behavior:smooth}
.ats-homepage{background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%)}
.ats-hero{position:relative;overflow:hidden;min-height:780px;padding:110px 28px 80px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:36px;align-items:center;max-width:1360px;margin:0 auto}
.ats-hero__aurora{position:absolute;filter:blur(8px);opacity:.95;pointer-events:none;animation:floatAurora 12s ease-in-out infinite}
.aurora-one{width:520px;height:520px;border-radius:46% 54% 61% 39% / 43% 38% 62% 57%;background:linear-gradient(135deg,rgba(149,180,0,.35),rgba(214,225,108,.08));left:-140px;top:10px}
.aurora-two{width:520px;height:520px;border-radius:56% 44% 49% 51% / 54% 40% 60% 46%;background:linear-gradient(135deg,rgba(11,30,75,.16),rgba(37,99,235,.06));right:-140px;bottom:0;animation-delay:-5s}
.ats-hero__grid{position:absolute;inset:0;background-image:radial-gradient(rgba(148,163,184,.14) 1px, transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));pointer-events:none}
.ats-hero__content,.ats-hero__card{position:relative;z-index:2}
.ats-hero__content{max-width:760px}
.ats-hero__badge{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:rgba(149,180,0,.12);border:1px solid rgba(149,180,0,.25);color:#657a00;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.ats-hero__content h1{margin:20px 0 16px;font-size:68px;line-height:1.05;color:#0b1e4b;letter-spacing:-1.4px;max-width:900px}
.ats-hero__content p{margin:0;max-width:760px;font-size:19px;line-height:1.9;color:#475569}
.ats-hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px}
.ats-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:999px;font-weight:800;font-size:15px}
.ats-btn--primary{background:#95b400;color:#fff;box-shadow:0 15px 34px rgba(149,180,0,.24)}
.ats-btn--primary:hover{background:#819b00;color:#fff}
.ats-btn--ghost{background:#fff;border:1px solid #dbe3ef;color:#0b1e4b;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.ats-btn--ghost:hover{border-color:#95b400;color:#0b1e4b}
.ats-hero__stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:36px}
.ats-hero__stats div{min-width:146px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border:1px solid rgba(226,232,240,.95);box-shadow:0 14px 30px rgba(15,23,42,.06)}
.ats-hero__stats strong{display:block;font-size:28px;line-height:1;color:#0b1e4b;margin-bottom:6px}
.ats-hero__stats span{color:#64748b;font-size:14px;font-weight:700}
.ats-hero__card{display:flex;justify-content:center}
.hero-card__window{width:min(440px,100%);background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid #e2e8f0;border-radius:30px;box-shadow:0 24px 50px rgba(15,23,42,.10);overflow:hidden;transform:translateY(0);animation:floatCard 6.5s ease-in-out infinite}
.hero-card__top{display:flex;align-items:center;gap:8px;padding:16px 18px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.hero-card__top span{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.hero-card__body{padding:24px}
.hero-card__title{font-size:22px;font-weight:900;color:#0b1e4b;margin-bottom:18px}
.hero-card__line{height:12px;border-radius:999px;background:linear-gradient(90deg,#d7e36b,#eef4ca);margin-bottom:12px;width:74%}
.hero-card__line.wide{width:100%;height:14px;background:linear-gradient(90deg,#95b400,#dbe88c)}
.hero-card__line.short{width:48%}
.hero-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.hero-card__mini{height:102px;border-radius:20px;background:linear-gradient(180deg,#f8fafc,#eef2ff);border:1px solid #dbe3ef}
.hero-card__floating{position:absolute;right:0;bottom:32px;display:inline-flex;min-height:46px;align-items:center;padding:0 18px;border-radius:999px;background:#0b1e4b;color:#fff;font-weight:800;box-shadow:0 12px 26px rgba(11,30,75,.18)}
.ats-section{max-width:1360px;margin:0 auto;padding:34px 28px 72px}
.section-heading{max-width:760px;text-align:center;margin:0 auto 34px}
.section-heading.left-align{text-align:left;margin:0 0 34px}
.section-heading span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:#e8f0c1;color:#657a00;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.section-heading h2{margin:18px 0 10px;font-size:42px;line-height:1.15;color:#0f172a}
.section-heading p{margin:0;font-size:17px;color:#64748b;line-height:1.8}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{padding:28px;border-radius:24px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 16px 34px rgba(15,23,42,.05);transition:transform .22s ease, box-shadow .22s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px rgba(15,23,42,.10)}
.feature-icon{width:54px;height:54px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#95b400,#dbe88c);color:#0b1e4b;font-weight:900;margin-bottom:18px}
.feature-card h3{margin:0 0 10px;font-size:22px;color:#0f172a}
.feature-card p{margin:0;color:#64748b;line-height:1.8}
.showcase-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}
.showcase-panel{padding:30px;border-radius:28px;border:1px solid #e2e8f0;box-shadow:0 16px 34px rgba(15,23,42,.05)}
.showcase-panel.dark{background:linear-gradient(135deg,#081a45 0%,#142d72 100%);color:#fff;border:none}
.showcase-panel.light{background:#fff}
.showcase-panel h3{margin:0 0 12px;font-size:28px}
.showcase-panel p{margin:0 0 16px;line-height:1.8;color:inherit;opacity:.92}
.showcase-panel ul{margin:0;padding-left:18px;display:grid;gap:8px;opacity:.95}
.ats-inline-link{display:inline-flex;margin-top:18px;color:#dbe88c;font-weight:800}
.showcase-chip-wrap{display:flex;flex-wrap:wrap;gap:12px}
.showcase-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;color:#0f172a;font-weight:800}
.ats-contact{padding-top:6px}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 34px;border-radius:28px;background:linear-gradient(135deg,#95b400 0%,#b1ca2d 100%);color:#fff;box-shadow:0 20px 40px rgba(149,180,0,.22)}
.contact-card span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.contact-card h2{margin:14px 0 8px;font-size:40px;line-height:1}
.contact-card p{margin:0;color:rgba(255,255,255,.92);line-height:1.8}
.contact-meta{display:grid;gap:12px;text-align:right;font-weight:800}
.contact-meta a,.contact-meta span{color:#fff}
@keyframes floatAurora{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-18px,0) rotate(6deg)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width: 1180px){
  .ats-hero{grid-template-columns:1fr;padding-top:90px}
  .ats-hero__content h1{font-size:54px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .showcase-grid,.contact-card{grid-template-columns:1fr;display:grid}
  .contact-meta{text-align:left}
}
@media (max-width: 720px){
  .ats-hero{padding:72px 16px 48px}
  .ats-section{padding:24px 16px 54px}
  .ats-hero__content h1{font-size:40px}
  .section-heading h2{font-size:32px}
  .feature-grid{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr}
  .hero-card__floating{position:static;margin-top:16px}
  .ats-hero__stats div{min-width:calc(50% - 12px)}
}


/* Redesigned split login/register page */
.login-page-shell{
    min-height:calc(100vh - 136px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:36px 18px 52px;
    background:#eef1f5;
}
.login-split-card{
    width:min(1290px, 100%);
    min-height:760px;
    display:grid;
    grid-template-columns: 0.95fr 1.15fr;
    background:#fff;
    border:1px solid #eadbb0;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 55px rgba(8,26,69,.10);
}
.login-left-pane{
    position:relative;
    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.06) 0 1px, transparent 1px),
        radial-gradient(circle at 75% 70%, rgba(255,255,255,.05) 0 1px, transparent 1px),
        linear-gradient(180deg, #071740 0%, #031033 100%);
    background-size:38px 38px, 42px 42px, auto;
    color:#fff;
}
.login-left-inner{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:62px 48px;
}
.login-brand-icon{
    font-size:64px;
    line-height:1;
    color:#d4aa2a;
    margin-bottom:22px;
}
.login-brand-title{
    font-size:44px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:.4px;
    color:#ffffff;
    font-family:Georgia, "Times New Roman", serif;
    margin-bottom:34px;
}
.login-brand-title span{
    color:#d4aa2a;
}
.login-brand-desc{
    max-width:420px;
    font-size:17px;
    line-height:1.8;
    color:rgba(255,255,255,.80);
    margin:0;
}
.login-right-pane{
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
}
.login-form-wrap{
    width:min(560px, 100%);
}
.login-form-wrap h1{
    margin:0 0 8px;
    font-size:38px;
    line-height:1.15;
    color:#081a45;
    font-weight:800;
}
.login-subtext{
    margin:0 0 28px;
    color:#64748b;
    font-size:17px;
}
.redesigned-login-grid{
    gap:20px;
}
.login-field-label{
    position:relative;
    display:flex;
    align-items:center;
}
.login-field-label .input-icon{
    position:absolute;
    left:22px;
    z-index:2;
    font-size:22px;
    opacity:.65;
}
.login-field-label input{
    width:100%;
    min-height:78px;
    border-radius:18px;
    border:1px solid #d8dee8;
    background:#f8fafc;
    padding:0 22px 0 62px;
    font-size:16px;
    color:#0f172a;
    outline:none;
}
.login-field-label input:focus{
    border-color:#d4aa2a;
    box-shadow:0 0 0 4px rgba(212,170,42,.12);
    background:#fffdf6;
}
.forgot-password-row{
    display:flex;
    justify-content:flex-end;
    margin-top:-4px;
    margin-bottom:4px;
}
.forgot-password-row a{
    color:#d4aa2a;
    font-weight:700;
    font-size:14px;
}
.gold-login-btn{
    width:100%;
    min-height:70px;
    border:none;
    border-radius:18px;
    background:#d4aa2a;
    color:#fff;
    font-size:18px;
    font-weight:800;
    letter-spacing:.3px;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(212,170,42,.25);
}
.gold-login-btn:hover{
    background:#bf9822;
}
.login-divider{
    display:flex;
    align-items:center;
    gap:18px;
    margin:34px 0 22px;
    color:#94a3b8;
    font-weight:800;
    font-size:13px;
}
.login-divider::before,
.login-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#d8dee8;
}
.google-account-btn{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border:1px solid #d8dee8;
    border-radius:18px;
    background:#fff;
    color:#0f172a;
    font-weight:800;
    font-size:16px;
}
.google-account-btn:hover{
    background:#f8fafc;
}
.google-mark{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:24px;
    font-weight:800;
    color:#ea4335;
    background:#fff;
}
.login-bottom-links{
    margin-top:34px;
    text-align:center;
}
.login-bottom-links p{
    margin:0 0 18px;
    color:#64748b;
    font-size:16px;
}
.login-bottom-links p a{
    color:#d4aa2a;
    font-weight:800;
}
.back-home-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#081a45;
    font-weight:800;
    font-size:16px;
}
.register-bottom-links{
    margin-top:28px;
}

@media (max-width: 1100px){
    .login-split-card{
        grid-template-columns:1fr;
    }
    .login-left-pane{
        min-height:290px;
    }
}
@media (max-width: 720px){
    .login-page-shell{
        padding:18px 12px 28px;
    }
    .login-split-card{
        min-height:auto;
        border-radius:20px;
    }
    .login-left-inner,
    .login-right-pane{
        padding:24px 20px;
    }
    .login-brand-title{
        font-size:34px;
    }
    .login-form-wrap h1{
        font-size:30px;
    }
    .login-field-label input,
    .gold-login-btn,
    .google-account-btn{
        min-height:58px;
    }
}


/* Dashboard home old */
.dashboard-home{max-width:1180px;margin:0 auto;padding-top:8px}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#ffffff 0%,#eff6ff 100%)}
.dashboard-subtitle{font-size:15px;color:#475569;max-width:760px}
.dashboard-logo{width:110px;height:110px;flex:0 0 110px;padding:12px;background:#fff;border-radius:26px;border:1px solid #dbeafe;box-shadow:0 10px 25px rgba(37,99,235,.12)}
.dashboard-grid{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:18px;margin-top:18px}
.feature-card{min-height:210px}
.feature-list{padding-left:18px;margin:0;display:grid;gap:8px;color:#334155}
.feature-list.compact{gap:6px}

@media (max-width: 1200px){
    .legal-summary-grid{grid-template-columns:1fr}
}
@media (max-width: 1100px){
    .landing-shell{grid-template-columns:1fr}
    .landing-hero{min-height:unset}
    .dashboard-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
    .landing-page{padding:18px}
    .landing-hero,.login-card{padding:20px}
    .landing-hero h1{font-size:38px}
    .hero-logo-wrap{align-items:flex-start;flex-direction:column}
    .dashboard-hero{flex-direction:column;align-items:flex-start}
    .legal-hero-section{min-height:560px;padding-top:52px}
    .legal-hero-section h1{font-size:46px}
    .legal-hero-text{font-size:16px;line-height:1.7}
    .legal-primary-btn{min-width:230px}
    .floating-help-badge{position:static;margin-top:24px}
}

/* ATS modern public homepage */
html{scroll-behavior:smooth}
.ats-homepage{background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%)}
.ats-hero{position:relative;overflow:hidden;min-height:780px;padding:110px 28px 80px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:36px;align-items:center;max-width:1360px;margin:0 auto}
.ats-hero__aurora{position:absolute;filter:blur(8px);opacity:.95;pointer-events:none;animation:floatAurora 12s ease-in-out infinite}
.aurora-one{width:520px;height:520px;border-radius:46% 54% 61% 39% / 43% 38% 62% 57%;background:linear-gradient(135deg,rgba(149,180,0,.35),rgba(214,225,108,.08));left:-140px;top:10px}
.aurora-two{width:520px;height:520px;border-radius:56% 44% 49% 51% / 54% 40% 60% 46%;background:linear-gradient(135deg,rgba(11,30,75,.16),rgba(37,99,235,.06));right:-140px;bottom:0;animation-delay:-5s}
.ats-hero__grid{position:absolute;inset:0;background-image:radial-gradient(rgba(148,163,184,.14) 1px, transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));pointer-events:none}
.ats-hero__content,.ats-hero__card{position:relative;z-index:2}
.ats-hero__content{max-width:760px}
.ats-hero__badge{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:rgba(149,180,0,.12);border:1px solid rgba(149,180,0,.25);color:#657a00;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.ats-hero__content h1{margin:20px 0 16px;font-size:68px;line-height:1.05;color:#0b1e4b;letter-spacing:-1.4px;max-width:900px}
.ats-hero__content p{margin:0;max-width:760px;font-size:19px;line-height:1.9;color:#475569}
.ats-hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px}
.ats-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:999px;font-weight:800;font-size:15px}
.ats-btn--primary{background:#95b400;color:#fff;box-shadow:0 15px 34px rgba(149,180,0,.24)}
.ats-btn--primary:hover{background:#819b00;color:#fff}
.ats-btn--ghost{background:#fff;border:1px solid #dbe3ef;color:#0b1e4b;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.ats-btn--ghost:hover{border-color:#95b400;color:#0b1e4b}
.ats-hero__stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:36px}
.ats-hero__stats div{min-width:146px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border:1px solid rgba(226,232,240,.95);box-shadow:0 14px 30px rgba(15,23,42,.06)}
.ats-hero__stats strong{display:block;font-size:28px;line-height:1;color:#0b1e4b;margin-bottom:6px}
.ats-hero__stats span{color:#64748b;font-size:14px;font-weight:700}
.ats-hero__card{display:flex;justify-content:center}
.hero-card__window{width:min(440px,100%);background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid #e2e8f0;border-radius:30px;box-shadow:0 24px 50px rgba(15,23,42,.10);overflow:hidden;transform:translateY(0);animation:floatCard 6.5s ease-in-out infinite}
.hero-card__top{display:flex;align-items:center;gap:8px;padding:16px 18px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.hero-card__top span{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.hero-card__body{padding:24px}
.hero-card__title{font-size:22px;font-weight:900;color:#0b1e4b;margin-bottom:18px}
.hero-card__line{height:12px;border-radius:999px;background:linear-gradient(90deg,#d7e36b,#eef4ca);margin-bottom:12px;width:74%}
.hero-card__line.wide{width:100%;height:14px;background:linear-gradient(90deg,#95b400,#dbe88c)}
.hero-card__line.short{width:48%}
.hero-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.hero-card__mini{height:102px;border-radius:20px;background:linear-gradient(180deg,#f8fafc,#eef2ff);border:1px solid #dbe3ef}
.hero-card__floating{position:absolute;right:0;bottom:32px;display:inline-flex;min-height:46px;align-items:center;padding:0 18px;border-radius:999px;background:#0b1e4b;color:#fff;font-weight:800;box-shadow:0 12px 26px rgba(11,30,75,.18)}
.ats-section{max-width:1360px;margin:0 auto;padding:34px 28px 72px}
.section-heading{max-width:760px;text-align:center;margin:0 auto 34px}
.section-heading.left-align{text-align:left;margin:0 0 34px}
.section-heading span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:#e8f0c1;color:#657a00;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.section-heading h2{margin:18px 0 10px;font-size:42px;line-height:1.15;color:#0f172a}
.section-heading p{margin:0;font-size:17px;color:#64748b;line-height:1.8}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{padding:28px;border-radius:24px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 16px 34px rgba(15,23,42,.05);transition:transform .22s ease, box-shadow .22s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px rgba(15,23,42,.10)}
.feature-icon{width:54px;height:54px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#95b400,#dbe88c);color:#0b1e4b;font-weight:900;margin-bottom:18px}
.feature-card h3{margin:0 0 10px;font-size:22px;color:#0f172a}
.feature-card p{margin:0;color:#64748b;line-height:1.8}
.showcase-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}
.showcase-panel{padding:30px;border-radius:28px;border:1px solid #e2e8f0;box-shadow:0 16px 34px rgba(15,23,42,.05)}
.showcase-panel.dark{background:linear-gradient(135deg,#081a45 0%,#142d72 100%);color:#fff;border:none}
.showcase-panel.light{background:#fff}
.showcase-panel h3{margin:0 0 12px;font-size:28px}
.showcase-panel p{margin:0 0 16px;line-height:1.8;color:inherit;opacity:.92}
.showcase-panel ul{margin:0;padding-left:18px;display:grid;gap:8px;opacity:.95}
.ats-inline-link{display:inline-flex;margin-top:18px;color:#dbe88c;font-weight:800}
.showcase-chip-wrap{display:flex;flex-wrap:wrap;gap:12px}
.showcase-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;color:#0f172a;font-weight:800}
.ats-contact{padding-top:6px}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 34px;border-radius:28px;background:linear-gradient(135deg,#95b400 0%,#b1ca2d 100%);color:#fff;box-shadow:0 20px 40px rgba(149,180,0,.22)}
.contact-card span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.contact-card h2{margin:14px 0 8px;font-size:40px;line-height:1}
.contact-card p{margin:0;color:rgba(255,255,255,.92);line-height:1.8}
.contact-meta{display:grid;gap:12px;text-align:right;font-weight:800}
.contact-meta a,.contact-meta span{color:#fff}
@keyframes floatAurora{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-18px,0) rotate(6deg)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width: 1180px){.ats-hero{grid-template-columns:1fr;padding-top:90px}.ats-hero__content h1{font-size:54px}.feature-grid{grid-template-columns:repeat(2,1fr)}.showcase-grid,.contact-card{grid-template-columns:1fr;display:grid}.contact-meta{text-align:left}}
@media (max-width: 720px){.ats-hero{padding:72px 16px 48px}.ats-section{padding:24px 16px 54px}.ats-hero__content h1{font-size:40px}.section-heading h2{font-size:32px}.feature-grid{grid-template-columns:1fr}.showcase-grid{grid-template-columns:1fr}.hero-card__floating{position:static;margin-top:16px}.ats-hero__stats div{min-width:calc(50% - 12px)}}

/* V17 standard web workspace */
body.auth-body{background:#eef2f7;overflow:auto}
.app-body.with-navbar{min-height:calc(100vh - 76px);height:auto;overflow:visible;padding:28px;background:#eef2f7}
.app-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid #e2e8f0;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.app-header__inner{max-width:1360px;margin:0 auto;min-height:76px;padding:0 24px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.app-brand{display:flex;align-items:center;gap:12px;color:#0f172a;min-width:260px}
.app-brand__mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#2563eb;color:#fff;font-weight:900;font-size:14px}
.app-brand__text{display:flex;flex-direction:column;gap:2px}.app-brand__text strong{font-size:18px;line-height:1}.app-brand__text small{font-size:11px;color:#64748b;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-nav{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.app-nav a,.app-nav button{border:0;background:transparent;color:#475569;font-size:14px;font-weight:700;padding:10px 12px;border-radius:10px;cursor:pointer}.app-nav a:hover,.app-nav button:hover,.app-nav .active{background:#eff6ff;color:#1d4ed8}.app-nav__dropdown{position:relative}.app-nav__menu{display:none;position:absolute;top:44px;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.12);min-width:230px;padding:8px}.app-nav__dropdown:hover .app-nav__menu{display:grid}.app-nav__menu a{display:block;text-align:left;white-space:nowrap}
.app-header__actions{display:flex;align-items:center;gap:8px}.btn.small{min-height:38px;padding:8px 12px;font-size:13px;border-radius:10px}.btn.danger{background:#ef4444;border-color:#ef4444;color:#fff}.user-pill{display:inline-flex;min-height:34px;align-items:center;padding:0 12px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:12px;font-weight:800;text-transform:capitalize}
.web-dashboard{max-width:1360px;margin:0 auto;display:grid;gap:22px}.dashboard-hero-modern{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:center;background:linear-gradient(135deg,#0b1e4b 0%,#1d4ed8 100%);color:#fff;border-radius:24px;padding:34px;box-shadow:0 22px 50px rgba(37,99,235,.18)}.dashboard-hero-modern h1{margin:8px 0 10px;font-size:36px}.dashboard-hero-modern p{margin:0;max-width:760px;color:rgba(255,255,255,.86);font-size:16px;line-height:1.75}.eyebrow{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:800;font-size:12px}.dashboard-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.dashboard-status-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:22px;display:grid;gap:6px}.dashboard-status-card span{font-size:12px;color:rgba(255,255,255,.75)}.dashboard-status-card strong{font-size:24px;text-transform:capitalize}.dashboard-status-card small{color:rgba(255,255,255,.86)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:22px;box-shadow:0 12px 26px rgba(15,23,42,.05)}.stat-card span{color:#2563eb;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.stat-card strong{display:block;font-size:24px;margin:6px 0;color:#0f172a}.stat-card p{margin:0;color:#64748b;line-height:1.7}
.dashboard-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.page-card.no-margin{margin:0;max-width:none}.quick-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.quick-action-grid a{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;font-weight:800;color:#0f172a}.quick-action-grid a:hover{background:#eff6ff;color:#1d4ed8}.engine-help-box{padding:16px;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0;display:grid;gap:8px}.engine-help-box code{white-space:normal;color:#334155}
.tools-card{max-width:1100px;max-height:calc(100vh - 150px);overflow:auto}.photo-bg-tool-page{max-width:1200px}.photo-bg-php-form .photo-grid{align-items:start}.photo-bg-php-form .panel-card{max-height:calc(100vh - 260px);overflow:auto;border-radius:16px;background:#fff}.photo-bg-php-form label{display:grid;grid-template-columns:220px minmax(240px,1fr);align-items:center;gap:14px;margin-bottom:10px}.photo-bg-php-form input,.photo-bg-php-form select{min-height:42px;padding:8px 12px;border:1px solid #cbd5e1;background:#fff}.photo-preview-empty{border-radius:14px;background:#f8fafc}

/* v21.53 Photo background quick mode tooltip */
.photo-bg-php-form .quick-mode-row{margin-top:8px}
.photo-bg-php-form .mode-help{display:block;margin-top:7px;color:#475569;line-height:1.45}
.photo-bg-php-form .field-help b{font-weight:900}
@media(max-width:1100px){.app-header__inner{flex-wrap:wrap;padding:12px 18px}.app-brand{width:100%}.app-nav{justify-content:flex-start;flex-wrap:wrap}.app-header__actions{width:100%;justify-content:flex-start}.dashboard-hero-modern,.dashboard-two-col{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.photo-bg-php-form label{grid-template-columns:1fr}.photo-bg-php-form .photo-grid{grid-template-columns:1fr}}
@media(max-width:720px){.app-body.with-navbar{padding:16px}.stat-grid,.quick-action-grid{grid-template-columns:1fr}.dashboard-hero-modern{padding:24px}.dashboard-hero-modern h1{font-size:28px}.app-nav{gap:4px}.app-nav a,.app-nav button{font-size:13px;padding:8px 9px}}


.alert-box.warning-box,
.fallback-warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #7c2d12;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px 0 14px;
    font-size: 13px;
    line-height: 1.5;
}
.alert-box.warning-box code,
.fallback-warning code {
    background: rgba(255,255,255,.75);
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 1px 5px;
}
.php-fallback-letter p {
    margin: 0 0 9px;
    line-height: 1.55;
}
.alert-box.success-box,
.fallback-warning.success {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #14532d;
}
.alert-box.success-box code,
.fallback-warning.success code {
    background: rgba(255,255,255,.75);
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 1px 5px;
}

.advanced-json-editor{border:1px solid #e2e8f0;border-radius:14px;padding:12px;background:#f8fafc;margin:10px 0}.advanced-json-editor summary{font-weight:900;cursor:pointer;margin-bottom:10px}.advanced-json-editor textarea{font-family:Consolas,monospace;font-size:12px;min-height:120px}



/* v18.11 Tools dropdown hover-close behavior */
.app-nav__dropdown{position:relative}
.app-nav__dropdown .app-nav__menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    z-index:9999;
    margin-top:6px;
}
.app-nav__dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:10px;
}
.app-nav__dropdown:hover .app-nav__menu,
.app-nav__dropdown:focus-within .app-nav__menu,
.app-nav__dropdown.is-open .app-nav__menu{
    display:grid;
}
.app-nav__dropdown button{display:inline-flex;align-items:center;gap:6px}


/* v18.24 Global no horizontal scrollbar */
html,body,#app,.app-shell,.app-main,.main-content{
    overflow-x:hidden !important;
    max-width:100vw !important;
}


/* v18.25 Landing page menu/function fix */
.landing-section{
    scroll-margin-top:calc(var(--public-header-height, 88px) + 24px);
}
.landing-block{
    width:min(1180px, calc(100vw - 48px));
    margin:0 auto;
    padding:84px 0;
}
.landing-block--soft{
    width:100%;
    max-width:none;
    padding:84px max(24px, calc((100vw - 1180px) / 2));
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}
.landing-section-head{
    max-width:760px;
    margin-bottom:26px;
}
.landing-section-head span,
.landing-contact-card span,
.landing-preview-card__tag{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:#eef6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.landing-section-head h2,
.landing-contact-card h2{
    margin:14px 0 10px;
    font-size:42px;
    line-height:1.16;
    color:#0b1e4b;
    letter-spacing:-.7px;
}
.landing-section-head p,
.landing-contact-card p,
.landing-preview-card p{
    margin:0;
    color:#64748b;
    line-height:1.8;
}
.landing-feature-grid,
.landing-template-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
}
.landing-template-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}
.landing-feature-grid article,
.landing-template-grid article,
.landing-preview-card,
.landing-contact-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:24px;
    padding:24px;
    box-shadow:0 18px 45px rgba(15,23,42,.07);
}
.landing-feature-grid strong,
.landing-template-grid strong,
.landing-preview-card h2{
    display:block;
    color:#0f172a;
    font-size:18px;
    margin-bottom:10px;
}
.landing-feature-grid p,
.landing-template-grid p{
    margin:0;
    color:#64748b;
    line-height:1.65;
}
.template-thumb{
    height:150px;
    border-radius:18px;
    margin-bottom:16px;
    background:linear-gradient(135deg,#f8fafc,#e2e8f0);
    border:1px solid #e2e8f0;
}
.template-thumb--blue{
    background:linear-gradient(135deg,#dbeafe,#93c5fd);
}
.template-thumb--dark{
    background:linear-gradient(135deg,#0f172a,#334155);
}
.landing-preview-card{
    position:relative;
    z-index:2;
}
.landing-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:20px;
}
.landing-mini-grid span{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 12px;
    border-radius:14px;
    background:#f8fafc;
    color:#334155;
    font-weight:800;
    font-size:13px;
}
.landing-contact-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.public-nav-toggle{
    display:none;
    border:1px solid #dbe3ef;
    background:#fff;
    color:#0b1e4b;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    font-weight:900;
}
.public-main-nav a{
    cursor:pointer;
}
@media(max-width:980px){
    .landing-feature-grid,
    .landing-template-grid{
        grid-template-columns:1fr 1fr;
    }
    .landing-contact-card{
        align-items:flex-start;
        flex-direction:column;
    }
}
@media(max-width:720px){
    .public-nav-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
    .public-site-header__inner{
        justify-content:space-between !important;
    }
    .public-brand{
        width:auto !important;
    }
    .public-main-nav{
        display:none !important;
        order:4;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0 !important;
        padding:10px;
        background:#fff;
        border:1px solid #e2e8f0;
        border-radius:18px;
        box-shadow:0 16px 38px rgba(15,23,42,.08);
    }
    .public-main-nav.is-open{
        display:flex !important;
    }
    .public-main-nav a{
        display:flex;
        min-height:44px;
        align-items:center;
        padding:0 14px;
        border-radius:12px;
    }
    .public-main-nav a:hover,
    .public-main-nav a.active{
        background:#f1f5f9;
    }
    .public-main-nav a::after{
        display:none;
    }
    .landing-block,
    .landing-block--soft{
        width:100%;
        padding:56px 18px;
    }
    .landing-feature-grid,
    .landing-template-grid{
        grid-template-columns:1fr;
    }
    .landing-section-head h2,
    .landing-contact-card h2{
        font-size:28px;
    }
    .landing-mini-grid{
        grid-template-columns:1fr;
    }
}


/* v18.33 Landing native anchor fallback */
#hero,#fitur,#template,#kontak{
    scroll-margin-top:calc(var(--public-header-height, 112px) + 26px) !important;
}
body.guest-body{overflow-y:auto !important;}
.app-body.with-public-navbar{overflow:visible !important;}

/* v18.43 - Setting Layout CV & Surat Lamaran identik Python */
.layout-setting-page {
    max-width: 1220px;
    margin: 0 auto;
    padding: 18px;
}
.layout-setting-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.layout-setting-top h1 {
    margin: 0 0 6px;
    font-size: 26px;
    color: #111827;
}
.layout-setting-top p {
    margin: 0;
    color: #6b7280;
    max-width: 760px;
    line-height: 1.45;
}
.layout-tabbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.layout-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    background: #fff;
    font-weight: 700;
}
.layout-tab.active {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 12px 30px rgba(37,99,235,.22);
}
.layout-window-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.layout-window-card {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(15,23,42,.08);
}
.layout-window-card:not(.is-active) {
    opacity: .86;
}
.fake-titlebar {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    font-size: 14px;
}
.fake-close {
    margin-left: auto;
    font-size: 20px;
    color: #374151;
    font-weight: 400;
}
.layout-window-body {
    padding: 26px 26px 20px;
    max-height: calc(100vh - 235px);
    overflow: auto;
    scrollbar-gutter: stable;
}
.layout-window-body h2 {
    margin: 0 0 12px;
    font-size: 24px;
    color: #111827;
    font-weight: 800;
}
.layout-subtitle {
    margin: 0 auto 24px;
    text-align: center;
    color: #64748b;
    line-height: 1.35;
    max-width: 620px;
}
.layout-combo-row {
    display: block;
    margin: 0 0 16px;
    color: #111827;
    font-weight: 600;
}
.layout-combo-row span {
    display: block;
    margin-bottom: 8px;
}
.layout-combo-row select {
    width: 100%;
    min-height: 56px;
    padding: 0 44px 0 12px;
    border: 1px solid #a8a29e;
    background: #deddd9;
    color: #111827;
    border-radius: 0;
    font-size: 15px;
    outline: none;
}
.layout-combo-row select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.layout-combo-row small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-weight: 400;
}
.layout-note {
    margin: 18px 4px 6px;
    color: #64748b;
    text-align: center;
    line-height: 1.35;
}
.full-width {
    width: 100%;
    justify-content: center;
}

.layout-live-status {
    align-self: center;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    margin-left: 4px;
    white-space: nowrap;
}
.layout-live-status[data-state="saving"],
.layout-live-status[data-state="pending"] { color: #2563eb; }
.layout-live-status[data-state="saved"] { color: #047857; }
.layout-live-status[data-state="error"] { color: #dc2626; }
@media (max-width: 980px) {
    .layout-live-status { flex: 1 1 100%; text-align: center; }
}

.layout-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0 0;
    margin-top: 12px;
    background: linear-gradient(to top, #f8fafc 70%, rgba(248,250,252,0));
}

@media (max-width: 980px) {
    .layout-setting-page { padding: 12px; }
    .layout-setting-top { display: block; }
    .layout-tabbar { justify-content: flex-start; margin-top: 12px; }
    .layout-window-grid { grid-template-columns: 1fr; }
    .layout-window-card:not(.is-active) { display: none; }
    .layout-window-body { max-height: none; overflow: visible; padding: 20px 14px; }
    .layout-sticky-actions { flex-wrap: wrap; justify-content: stretch; }
    .layout-sticky-actions .btn { flex: 1 1 160px; }
}

/* v18.46 - CV Builder Python-style accordion + live editor */
.cv-builder-python-shell{
    height:calc(100vh - 74px);
    min-height:720px;
    display:grid;
    grid-template-columns:minmax(420px, 520px) minmax(0, 1fr);
    gap:0;
    background:#d1d5db;
    overflow:hidden;
    border-top:1px solid #cbd5e1;
    color:#111827;
}
.cv-builder-python-shell form{min-width:0;overflow:hidden;background:#f3f4f6;border-right:1px solid #9ca3af;}
.cv-builder-left{height:100%;overflow:auto;padding:0 12px 28px;background:#f3f4f6;scrollbar-width:thin;}
.cv-accordion-section{background:#fff;border:1px solid #e5e7eb;margin:0 0 12px;box-shadow:0 1px 2px rgba(15,23,42,.03);}
.cv-accordion-section.is-open{border-color:#2563eb;box-shadow:0 0 0 1px rgba(37,99,235,.35);}
.cv-section-head{width:100%;min-height:88px;border:0;background:#fff;color:#111827;display:grid;grid-template-columns:26px 40px 1fr auto 34px;align-items:center;gap:10px;padding:18px 18px;text-align:left;cursor:pointer;font:inherit;}
.cv-accordion-section.is-open > .cv-section-head{background:#2563eb;color:#fff;}
.cv-section-head strong{font-size:20px;font-weight:800;line-height:1.15;}
.cv-drag-dot,.cv-card-drag{font-size:30px;line-height:1;color:#9ca3af;letter-spacing:-6px;overflow:hidden;width:18px;}
.cv-accordion-section.is-open .cv-drag-dot{color:#dbeafe;}
.cv-section-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#2563eb;font-size:22px;font-weight:900;}
.cv-section-icon.check{background:#fff;border-radius:6px;color:#2563eb;box-shadow:0 1px 4px rgba(15,23,42,.18);}
.cv-accordion-section.is-open .cv-section-icon:not(.check){color:#fff;}
.cv-count{display:inline-flex;align-items:center;justify-content:center;min-width:82px;min-height:38px;padding:0 12px;background:#dbeafe;color:#2563eb;font-weight:800;font-size:16px;}
.cv-count.danger{background:#ffe4e6;color:#ef4444;}
.cv-accordion-section.is-open .cv-count{background:#60a5fa;color:#fff;}
.cv-chevron{font-size:24px;font-weight:900;text-align:center;color:inherit;}
.cv-section-body{display:none;background:#fff;padding:20px 18px 22px;border-top:1px solid #e5e7eb;}
.cv-accordion-section.is-open .cv-section-body{display:block;}
.cv-wide-btn,.cv-add-card{display:flex;width:100%;min-height:64px;align-items:center;justify-content:center;border:2px solid #111827;background:#fff;color:#64748b;font-size:20px;font-weight:500;margin:0 0 12px;cursor:pointer;text-align:center;}
.cv-wide-btn.primary{background:#2563eb;color:#fff;border-color:#2563eb;font-weight:800;}
.cv-wide-btn:hover,.cv-add-card:hover{background:#eff6ff;color:#2563eb;border-color:#2563eb;}
.cv-wide-btn.primary:hover{background:#1d4ed8;color:#fff;}
.cv-add-card{border:1px solid #e5e7eb;color:#94a3b8;min-height:78px;font-size:20px;}
.cv-help-text{color:#64748b;font-size:16px;line-height:1.55;margin:8px 0 4px;}
.cv-check-row{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:17px;color:#111827;}
.cv-check-row input{width:18px;height:18px;accent-color:#2563eb;}
.cv-item-list{display:grid;gap:14px;}
.cv-list-card{position:relative;min-height:90px;border:1px solid #e5e7eb;background:#f8fafc;display:grid;grid-template-columns:34px minmax(0,1fr) 44px 44px;align-items:center;gap:8px;padding:18px 12px 18px 16px;}
.cv-list-card h3{margin:0 0 4px;font-size:20px;line-height:1.18;font-weight:800;color:#111827;}
.cv-list-card p{margin:0;color:#64748b;font-size:17px;line-height:1.25;}
.cv-card-icon{width:40px;height:40px;border:0;background:transparent;color:#2563eb;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;}
.cv-card-icon:hover{background:#dbeafe;}
.cv-card-icon.delete{color:#64748b;font-size:28px;}
.cv-card-icon.delete:hover{background:#fee2e2;color:#dc2626;}
.cv-builder-actions{display:flex;gap:10px;flex-wrap:wrap;padding:12px 0 0;}
.cv-builder-actions .btn{border-radius:0;min-height:46px;}
.cv-builder-preview-wrap{min-width:0;min-height:0;background:#d1d5db;display:grid;grid-template-rows:68px minmax(0,1fr);}
.cv-preview-toolbar{height:68px;display:flex;align-items:center;gap:18px;background:#e5e7eb;padding:0 26px;border-bottom:1px solid #cbd5e1;white-space:nowrap;}
.cv-preview-toolbar strong{font-size:21px;font-weight:900;}
.cv-toolbar-btn{min-height:44px;padding:0 20px;background:#fff;border:2px solid #111827;color:#64748b;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;}
.cv-toolbar-btn:hover{background:#f8fafc;color:#111827;}
.cv-layout-toolbar-link{font-weight:600;}
#cvRefreshPreview{margin-left:auto;}
.cv-zoom-box{height:44px;background:#fff;display:inline-flex;align-items:center;gap:12px;padding:0 14px;color:#64748b;font-weight:700;}
.cv-zoom-box button{border:0;background:#fff;color:#64748b;font-size:16px;cursor:pointer;}
.cv-page-indicator{color:#64748b;font-weight:800;}
.cv-preview-viewport{overflow:auto;min-width:0;min-height:0;padding:14px;background:#d1d5db;}
.cv-preview-stage{width:900px;transition:transform .12s ease;}
.cv-preview-stage .cv-paper{margin:0;background:#fff;border:0!important;box-shadow:none;}
.cv-builder-python-shell.hide-input-panel{grid-template-columns:0 minmax(0,1fr);}
.cv-builder-python-shell.hide-input-panel form{display:none;}

/* v18.50 - Layout dipindah ke toolbar preview + Hide Input menjadi full preview tanpa crop horizontal */
body.cv-preview-full .app-body.with-navbar{padding:0!important;overflow:hidden!important;background:#d1d5db!important;}
body.cv-preview-full .cv-builder-python-shell{height:calc(100vh - 76px)!important;min-height:0!important;border-top:0!important;}
.cv-builder-python-shell.hide-input-panel{grid-template-columns:minmax(0,1fr)!important;}
.cv-builder-python-shell.hide-input-panel .cv-builder-preview-wrap{width:100%;min-width:0;}
.cv-builder-python-shell.hide-input-panel .cv-preview-toolbar{position:sticky;top:0;z-index:10;}
.cv-builder-python-shell.hide-input-panel .cv-preview-viewport{overflow-x:hidden;overflow-y:auto;padding:16px 14px 32px;scrollbar-gutter:stable;background:#d1d5db;}
.cv-builder-python-shell.hide-input-panel .cv-preview-stage{width:max-content;margin:0 auto;transform-origin:top center!important;}
.cv-builder-python-shell.hide-input-panel .cv-python-export-stage{align-items:center;}
.cv-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999;}
.cv-modal-overlay.is-open{display:flex;}
.cv-modal-card{width:min(760px,100%);max-height:92vh;background:#fff;border-radius:18px;border:1px solid #e5e7eb;box-shadow:0 28px 70px rgba(15,23,42,.28);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;}
.cv-modal-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid #e5e7eb;background:#f8fafc;}
.cv-modal-head h2{margin:0;font-size:22px;}
.cv-modal-close{width:38px;height:38px;border:0;background:transparent;color:#64748b;font-size:30px;cursor:pointer;}
.cv-modal-body{overflow:auto;padding:20px 22px;display:grid;gap:14px;}
.cv-modal-field{display:grid;gap:7px;font-weight:700;color:#111827;}
.cv-modal-field input,.cv-modal-field textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font:inherit;color:#111827;background:#fff;}
.cv-modal-field textarea{resize:vertical;min-height:92px;}
.cv-modal-field.checkbox{display:flex;align-items:center;gap:10px;}
.cv-modal-field.checkbox input{width:18px;height:18px;accent-color:#2563eb;}
.cv-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid #e5e7eb;background:#f8fafc;}
@media (max-width: 1100px){
    .cv-builder-python-shell{height:auto;min-height:0;grid-template-columns:1fr;overflow:visible;}
    .cv-builder-python-shell form{border-right:0;}
    .cv-builder-left{height:auto;max-height:none;overflow:visible;}
    .cv-builder-preview-wrap{min-height:680px;}
    .cv-preview-stage{width:840px;}
    .cv-builder-python-shell.hide-input-panel{grid-template-columns:1fr;}
    .cv-builder-python-shell.hide-input-panel form{display:block;}
}
@media (max-width: 720px){
    .cv-builder-left{padding:0 8px 22px;}
    .cv-section-head{grid-template-columns:18px 30px 1fr auto 24px;min-height:70px;padding:12px 10px;gap:7px;}
    .cv-section-head strong{font-size:16px;}
    .cv-section-icon{width:28px;height:28px;font-size:18px;}
    .cv-count{min-width:66px;min-height:32px;font-size:13px;padding:0 8px;}
    .cv-list-card{grid-template-columns:20px minmax(0,1fr) 34px 34px;padding:13px 8px;}
    .cv-list-card h3{font-size:16px;}
    .cv-list-card p{font-size:14px;}
    .cv-wide-btn,.cv-add-card{font-size:16px;min-height:52px;}
    .cv-preview-toolbar{height:auto;min-height:64px;flex-wrap:wrap;padding:12px;gap:8px;}
    #cvRefreshPreview{margin-left:0;}
    .cv-preview-viewport{padding:14px;}
    .cv-preview-stage{width:794px;}
}

/* v18.50 - halaman layout mengikuti tombol preview aktif: satu panel saja */
.layout-window-grid{grid-template-columns:minmax(0,1fr)!important;max-width:760px;margin:0 auto;}
.layout-window-card:not(.is-active){display:none!important;}
.layout-setting-top{max-width:760px;margin-left:auto;margin-right:auto;}
.layout-sticky-actions{max-width:760px;margin-left:auto;margin-right:auto;}
.cv-builder-python-shell.hide-input-panel .cv-preview-viewport{scrollbar-width:none;}
.cv-builder-python-shell.hide-input-panel .cv-preview-viewport::-webkit-scrollbar{width:0;height:0;}

/* v18.54 - Setting Layout CV/Surat tanpa scrollbar internal */
.layout-setting-page{
    max-width: 980px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.layout-setting-page::-webkit-scrollbar,
.layout-setting-page *::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
.layout-window-card{
    overflow: visible !important;
}
.layout-window-body{
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.layout-window-body::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
.layout-sticky-actions{
    position: static !important;
    background: transparent !important;
    padding-top: 16px !important;
}
html.layout-no-scrollbar,
body.layout-no-scrollbar,
body.layout-no-scrollbar .app-body{
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
html.layout-no-scrollbar::-webkit-scrollbar,
body.layout-no-scrollbar::-webkit-scrollbar,
body.layout-no-scrollbar .app-body::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* v18.55 - Header setelah login dibuat lebih mudah dipahami, lebih besar, dan animasi warna seperti landing page */
.app-header{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    background:
        linear-gradient(180deg, rgba(226,232,240,.98) 0%, rgba(241,245,249,.94) 100%) !important;
    border-bottom:1px solid rgba(148,163,184,.38) !important;
    box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    transition:
        background .42s ease,
        box-shadow .42s ease,
        border-color .42s ease,
        backdrop-filter .42s ease,
        -webkit-backdrop-filter .42s ease,
        transform .42s ease !important;
}
.app-header::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 8% 10%, rgba(149,180,0,.18), transparent 34%),
        radial-gradient(circle at 92% 6%, rgba(11,30,75,.12), transparent 32%),
        linear-gradient(90deg, rgba(226,232,240,.62), rgba(248,250,252,.42));
    opacity:var(--app-header-overlay-opacity, 1);
    transition:opacity .42s ease;
}
.app-header.is-scrolled,
.app-header[data-state="scrolled-white"],
body.workspace-header-scrolled .app-header{
    background:rgba(255,255,255,.98) !important;
    border-bottom-color:rgba(226,232,240,.98) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.12) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}
.app-header.is-scrolled::before,
.app-header[data-state="scrolled-white"]::before,
body.workspace-header-scrolled .app-header::before{
    opacity:0;
}
.app-header__inner{
    max-width:1540px !important;
    min-height:104px !important;
    padding:0 34px !important;
    gap:24px !important;
}
.app-brand{
    min-width:300px !important;
    gap:16px !important;
    color:#0b1e4b !important;
}
.app-brand__mark{
    width:62px !important;
    height:62px !important;
    border-radius:20px !important;
    background:linear-gradient(135deg,#95b400 0%,#d7e36b 100%) !important;
    color:#0b1e4b !important;
    font-size:20px !important;
    box-shadow:0 14px 28px rgba(149,180,0,.20) !important;
    transition:transform .42s ease, box-shadow .42s ease !important;
}
.app-header.is-scrolled .app-brand__mark,
.app-header[data-state="scrolled-white"] .app-brand__mark,
body.workspace-header-scrolled .app-brand__mark{
    transform:scale(.95);
    box-shadow:0 10px 22px rgba(149,180,0,.14) !important;
}
.app-brand__text strong{
    font-size:28px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.4px !important;
}
.app-brand__text small{
    font-size:13px !important;
    max-width:330px !important;
    font-weight:800 !important;
    color:#64748b !important;
}
.app-nav{
    gap:12px !important;
}
.app-nav a,
.app-nav button{
    min-height:48px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    color:#334155 !important;
    font-size:16px !important;
    font-weight:900 !important;
    letter-spacing:.01em !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    transition:background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.app-nav a:hover,
.app-nav button:hover,
.app-nav .active,
.app-nav__dropdown button.active{
    background:#0b1e4b !important;
    color:#ffffff !important;
    transform:translateY(-1px) !important;
    box-shadow:0 12px 24px rgba(11,30,75,.16) !important;
}
.app-nav__menu{
    top:56px !important;
    min-width:292px !important;
    padding:12px !important;
    border-radius:20px !important;
    box-shadow:0 22px 55px rgba(15,23,42,.16) !important;
}
.app-nav__menu a{
    min-height:46px !important;
    justify-content:flex-start !important;
    border-radius:14px !important;
    font-size:15px !important;
}
.app-header__actions{
    gap:10px !important;
}
.app-header__actions .btn.small{
    min-height:46px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    font-size:15px !important;
    font-weight:900 !important;
}
.app-header__actions .btn.small.primary{
    background:#0b1e4b !important;
    border-color:#0b1e4b !important;
    box-shadow:0 10px 20px rgba(11,30,75,.16) !important;
}
.app-header__actions .btn.small.danger{
    background:#dc2626 !important;
    border-color:#dc2626 !important;
}
.user-pill{
    min-height:44px !important;
    padding:0 16px !important;
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    color:#64748b !important;
    font-size:13px !important;
    font-weight:900 !important;
    box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
    transition:background .42s ease, border-color .42s ease !important;
}
.app-header.is-scrolled .user-pill,
.app-header[data-state="scrolled-white"] .user-pill,
body.workspace-header-scrolled .user-pill{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
}
.app-body.with-navbar{
    min-height:calc(100vh - 104px) !important;
}

@media (max-width: 1320px){
    .app-header__inner{
        min-height:110px !important;
        padding:14px 22px !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
    }
    .app-brand{
        width:100% !important;
        justify-content:center !important;
        min-width:0 !important;
    }
    .app-nav{
        width:100% !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
    }
    .app-header__actions{
        width:100% !important;
        justify-content:center !important;
        flex-wrap:wrap !important;
    }
}
@media (max-width: 720px){
    .app-header__inner{
        min-height:96px !important;
        padding:12px 14px !important;
        gap:12px !important;
    }
    .app-brand{
        justify-content:flex-start !important;
    }
    .app-brand__mark{
        width:54px !important;
        height:54px !important;
        border-radius:17px !important;
        font-size:18px !important;
    }
    .app-brand__text strong{
        font-size:23px !important;
    }
    .app-brand__text small{
        font-size:12px !important;
        max-width:230px !important;
    }
    .app-nav{
        justify-content:flex-start !important;
        gap:8px !important;
        overflow-x:auto !important;
        padding-bottom:4px !important;
    }
    .app-nav a,
    .app-nav button{
        min-height:42px !important;
        padding:0 14px !important;
        font-size:14px !important;
        white-space:nowrap !important;
    }
    .app-header__actions{
        justify-content:flex-start !important;
        gap:8px !important;
    }
    .app-header__actions .btn.small,
    .user-pill{
        min-height:40px !important;
        font-size:13px !important;
    }
}


/* V18.57 header setelah login: logo baru, tanpa keterangan versi, tanpa tombol PDF di header */
.app-brand{
    min-width:240px !important;
    gap:14px !important;
    text-decoration:none !important;
}
.app-brand__mark{
    width:62px !important;
    height:62px !important;
    border-radius:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(135deg,#0b1e4b 0%,#2563eb 58%,#95b400 100%) !important;
    color:#ffffff !important;
    box-shadow:0 16px 32px rgba(37,99,235,.20) !important;
    overflow:hidden !important;
}
.app-brand__doc{
    position:relative;
    width:34px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:8px 10px 8px 8px;
    background:#ffffff;
    color:#0b1e4b;
    font-size:13px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.04em;
    box-shadow:0 10px 20px rgba(0,0,0,.16);
}
.app-brand__doc::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:10px;
    height:10px;
    border-radius:0 7px 0 3px;
    background:linear-gradient(135deg,#dbeafe 0%,#93c5fd 100%);
    box-shadow:-1px 1px 0 rgba(15,23,42,.12);
}
.app-brand__doc::after{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    bottom:9px;
    height:2px;
    border-radius:999px;
    background:#95b400;
    box-shadow:0 -6px 0 #bfdbfe;
}
.app-brand__text{
    gap:0 !important;
}
.app-brand__text strong{
    font-size:28px !important;
    line-height:1 !important;
    letter-spacing:-.04em !important;
}
.app-brand__text small{
    display:none !important;
}
.app-header.is-scrolled .app-brand__mark,
.app-header[data-state="scrolled-white"] .app-brand__mark,
body.workspace-header-scrolled .app-brand__mark{
    transform:scale(.96) rotate(-1deg) !important;
    box-shadow:0 12px 24px rgba(37,99,235,.16) !important;
}
.app-header__actions{
    min-width:auto !important;
}
.app-header__actions .btn.small.danger{
    padding:0 22px !important;
}
@media (max-width: 720px){
    .app-brand{
        min-width:0 !important;
    }
    .app-brand__mark{
        width:52px !important;
        height:52px !important;
        border-radius:18px !important;
    }
    .app-brand__doc{
        width:30px;
        height:36px;
        font-size:12px;
    }
    .app-brand__text strong{
        font-size:23px !important;
    }
}

/* V18.58 Traffic Admin: visitor, login, input, user database */
.admin-only-link{
    background:linear-gradient(135deg,#fee2e2 0%,#fff7ed 100%) !important;
    color:#991b1b !important;
    border-color:rgba(248,113,113,.45) !important;
}
.admin-only-link.active,
.admin-only-link:hover{
    background:linear-gradient(135deg,#dc2626 0%,#f97316 100%) !important;
    color:#ffffff !important;
    box-shadow:0 16px 34px rgba(220,38,38,.22) !important;
}
.traffic-page{
    max-width:1500px;
    margin:0 auto;
    padding:22px 22px 54px;
}
.traffic-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:28px;
    border-radius:34px;
    background:
        radial-gradient(circle at 10% 0%,rgba(37,99,235,.20),transparent 30%),
        linear-gradient(135deg,#f8fafc 0%,#e0f2fe 54%,#fff7ed 100%);
    border:1px solid rgba(148,163,184,.28);
    box-shadow:0 24px 58px rgba(15,23,42,.12);
    margin-bottom:18px;
}
.traffic-kicker{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    background:#111827;
    color:#ffffff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.traffic-hero h1{
    margin:0;
    font-size:38px;
    line-height:1;
    letter-spacing:-.05em;
    color:#0f172a;
}
.traffic-hero p{
    margin:12px 0 0;
    max-width:760px;
    color:#475569;
    font-size:16px;
    line-height:1.6;
}
.traffic-hero__badge{
    min-width:210px;
    padding:18px;
    border-radius:26px;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(148,163,184,.35);
    box-shadow:0 18px 38px rgba(15,23,42,.10);
}
.traffic-hero__badge strong{
    display:block;
    color:#1d4ed8;
    font-size:20px;
    margin-bottom:4px;
}
.traffic-hero__badge span{
    color:#64748b;
    font-size:13px;
    line-height:1.4;
}
.traffic-alert{
    padding:14px 18px;
    border-radius:20px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    margin-bottom:18px;
    line-height:1.55;
}
.traffic-stat-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}
.traffic-stat{
    padding:18px;
    border-radius:24px;
    background:#ffffff;
    border:1px solid rgba(226,232,240,.95);
    box-shadow:0 16px 38px rgba(15,23,42,.07);
}
.traffic-stat span{
    display:block;
    font-size:12px;
    font-weight:800;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:8px;
}
.traffic-stat strong{
    display:block;
    color:#0f172a;
    font-size:29px;
    line-height:1;
    letter-spacing:-.05em;
}
.traffic-two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}
.traffic-card{
    background:#ffffff;
    border:1px solid rgba(226,232,240,.95);
    border-radius:28px;
    padding:22px;
    box-shadow:0 18px 44px rgba(15,23,42,.08);
    margin-bottom:18px;
}
.traffic-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.traffic-card h2{
    margin:0;
    font-size:22px;
    color:#0f172a;
    letter-spacing:-.03em;
}
.traffic-card p{
    margin:6px 0 0;
    color:#64748b;
    line-height:1.5;
}
.traffic-mini-list{
    display:grid;
    gap:9px;
}
.traffic-mini-list div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}
.traffic-mini-list span{
    color:#334155;
    font-weight:800;
    overflow-wrap:anywhere;
}
.traffic-mini-list strong{
    color:#1d4ed8;
    font-size:16px;
}
.traffic-table-wrap{
    width:100%;
}
.traffic-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
    table-layout:auto;
}
.traffic-table th{
    text-align:left;
    padding:8px 10px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#64748b;
}
.traffic-table td{
    padding:12px 10px;
    background:#f8fafc;
    border-top:1px solid #e2e8f0;
    border-bottom:1px solid #e2e8f0;
    color:#1f2937;
    vertical-align:top;
    font-size:13px;
    line-height:1.45;
    overflow-wrap:anywhere;
}
.traffic-table td:first-child{
    border-left:1px solid #e2e8f0;
    border-radius:15px 0 0 15px;
}
.traffic-table td:last-child{
    border-right:1px solid #e2e8f0;
    border-radius:0 15px 15px 0;
}
.traffic-pill,
.traffic-ok,
.traffic-bad{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}
.traffic-pill{background:#dbeafe;color:#1d4ed8;}
.traffic-ok{background:#dcfce7;color:#166534;}
.traffic-bad{background:#fee2e2;color:#991b1b;}
.traffic-muted-cell{color:#64748b;font-size:12px;}
.traffic-ua{
    max-width:360px;
    color:#64748b !important;
    font-size:12px !important;
}
.traffic-danger-btn,
.traffic-light-btn{
    border:0;
    border-radius:14px;
    padding:9px 13px;
    font-weight:900;
    cursor:pointer;
    transition:.2s ease;
}
.traffic-danger-btn{
    background:#fee2e2;
    color:#991b1b;
}
.traffic-danger-btn:hover{
    background:#dc2626;
    color:#ffffff;
    transform:translateY(-1px);
}
.traffic-light-btn{
    background:#eff6ff;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
}
.traffic-light-btn:hover{
    background:#2563eb;
    color:#ffffff;
}
.traffic-input-list{
    display:grid;
    gap:12px;
}
.traffic-input-item{
    border:1px solid #e2e8f0;
    border-radius:18px;
    background:#f8fafc;
    overflow:hidden;
}
.traffic-input-item summary{
    cursor:pointer;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    color:#0f172a;
}
.traffic-input-item summary strong{
    color:#1d4ed8;
    overflow-wrap:anywhere;
}
.traffic-input-item summary span{
    color:#64748b;
    font-size:13px;
    overflow-wrap:anywhere;
}
.traffic-input-detail{
    padding:0 16px 16px;
    color:#334155;
}
.traffic-input-detail pre{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    padding:12px;
    background:#0f172a;
    color:#dbeafe;
    border-radius:14px;
    font-size:12px;
    line-height:1.5;
}
.traffic-empty{
    padding:18px;
    text-align:center;
    color:#94a3b8;
    font-weight:800;
}
@media (max-width: 1200px){
    .traffic-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .traffic-two-col{grid-template-columns:1fr;}
}
@media (max-width: 820px){
    .traffic-page{padding:14px 10px 40px;}
    .traffic-hero{display:block;padding:22px;border-radius:26px;}
    .traffic-hero h1{font-size:30px;}
    .traffic-hero__badge{margin-top:16px;min-width:0;}
    .traffic-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .traffic-card{padding:16px;border-radius:22px;}
    .traffic-card__head{display:block;}
    .traffic-card__head form{margin-top:12px;}
    .traffic-input-item summary{grid-template-columns:1fr;gap:6px;}
    .traffic-table th:nth-child(n+6),
    .traffic-table td:nth-child(n+6){display:none;}
}
@media (max-width: 520px){
    .traffic-stat-grid{grid-template-columns:1fr;}
}

/* v18.59 - Landing KarirRapi Plus showcase box + clickable design slider */
.landing-plus-showcase{
    position:relative;
    width:min(520px,100%);
    min-height:610px;
    padding:22px;
    border-radius:34px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(248,250,252,.96) 100%);
    border:2px solid rgba(37,99,235,.18);
    box-shadow:
        0 32px 70px rgba(15,23,42,.16),
        inset 0 0 0 1px rgba(255,255,255,.82);
    overflow:hidden;
    cursor:pointer;
    isolation:isolate;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.landing-plus-showcase:hover{
    transform:translateY(-8px);
    border-color:rgba(149,180,0,.45);
    box-shadow:0 42px 88px rgba(15,23,42,.20);
}
.landing-plus-showcase__border-glow{
    position:absolute;
    inset:-2px;
    z-index:-1;
    background:
        radial-gradient(circle at 16% 12%,rgba(149,180,0,.25),transparent 32%),
        radial-gradient(circle at 90% 22%,rgba(37,99,235,.18),transparent 30%),
        radial-gradient(circle at 56% 100%,rgba(236,72,153,.12),transparent 35%);
    filter:blur(2px);
    animation:landingPlusGlow 8s ease-in-out infinite;
}
.landing-plus-showcase__head{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}
.landing-plus-showcase__hint{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:#eef2ff;
    color:#1d4ed8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
    white-space:nowrap;
}
.landing-plus-slides{
    position:relative;
    min-height:458px;
    border-radius:28px;
    background:
        linear-gradient(135deg,rgba(241,245,249,.95),rgba(255,255,255,.95));
    border:1px solid rgba(226,232,240,.92);
    overflow:hidden;
}
.landing-plus-slide{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-rows:1fr auto;
    gap:18px;
    padding:24px;
    opacity:0;
    transform:translateX(24px) scale(.985);
    pointer-events:none;
    transition:opacity .36s ease, transform .36s ease;
}
.landing-plus-slide.is-active{
    opacity:1;
    transform:translateX(0) scale(1);
    pointer-events:auto;
}
.landing-plus-slide__text{
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(226,232,240,.95);
    box-shadow:0 16px 28px rgba(15,23,42,.08);
}
.landing-plus-slide__text strong{
    display:block;
    color:#0b1e4b;
    font-size:24px;
    line-height:1.16;
    margin-bottom:8px;
}
.landing-plus-slide__text span{
    display:block;
    color:#475569;
    font-size:14px;
    line-height:1.65;
    font-weight:650;
}
.landing-doc-model{
    position:relative;
    width:min(300px,82%);
    height:330px;
    margin:0 auto;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(203,213,225,.95);
    box-shadow:0 24px 46px rgba(15,23,42,.15);
    overflow:hidden;
    transform:rotate(-1.2deg);
}
.landing-doc-model::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0),rgba(255,255,255,.42));
    pointer-events:none;
}
.doc-model__top{height:46px;background:#0b1e4b}
.doc-model__name{position:absolute;left:28px;right:28px;top:68px;height:18px;border-radius:999px;background:#0f172a}
.doc-model__line{height:9px;border-radius:999px;background:#cbd5e1;margin:0 auto 9px;width:56%}
.doc-model__line.wide{width:74%}
.doc-model__section{position:absolute;left:28px;right:28px;top:126px;height:10px;border-radius:999px;background:#95b400}
.doc-model__section.small{top:222px;width:44%;right:auto}
.doc-model__row{position:relative;top:106px;height:9px;border-radius:999px;background:#e2e8f0;margin:13px 28px 0}
.doc-model__row.short{width:58%}
.doc-model__sidebar{position:absolute;inset:0 auto 0 0;width:78px;background:#14213d}
.doc-model__avatar{position:absolute;left:24px;top:28px;width:48px;height:48px;border-radius:50%;background:#d4aa2a;border:4px solid #fff}
.landing-doc-model--cv-gold{transform:rotate(1.4deg)}
.landing-doc-model--cv-gold .doc-model__name{left:102px;top:34px;background:#14213d}
.landing-doc-model--cv-gold .doc-model__line{position:relative;top:92px;margin-left:104px;margin-right:28px;background:#e6d3a1}
.landing-doc-model--cv-gold .doc-model__section{left:102px;top:132px;background:#d4aa2a}
.landing-doc-model--cv-gold .doc-model__row{top:134px;margin-left:102px;background:#e5e7eb}
.landing-doc-model--letter-blue{transform:rotate(-.6deg)}
.doc-model__letter-head{height:52px;background:linear-gradient(90deg,#0b3a75 0%,#2563eb 100%)}
.doc-model__paragraph{height:54px;margin:18px 26px 0;border-radius:10px;background:repeating-linear-gradient(180deg,#e2e8f0 0 8px,transparent 8px 16px)}
.doc-model__paragraph.short{width:70%}
.doc-model__signature{position:absolute;right:28px;bottom:30px;width:88px;height:28px;border-radius:999px;border-bottom:4px solid #0b3a75}
.landing-doc-model--letter-red .doc-model__letter-head{background:linear-gradient(90deg,#7f1d1d,#dc2626)}
.landing-doc-model--letter-red .doc-model__signature{border-bottom-color:#dc2626}
.doc-model__stamp{position:absolute;right:24px;top:78px;width:58px;height:58px;border-radius:50%;border:5px solid rgba(220,38,38,.35);z-index:2;transform:rotate(-12deg)}
.landing-doc-model--bundle{background:transparent;border:0;box-shadow:none;overflow:visible;transform:none}
.doc-stack{position:absolute;width:210px;height:286px;left:50%;top:50%;border-radius:18px;background:#fff;border:1px solid rgba(203,213,225,.95);box-shadow:0 22px 42px rgba(15,23,42,.14)}
.doc-stack::before{content:"";position:absolute;left:22px;right:22px;top:68px;height:14px;border-radius:999px;background:#0b1e4b}
.doc-stack::after{content:"";position:absolute;left:22px;right:42px;top:110px;height:90px;border-radius:14px;background:repeating-linear-gradient(180deg,#e2e8f0 0 8px,transparent 8px 17px)}
.doc-stack--one{transform:translate(-68%,-52%) rotate(-9deg);background:linear-gradient(180deg,#fff,#f8fafc)}
.doc-stack--two{transform:translate(-50%,-50%) rotate(0);background:linear-gradient(180deg,#fff,#eef2ff)}
.doc-stack--two::before{background:#2563eb}
.doc-stack--three{transform:translate(-30%,-48%) rotate(9deg);background:linear-gradient(180deg,#fff,#fef3c7)}
.doc-stack--three::before{background:#d4aa2a}
.landing-plus-showcase__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:18px;
}
.landing-plus-dots{
    display:flex;
    align-items:center;
    gap:8px;
}
.landing-plus-dots button{
    width:10px;
    height:10px;
    padding:0;
    border-radius:999px;
    border:0;
    background:#cbd5e1;
    cursor:pointer;
    transition:width .22s ease, background .22s ease;
}
.landing-plus-dots button.is-active{
    width:32px;
    background:#95b400;
}
.landing-plus-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
    background:#0b1e4b;
    color:#fff;
    font-weight:900;
    box-shadow:0 12px 26px rgba(11,30,75,.20);
}
.landing-plus-cta:hover{background:#102756;color:#fff}
@keyframes landingPlusGlow{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(2%, -1%,0) scale(1.04)}
}
@media(max-width:1180px){
    .landing-plus-showcase{width:min(640px,100%);min-height:570px}
    .landing-plus-slides{min-height:420px}
}
@media(max-width:720px){
    .landing-plus-showcase{min-height:540px;padding:16px;border-radius:28px}
    .landing-plus-showcase__head{align-items:flex-start;flex-direction:column}
    .landing-plus-showcase__hint{white-space:normal}
    .landing-plus-slides{min-height:402px;border-radius:22px}
    .landing-plus-slide{padding:16px}
    .landing-doc-model{height:270px;width:min(236px,88%)}
    .landing-plus-slide__text strong{font-size:20px}
    .landing-plus-showcase__footer{align-items:flex-start;flex-direction:column}
    .landing-plus-cta{width:100%}
}

/* v18.60 - Landing pricing, legal footer, and KarirRapi Plus tools gate */
.landing-pricing-head{max-width:860px;text-align:center;margin-left:auto;margin-right:auto}
.landing-pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;margin-top:28px}
.landing-price-card{position:relative;overflow:hidden;background:#fff;border:1px solid #e2e8f0;border-radius:30px;padding:30px;box-shadow:0 22px 58px rgba(15,23,42,.09);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.landing-price-card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,#c1121f 0%,#e11d48 58%,#facc15 78%,#16a34a 100%)!important;opacity:.98}
.landing-price-card:hover{transform:translateY(-8px);border-color:rgba(37,99,235,.35);box-shadow:0 36px 74px rgba(15,23,42,.14)}
.landing-price-card--plus{border:2px solid rgba(149,180,0,.38);background:linear-gradient(180deg,#ffffff 0%,#fbfff1 100%)}
.landing-price-card--plus::before{height:10px;background:linear-gradient(90deg,#c1121f 0%,#e11d48 60%,#facc15 80%,#16a34a 100%)!important}
.landing-price-card.landing-price-card--single::before,.landing-price-card.landing-price-card--token::before,.landing-price-card.landing-price-card--plus::before{background:linear-gradient(90deg,#c1121f 0%,#e11d48 60%,#facc15 80%,#16a34a 100%)!important}
.landing-price-card__badge{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;background:#eef6ff;color:#1d4ed8;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.landing-price-card--plus .landing-price-card__badge{background:#ecfccb;color:#3f6212}
.landing-price-card h3{margin:0 0 10px;color:#0b1e4b;font-size:34px;line-height:1.08;letter-spacing:-.6px}
.landing-price-card__price{font-size:42px;line-height:1;font-weight:950;color:#0f172a;margin:0 0 16px;letter-spacing:-1px}
.landing-price-card__price span{font-size:16px;font-weight:850;color:#64748b;letter-spacing:0}
.landing-price-card p{margin:0 0 18px;color:#475569;line-height:1.75;font-weight:650}
.landing-price-card ul{display:grid;gap:10px;margin:0 0 24px;padding:0;list-style:none;color:#334155;font-weight:750;line-height:1.55}
.landing-price-card li{position:relative;padding-left:30px}
.landing-price-card li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:999px;background:#dcfce7;color:#166534;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:950}
.landing-price-card__cta{width:100%;justify-content:center}
.landing-pricing-note{margin:22px auto 0;padding:16px 18px;border-radius:20px;background:#0b1e4b;color:#eaf2ff;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 42px rgba(11,30,75,.18);line-height:1.65;text-align:center;font-weight:750}
.landing-pricing-note strong{color:#fff}
.app-nav__dropdown--locked button{background:#fff7ed!important;color:#9a3412!important;border-color:#fed7aa!important}
.app-nav__menu--locked{min-width:250px;padding:14px!important;gap:10px!important}
.locked-tools-note{display:block;color:#475569;font-size:13px;font-weight:850;line-height:1.55;padding:10px 12px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa}
.site-footer{position:relative;background:#071225;color:#cbd5e1;border-top:1px solid rgba(148,163,184,.2);padding:28px max(20px,calc((100vw - 1180px)/2));overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 0,rgba(37,99,235,.18),transparent 30%),radial-gradient(circle at 88% 20%,rgba(149,180,0,.14),transparent 28%);pointer-events:none}
.site-footer__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(280px,1.4fr) auto;gap:22px;align-items:center;width:min(1180px,100%);margin:0 auto}
.site-footer__brand strong{display:block;color:#fff;font-size:20px;margin-bottom:6px}
.site-footer__brand span,.site-footer__legal span{display:block;color:#94a3b8;font-size:13px;line-height:1.65;font-weight:650}
.site-footer__legal span:first-child{color:#e2e8f0;font-weight:850}
.site-footer__links{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.site-footer__links a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#e2e8f0;font-size:13px;font-weight:850;text-decoration:none}
.site-footer__links a:hover{background:rgba(255,255,255,.12);color:#fff}
.traffic-pill--plus{background:#ecfccb!important;color:#3f6212!important;border-color:#bef264!important}
.traffic-pill--free{background:#f1f5f9!important;color:#475569!important;border-color:#cbd5e1!important}
.traffic-plan-note{display:block;margin-top:6px;color:#64748b;font-size:11px;line-height:1.35;font-weight:800}
.traffic-user-actions{display:grid;gap:8px;min-width:150px}
.traffic-user-actions form{margin:0}.traffic-user-actions button{width:100%;white-space:nowrap}
@media(max-width:900px){.landing-pricing-grid{grid-template-columns:1fr}.site-footer__inner{grid-template-columns:1fr;text-align:center}.site-footer__links{justify-content:center}.landing-price-card h3{font-size:30px}.landing-price-card__price{font-size:36px}}
@media(max-width:560px){.landing-price-card{padding:22px;border-radius:24px}.landing-pricing-note{text-align:left}.site-footer{padding:26px 18px}.site-footer__links a{width:100%;justify-content:center}}
.dashboard-plan-card{background:linear-gradient(135deg,#0b1e4b,#1d4ed8)!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important}
.dashboard-plan-card span,.dashboard-plan-card small{color:#dbeafe!important}.dashboard-plan-card strong{color:#fff!important}

/* v18.61 - KarirRapi Assistant first-login wizard + admin-only builder menu polish */
.ats-assistant-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;font-family:Segoe UI,Arial,sans-serif}
.ats-assistant-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(10px)}
.ats-assistant-modal__card{position:relative;width:min(620px,100%);background:linear-gradient(145deg,#fff,#f8fafc);border:1px solid rgba(148,163,184,.55);box-shadow:0 32px 90px rgba(15,23,42,.38);border-radius:30px;padding:34px;overflow:hidden}
.ats-assistant-modal__card:before{content:"";position:absolute;inset:-80px -90px auto auto;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle,rgba(37,99,235,.22),rgba(37,99,235,0) 68%)}
.ats-assistant-modal__badge,.assistant-kicker{display:inline-flex;align-items:center;gap:8px;background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.ats-assistant-modal h2{margin:16px 0 10px;color:#0f172a;font-size:32px;line-height:1.08;font-weight:900}
.ats-assistant-modal p{margin:0;color:#475569;font-size:16px;line-height:1.65}
.ats-assistant-modal__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}
.ats-assistant-modal__steps span{background:#eff6ff;border:1px solid #dbeafe;color:#1e3a8a;border-radius:16px;padding:12px;font-weight:800;font-size:14px}
.ats-assistant-modal__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.ats-assistant-modal small{display:block;margin-top:16px;color:#64748b}
.assistant-wizard-page{max-width:1240px;margin:0 auto;padding:32px 20px 70px;color:#0f172a}.assistant-wizard-hero{position:relative;border:1px solid #dbeafe;border-radius:34px;padding:34px;background:linear-gradient(135deg,#eff6ff 0%,#ffffff 45%,#f8fafc 100%);box-shadow:0 24px 70px rgba(15,23,42,.08);overflow:hidden}.assistant-wizard-hero:after{content:"";position:absolute;right:-80px;top:-90px;width:260px;height:260px;border-radius:999px;background:radial-gradient(circle,rgba(37,99,235,.18),rgba(37,99,235,0) 70%)}
.assistant-wizard-hero h1{position:relative;margin:18px 0 12px;font-size:42px;line-height:1.05;font-weight:950;letter-spacing:-.04em}.assistant-wizard-hero p{position:relative;max-width:760px;color:#475569;font-size:17px;line-height:1.7}.assistant-skip-link{position:relative;display:inline-flex;margin-top:18px;color:#475569;font-weight:900;text-decoration:none;border-bottom:2px solid #cbd5e1}.assistant-skip-link:hover{color:#1d4ed8;border-color:#1d4ed8}
.assistant-progress{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.assistant-progress span{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:999px;padding:0 16px;background:#fff;border:1px solid #e2e8f0;color:#64748b;font-weight:900}.assistant-progress span.active{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 12px 28px rgba(37,99,235,.22)}
.assistant-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.assistant-choice-card{position:relative;min-height:280px;padding:28px;border-radius:30px;border:1px solid #e2e8f0;background:#fff;text-decoration:none;color:#0f172a;box-shadow:0 18px 50px rgba(15,23,42,.08);overflow:hidden;transition:.22s ease}.assistant-choice-card:hover{transform:translateY(-5px);box-shadow:0 28px 70px rgba(15,23,42,.14)}.assistant-choice-card:after{content:"";position:absolute;right:-50px;bottom:-70px;width:190px;height:190px;border-radius:999px;background:var(--assistant-glow,rgba(37,99,235,.16))}.assistant-choice-card--cv{--assistant-glow:rgba(37,99,235,.16)}.assistant-choice-card--letter{--assistant-glow:rgba(225,29,72,.14)}.assistant-choice-icon{display:inline-flex;width:72px;height:72px;align-items:center;justify-content:center;border-radius:24px;background:#2563eb;color:#fff;font-size:26px;font-weight:950;box-shadow:0 16px 35px rgba(37,99,235,.25)}.assistant-choice-card--letter .assistant-choice-icon{background:#e11d48}.assistant-choice-card strong{display:block;margin:22px 0 10px;font-size:30px;font-weight:950}.assistant-choice-card p{max-width:420px;color:#475569;font-size:16px;line-height:1.65}.assistant-choice-card em{display:inline-flex;margin-top:16px;font-style:normal;font-weight:950;color:#1d4ed8}.assistant-choice-card--letter em{color:#be123c}
.assistant-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:28px 0 18px}.assistant-section-head h2{margin:0 0 6px;font-size:30px;font-weight:950}.assistant-section-head p{margin:0;color:#64748b;font-size:16px;line-height:1.55}.assistant-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.assistant-template-card{display:block;min-height:210px;padding:18px;border:1px solid #e2e8f0;background:#fff;border-radius:24px;text-decoration:none;color:#0f172a;box-shadow:0 12px 36px rgba(15,23,42,.07);transition:.2s ease}.assistant-template-card:hover{transform:translateY(-4px);border-color:var(--accent,#2563eb);box-shadow:0 18px 48px rgba(15,23,42,.12)}.assistant-template-thumb{display:block;height:120px;border-radius:18px;background:linear-gradient(90deg,var(--accent,#2563eb) 0 24%,#fff 24%);border:1px solid #e2e8f0;box-shadow:inset 0 0 0 7px #f8fafc;margin-bottom:14px;padding:16px 14px 12px 70px}.assistant-template-thumb b,.assistant-template-thumb em,.assistant-template-thumb strong,.assistant-template-thumb i{display:block;border-radius:999px;background:#cbd5e1;height:6px;margin:6px 0}.assistant-template-thumb b{height:10px;background:#0f172a;width:70%}.assistant-template-thumb strong{width:42%;background:var(--accent,#2563eb)}.assistant-template-thumb i{width:86%}.assistant-template-card>strong{display:block;font-size:17px;line-height:1.25;font-weight:950}.assistant-template-card small{display:inline-flex;margin-top:8px;border-radius:999px;background:#f1f5f9;color:#475569;padding:5px 9px;font-weight:800}.assistant-letter-icon{display:inline-flex;width:58px;height:58px;border-radius:20px;background:var(--accent,#2563eb);color:#fff;align-items:center;justify-content:center;font-size:24px;font-weight:900;margin-bottom:16px}.assistant-template-card p{color:#64748b;line-height:1.55}.assistant-data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.assistant-data-card{display:block;padding:22px;border:1px solid #e2e8f0;background:#fff;border-radius:24px;color:#0f172a;text-decoration:none;box-shadow:0 12px 36px rgba(15,23,42,.07)}.assistant-data-card:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(15,23,42,.12);border-color:#2563eb}.assistant-data-card span{display:inline-flex;border-radius:999px;background:#dbeafe;color:#1d4ed8;padding:5px 10px;font-size:12px;font-weight:900;text-transform:uppercase}.assistant-data-card strong{display:block;margin:14px 0 12px;font-size:20px;line-height:1.2}.assistant-data-card em{font-style:normal;color:#1d4ed8;font-weight:900}.assistant-empty-state,.assistant-export-card{padding:32px;border:1px solid #e2e8f0;border-radius:28px;background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.08)}.assistant-export-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.assistant-editor-guide{margin:12px 0 14px;padding:18px;border:1px solid #bfdbfe;border-radius:20px;background:linear-gradient(135deg,#eff6ff,#ffffff);box-shadow:0 12px 32px rgba(37,99,235,.1)}.assistant-editor-guide span{display:inline-flex;color:#1d4ed8;font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.assistant-editor-guide h2{margin:8px 0 6px;font-size:20px;line-height:1.15;color:#0f172a}.assistant-editor-guide p{margin:0 0 12px;color:#475569;line-height:1.5}.assistant-editor-guide div{display:flex;gap:8px;flex-wrap:wrap}.assistant-editor-guide--letter{margin:0 0 16px}
@media (max-width:860px){.assistant-choice-grid{grid-template-columns:1fr}.assistant-section-head{display:block}.assistant-wizard-hero h1{font-size:32px}.ats-assistant-modal__card{padding:24px}.ats-assistant-modal__steps{grid-template-columns:1fr}}

/* v18.62 - Payment / KarirRapi Plus gate popup for Tools and PDF export */
.app-nav__locked-tools{display:flex;align-items:center}
.locked-tools-trigger{min-height:46px;border:1px solid #fed7aa!important;background:linear-gradient(135deg,#fff7ed,#fffbeb)!important;color:#9a3412!important;border-radius:999px;padding:0 18px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(251,146,60,.12);transition:.2s ease}
.locked-tools-trigger:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(251,146,60,.22);border-color:#fb923c!important}
.ats-payment-modal{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:24px;font-family:Segoe UI,Arial,sans-serif}
.ats-payment-modal.is-open{display:flex}
.ats-payment-modal-open{overflow:hidden}
.ats-payment-modal__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ats-payment-modal__card{position:relative;width:min(920px,100%);max-height:min(92vh,760px);overflow:auto;background:linear-gradient(145deg,#ffffff 0%,#f8fafc 52%,#fff7ed 100%);border:1px solid rgba(226,232,240,.95);border-radius:34px;box-shadow:0 40px 110px rgba(2,6,23,.42)}
.ats-payment-modal__close{position:absolute;right:18px;top:16px;z-index:3;width:42px;height:42px;border:0;border-radius:999px;background:#fff;color:#64748b;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 10px 25px rgba(15,23,42,.12)}
.ats-payment-modal__close:hover{background:#fee2e2;color:#991b1b}
.ats-payment-modal__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:24px;padding:34px}
.ats-payment-modal__content{display:grid;align-content:start;gap:14px;padding-right:8px}
.ats-payment-modal__badge{display:inline-flex;width:max-content;align-items:center;gap:8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;padding:8px 13px;font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.ats-payment-modal h2{margin:0;color:#0f172a;font-size:36px;line-height:1.05;font-weight:950;letter-spacing:-.04em}
.ats-payment-modal p{margin:0;color:#475569;font-size:16px;line-height:1.72;font-weight:650}
.ats-payment-price{display:inline-flex;width:max-content;border-radius:20px;background:#0b1e4b;color:#fff;padding:12px 16px;font-size:24px;font-weight:950;box-shadow:0 16px 34px rgba(11,30,75,.22)}
.ats-payment-features{display:grid;gap:9px;margin:2px 0 0;padding:0;list-style:none;color:#334155;font-weight:800;line-height:1.45}
.ats-payment-features li{position:relative;padding-left:30px}
.ats-payment-features li:before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:999px;background:#dcfce7;color:#166534;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:950}
.ats-payment-modal__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.ats-payment-modal__actions .btn{min-height:44px}.ats-payment-modal .is-hidden{display:none!important}.ats-payment-modal small{color:#64748b;font-weight:750;line-height:1.5}
.ats-payment-qr-panel{display:grid;justify-items:center;align-content:start;gap:12px;border-radius:28px;background:linear-gradient(180deg,#0b1e4b,#111827);color:#fff;padding:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 55px rgba(15,23,42,.22);text-align:center;overflow:hidden}
.ats-payment-qr-panel span{font-size:14px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#bfdbfe}.ats-payment-qr-panel p{font-size:13px;color:#dbeafe;line-height:1.55}.ats-payment-qr-panel strong{font-size:20px;letter-spacing:.02em}
.ats-payment-qr{width:198px;height:198px;background:#fff;border-radius:22px;padding:18px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:7px;box-shadow:0 18px 46px rgba(0,0,0,.25)}
.ats-payment-qr i{display:block;border-radius:7px;background:#0f172a}.ats-payment-qr i:nth-child(1),.ats-payment-qr i:nth-child(2),.ats-payment-qr i:nth-child(3),.ats-payment-qr i:nth-child(6),.ats-payment-qr i:nth-child(11),.ats-payment-qr i:nth-child(16),.ats-payment-qr i:nth-child(21),.ats-payment-qr i:nth-child(22),.ats-payment-qr i:nth-child(23),.ats-payment-qr i:nth-child(5),.ats-payment-qr i:nth-child(10),.ats-payment-qr i:nth-child(15),.ats-payment-qr i:nth-child(20),.ats-payment-qr i:nth-child(25){background:#0b1e4b}.ats-payment-qr i:nth-child(8),.ats-payment-qr i:nth-child(13),.ats-payment-qr i:nth-child(18),.ats-payment-qr i:nth-child(19),.ats-payment-qr i:nth-child(24){background:#95b400}.ats-payment-qr i:nth-child(4),.ats-payment-qr i:nth-child(7),.ats-payment-qr i:nth-child(14){background:#e2e8f0}
@media(max-width:820px){.ats-payment-modal{padding:14px}.ats-payment-modal__grid{grid-template-columns:1fr;padding:24px}.ats-payment-modal h2{font-size:30px}.ats-payment-price{font-size:20px}.ats-payment-qr{width:174px;height:174px}.locked-tools-trigger{width:100%;justify-content:center}}

/* v18.63: Traffic billing + KarirRapi Plus expiration reminder */
.traffic-stat--plus{background:linear-gradient(135deg,#ecfccb,#ffffff)!important;border-color:#bef264!important}
.traffic-stat--warn{background:linear-gradient(135deg,#fff7ed,#ffffff)!important;border-color:#fed7aa!important}
.traffic-card--wide{overflow:hidden}.traffic-table-wrap--wide{overflow-x:auto}.traffic-table--user-billing{min-width:1320px}
.traffic-user-subline{display:block;margin-top:4px;color:#64748b;font-size:11px;font-weight:800;line-height:1.35}.traffic-pill--expired{background:#ffedd5!important;color:#9a3412!important;border-color:#fdba74!important}
.traffic-billing-box,.traffic-due-box{display:grid;gap:4px;min-width:170px;color:#475569;font-size:12px;font-weight:750;line-height:1.35}.traffic-billing-box b,.traffic-due-box b{color:#0f172a}.traffic-billing-box strong{color:#166534}.traffic-mini-list--history div{align-items:flex-start}.traffic-mini-list--history small{display:block;margin-top:4px;color:#64748b;font-size:11px;line-height:1.35}.traffic-mini-list--history strong{white-space:nowrap}.traffic-card__head form{margin:0}
.ats-expired-modal{position:fixed;inset:0;z-index:10060;display:none;align-items:center;justify-content:center;padding:24px;font-family:Segoe UI,Arial,sans-serif}.ats-expired-modal.is-open{display:flex}.ats-expired-modal-open{overflow:hidden}.ats-expired-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.ats-expired-modal__card{position:relative;width:min(620px,100%);border-radius:34px;background:linear-gradient(145deg,#ffffff,#fff7ed 62%,#eff6ff);border:1px solid rgba(251,146,60,.45);box-shadow:0 42px 120px rgba(15,23,42,.42);padding:34px;display:grid;gap:14px}.ats-expired-modal__close{position:absolute;right:16px;top:14px;width:42px;height:42px;border:0;border-radius:999px;background:#fff;color:#64748b;font-size:30px;line-height:1;box-shadow:0 12px 26px rgba(15,23,42,.14);cursor:pointer}.ats-expired-modal__close:hover{background:#fee2e2;color:#991b1b}.ats-expired-modal__badge{width:max-content;border-radius:999px;background:#ffedd5;color:#9a3412;border:1px solid #fdba74;padding:8px 13px;font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.ats-expired-modal h2{margin:0;color:#0f172a;font-size:34px;line-height:1.08;font-weight:950;letter-spacing:-.04em}.ats-expired-modal p{margin:0;color:#475569;font-weight:700;line-height:1.7}.ats-expired-modal__message{font-size:17px;color:#111827!important}.ats-expired-modal__price{display:inline-flex;width:max-content;border-radius:18px;background:#0b1e4b;color:#fff;padding:11px 15px;font-size:22px;font-weight:950;box-shadow:0 16px 34px rgba(11,30,75,.24)}.ats-expired-modal__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.ats-expired-modal small{color:#64748b;font-weight:750;line-height:1.5}@media(max-width:720px){.ats-expired-modal{padding:14px}.ats-expired-modal__card{padding:26px 20px;border-radius:28px}.ats-expired-modal h2{font-size:28px}.traffic-table--user-billing{min-width:980px}}

/* v18.64 - Traffic database stability + non-admin login tracker */
.traffic-health-card{
    background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
}
.traffic-health-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.traffic-health-item{
    padding:13px 14px;
    border-radius:18px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    display:grid;
    gap:4px;
}
.traffic-health-item strong{
    color:#0f172a;
    font-size:14px;
    font-weight:950;
}
.traffic-health-item span{
    color:#475569;
    font-size:12px;
    font-weight:800;
}
.traffic-health-item small{
    color:#64748b;
    font-size:11px;
    line-height:1.35;
    overflow-wrap:anywhere;
}
.traffic-health-item.is-ok{
    border-color:#bbf7d0;
    background:#f0fdf4;
}
.traffic-health-item.is-bad{
    border-color:#fecaca;
    background:#fef2f2;
}
.traffic-stat--user{
    background:linear-gradient(135deg,#eff6ff 0%,#eef2ff 100%);
    border-color:#bfdbfe;
}
.traffic-table--user-billing th,
.traffic-table--user-billing td{
    font-size:12px;
}
@media (max-width: 1200px){
    .traffic-health-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 640px){
    .traffic-health-grid{grid-template-columns:1fr;}
}


/* v18.70 - Landing KarirRapi Plus memakai gambar asli template profesional yang diburamkan tanpa nama admin */
.landing-plus-slides--real-template{
    min-height:468px;
    background:
        radial-gradient(circle at 18% 12%,rgba(37,99,235,.13),transparent 30%),
        linear-gradient(135deg,rgba(248,250,252,.98),rgba(255,255,255,.94));
}
.landing-plus-slides--real-template .landing-plus-slide{
    grid-template-rows:minmax(0,1fr) auto;
    gap:16px;
    padding:18px;
}
.landing-real-doc-preview{
    position:relative;
    min-height:314px;
    margin:0;
    border-radius:24px;
    overflow:hidden;
    background:#f8fafc;
    border:1px solid rgba(203,213,225,.92);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), 0 18px 42px rgba(15,23,42,.12);
}
.landing-real-doc-preview::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(255,255,255,.20),transparent 32%,rgba(255,255,255,.12)),
        radial-gradient(circle at 18% 12%,rgba(255,255,255,.38),transparent 26%);
}
.landing-real-doc-preview img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.012);
}
.landing-real-doc-preview figcaption{
    position:absolute;
    z-index:3;
    left:16px;
    bottom:14px;
    display:inline-flex;
    align-items:center;
    min-height:32px;
    max-width:calc(100% - 32px);
    padding:0 12px;
    border-radius:999px;
    background:rgba(11,30,75,.84);
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:900;
    letter-spacing:.02em;
    backdrop-filter:blur(8px);
    box-shadow:0 10px 24px rgba(11,30,75,.18);
}
.landing-real-doc-preview--letter figcaption{background:rgba(20,73,126,.86)}
.landing-real-doc-preview--cv figcaption{background:rgba(22,78,99,.86)}
@media(max-width:720px){
    .landing-plus-slides--real-template{min-height:400px;}
    .landing-real-doc-preview{min-height:254px;border-radius:20px;}
    .landing-real-doc-preview figcaption{font-size:10px;bottom:10px;left:10px;max-width:calc(100% - 20px);}
}

/* v18.68 - Token export payment system */
.ats-payment-bank-list{width:100%;display:grid;gap:8px;margin-top:6px}.ats-payment-bank-list div{border:1px solid rgba(191,219,254,.28);background:rgba(255,255,255,.08);border-radius:14px;padding:10px;text-align:left}.ats-payment-bank-list b,.ats-payment-bank-list span,.ats-payment-bank-list small{display:block}.ats-payment-bank-list b{color:#fff;font-weight:950}.ats-payment-bank-list span{font-size:16px;font-weight:950;color:#fef08a;letter-spacing:.04em}.ats-payment-bank-list small{color:#dbeafe;font-weight:750}.dashboard-token-card{background:linear-gradient(135deg,#0b1e4b,#2563eb)!important;color:#fff!important}.dashboard-token-card span,.dashboard-token-card small{color:#dbeafe!important}.dashboard-token-card a{color:#fff;font-weight:950;text-decoration:underline}.landing-price-card--token{border-color:#bfdbfe;background:linear-gradient(180deg,#fff,#eff6ff)}.payment-page{display:grid;gap:22px;padding:24px}.payment-hero{display:grid;grid-template-columns:1fr minmax(220px,320px);gap:20px;align-items:stretch;background:linear-gradient(135deg,#eef6ff,#fff);border:1px solid #dbeafe;border-radius:28px;padding:28px;box-shadow:0 24px 60px rgba(15,23,42,.08)}.payment-kicker{display:inline-flex;width:max-content;border-radius:999px;background:#dbeafe;color:#1d4ed8;padding:8px 12px;font-weight:950;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.payment-hero h1{margin:10px 0 8px;font-size:38px;line-height:1.05;color:#0f172a}.payment-hero p{margin:0;color:#475569;line-height:1.7;font-weight:650}.payment-token-card{border-radius:24px;background:linear-gradient(145deg,#0b1e4b,#2563eb);color:#fff;padding:24px;display:grid;gap:8px;align-content:center;box-shadow:0 24px 55px rgba(37,99,235,.24)}.payment-token-card span{color:#bfdbfe;font-weight:800}.payment-token-card strong{font-size:54px;line-height:1}.payment-token-card small{color:#dbeafe;font-weight:700}.payment-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.payment-stat-grid article,.payment-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;box-shadow:0 12px 34px rgba(15,23,42,.06)}.payment-stat-grid article{padding:18px}.payment-stat-grid span{display:block;color:#64748b;font-weight:850}.payment-stat-grid strong{display:block;color:#0f172a;font-size:30px;margin-top:4px}.payment-card{padding:22px}.payment-card--wide{overflow:hidden}.payment-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.payment-card h2{margin:0 0 6px;color:#0f172a}.payment-card p{margin:0;color:#64748b;line-height:1.6;font-weight:650}.payment-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.payment-package{display:grid;gap:10px;align-content:start;border:1px solid #dbeafe;background:linear-gradient(180deg,#fff,#eff6ff);border-radius:22px;padding:18px}.payment-package__badge{width:max-content;border-radius:999px;background:#2563eb;color:#fff;padding:6px 10px;font-size:12px;font-weight:950}.payment-package h3{margin:0;color:#0f172a;font-size:24px}.payment-package strong{font-size:34px;color:#0b1e4b}.payment-package textarea{width:100%;min-height:54px;border:1px solid #cbd5e1;border-radius:12px;padding:10px;font:inherit;resize:vertical}.payment-card--bank{display:grid;grid-template-columns:1fr 190px;gap:20px;align-items:center;background:linear-gradient(135deg,#0f172a,#0b1e4b);color:#fff}.payment-card--bank h2,.payment-card--bank p{color:#fff}.payment-bank-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.payment-bank-list div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px}.payment-bank-list span,.payment-bank-list strong,.payment-bank-list small{display:block}.payment-bank-list span{color:#bfdbfe;font-weight:900}.payment-bank-list strong{font-size:22px;color:#fef08a}.payment-bank-list small{color:#e0f2fe}.payment-qr-large{width:176px;height:176px;background:#fff;border-radius:20px;padding:14px;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;box-shadow:0 18px 40px rgba(0,0,0,.22)}.payment-qr-large i{background:#0f172a;border-radius:4px}.payment-qr-large i:nth-child(3n){background:#2563eb}.payment-qr-large i:nth-child(4n){background:#e2e8f0}.payment-table-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:16px}.payment-table{width:100%;border-collapse:collapse}.payment-table th,.payment-table td{padding:12px 14px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}.payment-table th{background:#f8fafc;color:#334155;font-weight:950}.payment-status{display:inline-flex;border-radius:999px;padding:6px 10px;font-weight:950;font-size:12px}.payment-status--pending{background:#fef3c7;color:#92400e}.payment-status--approved{background:#dcfce7;color:#166534}.payment-status--rejected{background:#fee2e2;color:#991b1b}.payment-empty{color:#64748b;text-align:center;font-weight:750}.traffic-pill--pending{background:#fef3c7!important;color:#92400e!important}.traffic-token-box b{font-size:16px;color:#1d4ed8}.traffic-inline-input{width:150px;min-height:34px;border:1px solid #cbd5e1;border-radius:10px;padding:6px 8px}.traffic-token-table td{vertical-align:top}@media(max-width:980px){.payment-hero,.payment-card--bank{grid-template-columns:1fr}.payment-package-grid,.payment-stat-grid,.payment-bank-list{grid-template-columns:1fr}.payment-qr-large{margin:auto}}

/* v18.71 - Tombol export dipindahkan ke header preview, tombol bawah builder disembunyikan */
.cv-builder-actions{display:none!important;}
.cv-toolbar-export,.cv-toolbar-template{font-weight:800;border-color:#2563eb;color:#2563eb;background:#fff;}
.cv-toolbar-export.primary{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px rgba(37,99,235,.18);}
.cv-toolbar-template{border-color:#111827;color:#111827;background:#ffffff;}
.cv-toolbar-template:hover{background:#eff6ff;color:#1d4ed8;border-color:#1d4ed8;}
.cv-preview-toolbar{gap:12px;}
@media (max-width: 980px){
  .cv-toolbar-export,.cv-toolbar-template{min-height:40px;padding:0 12px;font-size:13px;}
}
.cv-preview-toolbar .cv-zoom-box{margin-left:auto;}

/* v18.74 - Tanya AI landing page */
.landing-ai-section {
    position: relative;
    overflow: hidden;
}

.landing-ai-section::before {
    content: "";
    position: absolute;
    inset: 36px 24px auto auto;
    width: 230px;
    height: 230px;
    background: radial-gradient(circle, rgba(37,99,235,.18), transparent 68%);
    pointer-events: none;
}

.landing-ai-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
    gap: 24px;
    align-items: stretch;
    padding: 28px;
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.92)),
        radial-gradient(circle at 0 0, rgba(37,99,235,.14), transparent 44%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.landing-ai-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 390px;
}

.landing-ai-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 900;
    letter-spacing: .02em;
}

.landing-ai-copy h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.03;
    color: #0f172a;
}

.landing-ai-copy p {
    max-width: 630px;
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.75;
}

.landing-ai-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.landing-ai-chip-row button,
.ai-suggestion-row button {
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 999px;
    background: #fff;
    color: #1e3a8a;
    font-weight: 800;
    padding: 9px 13px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.landing-ai-chip-row button:hover,
.ai-suggestion-row button:hover {
    transform: translateY(-2px);
    background: #eff6ff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .12);
}

.landing-ai-chat {
    display: flex;
    flex-direction: column;
    min-height: 470px;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .13);
    overflow: hidden;
}

.landing-ai-chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
    color: #fff;
}

.landing-ai-chat__head strong {
    display: block;
    font-size: 18px;
}

.landing-ai-chat__head small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.78);
}

.landing-ai-chat__head > span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .18);
    border: 1px solid rgba(134, 239, 172, .55);
    color: #dcfce7;
    font-size: 12px;
    font-weight: 900;
}

.landing-ai-chat__messages {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    background:
        linear-gradient(180deg, #f8fafc, #fff),
        radial-gradient(circle at 100% 0, rgba(37,99,235,.08), transparent 42%);
}

.ai-message {
    max-width: 88%;
    width: fit-content;
    padding: 12px 14px;
    border-radius: 17px;
    margin-bottom: 12px;
    line-height: 1.58;
    white-space: pre-line;
    box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.ai-message--bot {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #0f172a;
}

.ai-message--user {
    margin-left: auto;
    background: #2563eb;
    color: #fff;
}

.ai-suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 12px;
}

.landing-ai-chat__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.landing-ai-chat__form textarea {
    resize: none;
    width: 100%;
    min-height: 64px;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    padding: 12px 13px;
    font: inherit;
    outline: none;
}

.landing-ai-chat__form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.landing-ai-chat__form button {
    align-self: stretch;
    border: 0;
    border-radius: 16px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
    padding: 0 22px;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(37, 99, 235, .22);
}

.landing-ai-chat__form button:disabled {
    opacity: .72;
    cursor: wait;
}

.landing-ai-chat__note {
    display: block;
    padding: 0 16px 14px;
    color: #64748b;
    font-size: 12px;
}

@media (max-width: 980px) {
    .landing-ai-shell {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .landing-ai-copy {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .landing-ai-chat__form {
        grid-template-columns: 1fr;
    }

    .landing-ai-chat__form button {
        min-height: 48px;
    }
}

/* v18.75 - KarirRapi Assistant: thumbnail CV mengikuti bentuk template asli, bukan satu gambar yang sama. */
.assistant-template-grid--cv .assistant-template-card{
    overflow:hidden;
}
.assistant-cv-thumb-real{
    position:relative;
    height:136px;
    border-radius:18px;
    border:1px solid #dbeafe;
    background:linear-gradient(135deg,#f8fafc 0%,#eef6ff 100%);
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.82),0 14px 28px rgba(15,23,42,.08);
    margin-bottom:14px;
    overflow:hidden;
}
.assistant-cv-thumb-real:before{
    content:'';
    position:absolute;
    inset:auto 18px 11px 18px;
    height:9px;
    border-radius:999px;
    background:rgba(148,163,184,.18);
    filter:blur(.2px);
}
.assistant-cv-thumb-viewport{
    position:absolute;
    left:50%;
    top:50%;
    width:100px;
    height:128px;
    transform:translate(-50%,-50%);
    overflow:visible;
}
.assistant-cv-thumb-real .assistant-mini-cv-thumb{
    width:250px;
    min-height:330px;
    height:330px;
    background:transparent;
    align-items:flex-start;
    justify-content:flex-start;
    transform:scale(.40);
    transform-origin:0 0;
}
.assistant-cv-thumb-real .assistant-mini-cv-thumb .cv-thumb-paper{
    box-shadow:0 16px 32px rgba(15,23,42,.18);
}
.assistant-template-grid--cv .cv-thumb-ats-executive-mono .cv-thumb-paper{
    border-top:24px solid #111827;
    border-bottom:5px solid #111827;
    font-family:Georgia,"Times New Roman",serif;
    letter-spacing:.02em;
}
.assistant-template-grid--cv .cv-thumb-ats-compact-recruiter .cv-thumb-paper{
    padding:20px 24px;
    font-family:Arial,sans-serif;
    border-left:18px solid #e5e7eb;
}
.assistant-template-grid--cv .cv-thumb-ats-compact-recruiter .cv-thumb-paper strong{
    margin:9px 0 5px;
}
.assistant-template-grid--cv .cv-thumb-ats-legal-counsel .cv-thumb-paper,
.assistant-template-grid--cv .cv-thumb-ats-compliance .cv-thumb-paper{
    border-left:9px solid var(--accent);
    border-top:2px solid var(--accent);
    font-family:Cambria,Georgia,serif;
}
.assistant-template-grid--cv .cv-thumb-ats-finance-ledger .cv-thumb-paper{
    background:repeating-linear-gradient(0deg,#fff 0,#fff 20px,#edf7ef 21px,#edf7ef 22px);
    border-left:8px solid var(--accent);
}
.assistant-template-grid--cv .cv-thumb-ats-academic-scholar .cv-thumb-paper,
.assistant-template-grid--cv .cv-thumb-ats-research .cv-thumb-paper{
    border:2px double var(--accent);
    font-family:Garamond,"Times New Roman",serif;
}
.assistant-template-grid--cv .cv-thumb-ats-tech-systems .cv-thumb-paper{
    border-top:34px solid var(--accent);
    background:linear-gradient(90deg,#fff 0 70%,#f0f9ff 70% 100%);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-ats-government-formal .cv-thumb-paper{
    border-top:38px solid var(--accent);
    border-bottom:10px solid var(--accent);
    font-family:"Times New Roman",serif;
}
.assistant-template-grid--cv .cv-thumb-ats-government-formal .cv-thumb-paper:after{
    content:'';
    position:absolute;
    right:26px;
    top:18px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.72);
}
.assistant-template-grid--cv .cv-thumb-ats-european-compact .cv-thumb-paper{
    padding:22px 26px;
    border-left:4px solid #111827;
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-ats-chronological-prime .cv-thumb-paper{
    border-left:7px solid #111;
}
.assistant-template-grid--cv .cv-thumb-ats-chronological-prime .cv-thumb-paper:after,
.assistant-template-grid--cv .cv-thumb-creative-timeline .cv-thumb-paper:after{
    content:'';
    position:absolute;
    left:44px;
    top:126px;
    bottom:38px;
    width:3px;
    background:var(--accent);
    box-shadow:0 22px 0 var(--accent),0 58px 0 var(--accent);
}
.assistant-template-grid--cv .cv-thumb-ats-functional-skill .cv-thumb-paper{
    background:linear-gradient(90deg,#f0fdfa 0 34%,#fff 34% 100%);
    border-top:5px solid var(--accent);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-ats-combination-pro .cv-thumb-paper{
    background:linear-gradient(90deg,#eff6ff 0 42%,#fff 42% 100%);
    border-top:8px solid var(--accent);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-ats-modern-line .cv-thumb-paper,
.assistant-template-grid--cv .cv-thumb-ats-blue-line .cv-thumb-paper,
.assistant-template-grid--cv .cv-thumb-ats-gold-line .cv-thumb-paper{
    border-top:10px solid var(--accent);
    border-bottom:2px solid var(--accent);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-ats-plain-text .cv-thumb-paper{
    box-shadow:none;
    border:1px dashed #cbd5e1;
    font-family:"Courier New",monospace;
}
.assistant-template-grid--cv .cv-thumb-ats-banking-formal .cv-thumb-paper{
    border-top:22px solid var(--accent);
    border-left:5px solid var(--accent);
    font-family:Georgia,"Times New Roman",serif;
}
.assistant-template-grid--cv .cv-thumb-ats-corporate-grid .cv-thumb-paper{
    background:linear-gradient(90deg,#f8fafc 0 45%,#fff 45% 100%),linear-gradient(0deg,transparent 0 31px,#e5e7eb 32px);
    border-top:12px solid var(--accent);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-ats-monochrome-premium .cv-thumb-paper{
    border-top:56px solid #18181b;
    background:#fafafa;
    font-family:Georgia,"Times New Roman",serif;
}
.assistant-template-grid--cv .cv-thumb-ats-gray-panel .cv-thumb-paper{
    background:linear-gradient(90deg,#e5e7eb 0 30%,#fff 30% 100%);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-ats-letterhead .cv-thumb-paper{
    border-top:32px solid #f1f5f9;
    border-left:1px solid #cbd5e1;
    border-right:1px solid #cbd5e1;
}
.assistant-template-grid--cv .cv-thumb-ats-letterhead .cv-thumb-paper:after{
    content:'';
    position:absolute;
    top:-22px;
    left:28px;
    right:28px;
    height:5px;
    background:var(--accent);
    border-radius:999px;
}
.assistant-template-grid--cv .cv-thumb-ats-profile-top .cv-thumb-paper{
    border-top:72px solid #eef2ff;
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-navy-split .cv-thumb-paper,
.assistant-template-grid--cv .cv-thumb-creative-professional .cv-thumb-paper{
    border-left:70px solid var(--accent);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-gold-luxury .cv-thumb-paper{
    border-top:18px solid #111827;
    border-bottom:10px solid var(--accent);
    outline:3px solid rgba(184,134,11,.28);
    font-family:Georgia,"Times New Roman",serif;
}
.assistant-template-grid--cv .cv-thumb-creative-green-eco .cv-thumb-paper{
    background:linear-gradient(135deg,#ecfdf5 0 28%,#fff 28% 100%);
    border-left:54px solid var(--accent);
}
.assistant-template-grid--cv .cv-thumb-creative-maroon-legal .cv-thumb-paper{
    border-top:60px solid var(--accent);
    font-family:Cambria,Georgia,serif;
}
.assistant-template-grid--cv .cv-thumb-creative-purple-tech .cv-thumb-paper{
    background:linear-gradient(90deg,#f5f3ff 0 38%,#fff 38% 100%);
    border-top:8px solid var(--accent);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-orange-startup .cv-thumb-paper{
    background:linear-gradient(135deg,var(--accent) 0 30%,#fff 30% 100%);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-teal-medical .cv-thumb-paper{
    border-left:52px solid var(--accent);
    background:#f0fdfa;
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-black-white .cv-thumb-paper{
    background:linear-gradient(90deg,#111 0 36%,#fff 36% 100%);
    font-family:Georgia,"Times New Roman",serif;
}
.assistant-template-grid--cv .cv-thumb-creative-photo-header .cv-thumb-paper{
    border-top:76px solid #dbeafe;
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-photo-header .photo-dot{
    position:absolute;
    top:22px;
    left:96px;
    background:#fff;
}
.assistant-template-grid--cv .cv-thumb-creative-infographic .cv-thumb-paper{
    background:radial-gradient(circle at 38px 88px,var(--accent) 0 18px,transparent 19px),linear-gradient(90deg,#f8fafc 0 38%,#fff 38% 100%);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-compact-card .cv-thumb-paper{
    background:linear-gradient(180deg,#fff 0 32%,#f8fafc 32% 100%);
    border:8px solid #f1f5f9;
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-portfolio .cv-thumb-paper{
    background:linear-gradient(90deg,#fff 0 60%,#e2e8f0 60% 100%);
    border-top:48px solid var(--accent);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-gradient .cv-thumb-paper{
    border-top:74px solid var(--accent);
    background:linear-gradient(180deg,#fff 0 58%,#f8fafc 58% 100%);
    font-family:Arial,sans-serif;
}
.assistant-template-grid--cv .cv-thumb-creative-executive-board .cv-thumb-paper{
    background:linear-gradient(90deg,#0f172a 0 34%,#fff 34% 100%);
    border-top:16px solid #0f172a;
    font-family:Georgia,"Times New Roman",serif;
}
@media(max-width:680px){
    .assistant-cv-thumb-real{height:126px;}
    .assistant-cv-thumb-viewport{width:94px;height:122px;}
    .assistant-cv-thumb-real .assistant-mini-cv-thumb{transform:scale(.38);}
}

/* v18.77: popup Menu Tambahan user Free - QR disembunyikan sampai klik Daftar sekarang */
.ats-payment-modal__grid.is-checkout-hidden{grid-template-columns:1fr;max-width:720px;margin:0 auto}
.ats-payment-modal__grid.is-checkout-hidden .ats-payment-modal__content{padding-right:0}
.ats-payment-qr-panel.is-hidden{display:none!important}
.ats-payment-checkout-intro{background:rgba(191,219,254,.12);border:1px solid rgba(191,219,254,.24);border-radius:16px;padding:10px 12px;color:#e0f2fe!important;font-weight:800!important}
.ats-payment-request-form{width:100%;display:grid;gap:10px;margin-top:4px}.ats-payment-request-form .btn{width:100%;justify-content:center}.ats-payment-status-link{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:40px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:950;text-decoration:none}.ats-payment-status-link:hover{background:rgba(255,255,255,.18)}.ats-payment-modal__actions .btn.is-disabled{opacity:.72;cursor:not-allowed}
.payment-token-card--plus{background:linear-gradient(145deg,#064e3b,#16a34a)!important}.payment-token-card--plus strong{font-size:42px}.payment-card--ats-plus{grid-template-columns:1fr 190px}.payment-atsplus-form{display:grid;gap:10px;margin-top:14px;max-width:520px}.payment-atsplus-form textarea{width:100%;min-height:58px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;border-radius:12px;padding:10px;font:inherit;resize:vertical}.payment-atsplus-form textarea::placeholder{color:#dbeafe}.payment-bank-list--single{grid-template-columns:minmax(0,360px)}
@media(max-width:820px){.payment-card--ats-plus{grid-template-columns:1fr}.payment-bank-list--single{grid-template-columns:1fr}}

/* v18.81: landing page hanya hero; section menu publik dipisah ke page masing-masing. */
.ats-homepage--landing-only{
    min-height: calc(100vh - var(--public-header-height, 92px));
    display: grid;
    align-items: center;
}
.ats-standalone-page{
    padding-top: clamp(28px, 5vw, 74px);
}
.ats-standalone-page .landing-block{
    margin-top: 0;
}

/* v18.83 - Pembayaran Token compact + BCA QRIS popup */
.payment-page--compact{gap:14px;padding:16px 22px 28px;background:linear-gradient(180deg,#eef4fb 0%,#f8fbff 42%,#fff 100%);min-height:calc(100vh - 70px)}
.payment-hero--compact{grid-template-columns:1fr minmax(180px,260px);padding:20px 22px;border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 18px 45px rgba(15,23,42,.07);backdrop-filter:blur(8px)}
.payment-hero--compact h1{font-size:32px;margin:8px 0 6px}.payment-hero--compact p{font-size:14px;line-height:1.55;max-width:940px}.payment-hero--compact .payment-token-card{border-radius:20px;padding:18px}.payment-hero--compact .payment-token-card strong{font-size:44px}.payment-kicker{font-size:11px;padding:7px 12px;letter-spacing:.09em}.payment-stat-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.payment-stat-grid--compact article{padding:14px 16px;border-radius:18px}.payment-stat-grid--compact span{font-size:13px}.payment-stat-grid--compact strong{font-size:26px}.payment-method-panel{padding:16px;border-radius:22px;display:grid;grid-template-columns:minmax(260px,.8fr) minmax(420px,1.2fr);gap:16px;align-items:center;background:linear-gradient(135deg,#ffffff,#eff6ff);border:1px solid #bfdbfe}.payment-method-panel__intro h2{margin:8px 0 6px;color:#0f172a;font-size:24px}.payment-method-panel__intro p{font-size:14px;line-height:1.55}.payment-method-panel__body{display:grid;grid-template-columns:minmax(240px,1fr) minmax(160px,220px);gap:14px;align-items:stretch}.payment-bca-box{border-radius:20px;background:linear-gradient(135deg,#0b1e4b,#1d4ed8);color:#fff;padding:18px;display:grid;gap:5px;align-content:center;box-shadow:0 16px 34px rgba(37,99,235,.18)}.payment-bca-box span{color:#bfdbfe;font-weight:950;letter-spacing:.06em}.payment-bca-box strong{font-size:32px;line-height:1;color:#fef08a;letter-spacing:.02em}.payment-bca-box small{font-weight:800;color:#eff6ff}.payment-bca-box em{font-size:12px;color:#dbeafe;font-style:normal;margin-top:8px}.payment-qris-button,.ats-payment-qr-image{border:0;background:#fff;border-radius:20px;box-shadow:0 16px 36px rgba(15,23,42,.12);padding:10px;cursor:pointer;display:grid;gap:8px;justify-items:center;align-content:center;text-align:center;color:#1d4ed8;font:inherit;font-weight:950;transition:transform .18s ease,box-shadow .18s ease}.payment-qris-button:hover,.ats-payment-qr-image:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(15,23,42,.16)}.payment-qris-button img{width:100%;max-height:185px;object-fit:contain;border-radius:14px;background:#fff}.payment-qris-button span,.ats-payment-qr-image span{font-size:12px}.payment-package-section,.payment-history-section{padding:16px 18px;border-radius:22px}.payment-card__head--compact{margin-bottom:12px}.payment-card__head--compact h2{font-size:22px}.payment-card__head--compact p{font-size:14px;line-height:1.45}.payment-package-grid--compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.payment-package-grid--compact .payment-package{border-radius:18px;padding:14px;gap:8px}.payment-package-grid--compact .payment-package h3{font-size:19px}.payment-package-grid--compact .payment-package strong{font-size:26px}.payment-package-grid--compact .payment-package p{font-size:13px;line-height:1.45;min-height:38px}.payment-package-grid--compact .payment-package textarea{min-height:46px;font-size:13px}.payment-package-grid--compact .payment-package .btn{min-height:40px;font-size:13px}.payment-package--plus{background:linear-gradient(180deg,#0b1e4b,#1d4ed8)!important;color:#fff;border-color:#93c5fd!important}.payment-package--plus h3,.payment-package--plus p,.payment-package--plus strong{color:#fff!important}.payment-package--plus .payment-package__badge{background:#fef08a!important;color:#0b1e4b!important}.payment-package--plus textarea{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important}.payment-package--plus textarea::placeholder{color:#dbeafe!important}.payment-history-section .payment-table th,.payment-history-section .payment-table td{padding:10px 12px;font-size:13px}.ats-payment-qr-image{width:198px;min-height:198px;margin:0 auto}.ats-payment-qr-image img{width:100%;height:152px;object-fit:contain;border-radius:14px;background:#fff}.payment-qr-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px}.payment-qr-lightbox.is-open{display:flex}.payment-qr-lightbox__backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.72);cursor:pointer}.payment-qr-lightbox__card{position:relative;z-index:1;width:min(92vw,520px);max-height:92vh;overflow:auto;border-radius:26px;background:#fff;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.36);display:grid;gap:10px;text-align:center}.payment-qr-lightbox__card img{width:100%;height:auto;border-radius:18px;object-fit:contain;background:#fff}.payment-qr-lightbox__card p{margin:0;color:#334155;font-weight:850}.payment-qr-lightbox__close{position:absolute;right:10px;top:10px;width:38px;height:38px;border:0;border-radius:999px;background:#0b1e4b;color:#fff;font-size:24px;line-height:1;cursor:pointer}.ats-payment-modal .ats-payment-bank-list{grid-template-columns:1fr!important}.ats-payment-modal .ats-payment-bank-list div{border-radius:14px}.ats-payment-modal .ats-payment-status-link{font-size:13px}
@media(max-width:1120px){.payment-package-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-method-panel{grid-template-columns:1fr}.payment-method-panel__body{grid-template-columns:1fr minmax(150px,220px)}}
@media(max-width:720px){.payment-page--compact{padding:12px}.payment-hero--compact{grid-template-columns:1fr;padding:16px}.payment-hero--compact h1{font-size:28px}.payment-stat-grid--compact,.payment-package-grid--compact,.payment-method-panel__body{grid-template-columns:1fr}.payment-qris-button img{max-height:260px}.payment-bca-box strong{font-size:28px}.payment-table-wrap{max-width:100%;overflow:auto}}

/* v18.84 - Popup pembayaran compact + menu tambahan terkunci tetap preview saat hover */
.app-nav__dropdown--locked .locked-tools-trigger{
    min-height:40px;
    border:1px solid #fed7aa!important;
    background:linear-gradient(135deg,#fff7ed,#fffbeb)!important;
    color:#9a3412!important;
    border-radius:999px;
    padding:0 14px;
    font-weight:950;
    box-shadow:0 8px 20px rgba(251,146,60,.12);
}
.app-nav__dropdown--locked .app-nav__menu--locked{
    min-width:260px;
    padding:10px;
    gap:4px;
    border-color:#fed7aa;
    box-shadow:0 22px 55px rgba(15,23,42,.16);
}
.app-nav__dropdown--locked .app-nav__menu--locked a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    color:#334155;
    border-radius:12px;
}
.app-nav__dropdown--locked .app-nav__menu--locked a:hover{
    background:#fff7ed;
    color:#9a3412;
}
.app-nav__dropdown--locked .app-nav__menu--locked small{
    font-size:12px;
    color:#d97706;
}
.locked-tools-note{
    display:block;
    color:#92400e;
    font-size:12px;
    font-weight:950;
    line-height:1.35;
    padding:9px 11px;
    border-radius:12px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.ats-payment-modal{
    padding:18px;
}
.ats-payment-modal__card{
    width:min(760px,96vw);
    max-height:none;
    overflow:visible;
    border-radius:26px;
    background:linear-gradient(145deg,#ffffff 0%,#f8fbff 58%,#eff6ff 100%);
}
.ats-payment-modal__close{
    right:12px;
    top:12px;
    width:34px;
    height:34px;
    font-size:24px;
}
.ats-payment-modal__grid{
    grid-template-columns:minmax(0,1fr) minmax(210px,245px);
    gap:16px;
    padding:22px;
    align-items:stretch;
}
.ats-payment-modal__content{
    gap:10px;
    padding-right:0;
}
.ats-payment-modal h2{
    font-size:27px;
    line-height:1.08;
    letter-spacing:-.03em;
    padding-right:34px;
}
.ats-payment-modal p{
    font-size:13px;
    line-height:1.5;
}
.ats-payment-modal__badge{
    padding:7px 11px;
    font-size:11px;
}
.ats-payment-price{
    border-radius:16px;
    padding:10px 13px;
    font-size:20px;
}
.ats-payment-features{
    gap:7px;
    font-size:13px;
    line-height:1.35;
}
.ats-payment-features li{
    padding-left:26px;
}
.ats-payment-features li:before{
    width:18px;
    height:18px;
    font-size:11px;
}
.ats-payment-modal__actions{
    margin-top:4px;
}
.ats-payment-modal__actions .btn{
    min-height:40px;
    padding:0 15px;
    font-size:13px;
}
.ats-payment-qr-panel{
    border-radius:22px;
    padding:16px;
    gap:8px;
    background:linear-gradient(180deg,#0b1e4b,#172554);
}
.ats-payment-qr-panel span{
    font-size:11px;
}
.ats-payment-qr-panel p{
    font-size:11px;
    line-height:1.38;
}
.ats-payment-qr-panel strong{
    font-size:14px;
}
.ats-payment-qr-image{
    width:138px;
    min-height:146px;
    border-radius:16px;
    padding:7px;
    gap:5px;
}
.ats-payment-qr-image img{
    height:104px;
    border-radius:10px;
}
.ats-payment-qr-image span{
    font-size:10px;
    color:#1d4ed8;
    letter-spacing:0;
    text-transform:none;
}
.ats-payment-modal .ats-payment-bank-list{
    width:100%;
    gap:8px;
}
.ats-payment-modal .ats-payment-bank-list div{
    padding:10px 11px;
    border-radius:12px;
    background:rgba(255,255,255,.09);
}
.ats-payment-modal .ats-payment-bank-list b{
    font-size:11px;
}
.ats-payment-modal .ats-payment-bank-list span{
    font-size:20px;
    line-height:1.05;
    color:#fef08a;
}
.ats-payment-modal .ats-payment-bank-list small{
    color:#e0f2fe;
    font-size:11px;
}
.ats-payment-request-form{
    display:none!important;
}
.ats-payment-status-link.btn{
    min-height:38px;
    width:100%;
    justify-content:center;
    font-size:12px;
    border-radius:14px;
    text-decoration:none;
}
@media(max-width:820px){
    .ats-payment-modal__card{max-height:calc(100vh - 28px);overflow:auto;}
    .ats-payment-modal__grid{grid-template-columns:1fr;padding:18px;}
    .ats-payment-modal h2{font-size:24px;}
    .ats-payment-qr-image{width:150px;min-height:158px;}
    .ats-payment-qr-image img{height:116px;}
}


/* v19.17 - Popup pembayaran token: list paket dirapikan */
.ats-payment-modal__content{
    min-width:0;
}
.ats-payment-price{
    width:fit-content;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
}
.ats-payment-price--token{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    width:100%;
    max-width:100%;
    padding:10px;
    font-size:0;
    line-height:1.2;
}
.ats-payment-price--token span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:34px;
    border-radius:13px;
    padding:7px 8px;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:13px;
    font-weight:950;
    line-height:1.08;
    text-align:center;
    white-space:nowrap;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.ats-payment-modal__actions{
    width:100%;
}
.ats-payment-modal__actions .btn[data-payment-primary],
.ats-payment-modal__actions .btn[data-payment-continue],
.ats-payment-modal__actions .btn[data-payment-reveal-checkout]{
    justify-content:center;
}
.ats-payment-qr-panel .ats-payment-status-link{
    display:none!important;
}
@media(max-width:980px){
    .ats-payment-price--token{
        grid-template-columns:1fr;
    }
    .ats-payment-price--token span{
        justify-content:flex-start;
        font-size:14px;
        padding:8px 12px;
    }
}
@media(max-width:820px){
    .ats-payment-price--token{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .ats-payment-price--token span{
        justify-content:center;
        font-size:12px;
        min-height:32px;
        padding:7px 6px;
    }
}
@media(max-width:520px){
    .ats-payment-price--token{
        grid-template-columns:1fr;
    }
    .ats-payment-price--token span{
        justify-content:flex-start;
        font-size:14px;
        padding:8px 12px;
    }
}


/* v19.20 - QRIS diperbesar harus muncul paling depan saat popup pembayaran export terbuka */
.payment-qr-lightbox{
    z-index:12080!important;
}
.payment-qr-lightbox.is-open{
    display:flex!important;
}
.payment-qr-lightbox__backdrop{
    background:rgba(2,6,23,.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.payment-qr-lightbox__card{
    z-index:12081;
    width:min(94vw,640px);
    border-radius:30px;
    padding:22px;
    box-shadow:0 42px 120px rgba(2,6,23,.55);
}
.payment-qr-lightbox__card img{
    max-height:min(76vh,720px);
    object-fit:contain;
}
.payment-qr-lightbox__close{
    z-index:12082;
    right:12px;
    top:12px;
    background:#ef4444;
    color:#fff;
    box-shadow:0 12px 28px rgba(239,68,68,.26);
}
.payment-qr-lightbox__close:hover{
    background:#b91c1c;
}
@media(max-width:720px){
    .payment-qr-lightbox{
        padding:12px;
    }
    .payment-qr-lightbox__card{
        width:min(96vw,560px);
        padding:16px;
        border-radius:24px;
    }
    .payment-qr-lightbox__card img{
        max-height:72vh;
    }
}

/* v18.87 Profile Pengguna compact dashboard */
.user-profile-dashboard{
    max-width:1180px;
    gap:16px;
}
.profile-compact-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(240px,320px);
    gap:16px;
    align-items:stretch;
    border:1px solid #dbeafe;
    background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 52%,#ffffff 100%);
    border-radius:24px;
    padding:22px;
    box-shadow:0 16px 42px rgba(15,23,42,.07);
}
.profile-compact-hero .eyebrow{
    background:#dbeafe;
    color:#1d4ed8;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.profile-compact-hero h1{
    margin:10px 0 6px;
    color:#0b1e4b;
    font-size:32px;
    line-height:1.08;
}
.profile-compact-hero p{
    margin:0;
    color:#475569;
    font-size:15px;
    line-height:1.55;
    max-width:720px;
}
.profile-identity-card{
    display:grid;
    gap:6px;
    align-content:center;
    border:1px solid #bfdbfe;
    border-radius:20px;
    padding:18px;
    background:linear-gradient(135deg,#0b1e4b,#2563eb);
    color:#fff;
    box-shadow:0 16px 34px rgba(37,99,235,.16);
}
.profile-identity-card span,
.profile-summary-grid span{
    color:#93c5fd;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.profile-identity-card strong{
    font-size:24px;
    line-height:1.1;
    text-transform:capitalize;
}
.profile-identity-card small{
    color:#dbeafe;
    font-weight:700;
    line-height:1.45;
}
.profile-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.profile-summary-grid article{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:16px;
    box-shadow:0 12px 30px rgba(15,23,42,.05);
    display:grid;
    gap:6px;
}
.profile-summary-grid strong{
    color:#0f172a;
    font-size:22px;
    line-height:1.15;
}
.profile-summary-grid small{
    color:#64748b;
    font-weight:650;
    line-height:1.45;
}
.profile-action-card{
    border-radius:22px;
    padding:18px;
    box-shadow:0 12px 32px rgba(15,23,42,.05);
}
.profile-section-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    margin-bottom:12px;
}
.profile-section-head h2{
    margin:0 0 4px;
    color:#0f172a;
    font-size:24px;
}
.profile-section-head p{
    margin:0;
}
.profile-action-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.profile-action-link{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 10px;
    align-items:center;
    min-height:96px;
    padding:16px;
    border-radius:18px;
    border:1px solid #e2e8f0;
    background:linear-gradient(180deg,#fff,#f8fafc);
    color:#0f172a;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(15,23,42,.04);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.profile-action-link:hover{
    transform:translateY(-2px);
    border-color:#93c5fd;
    box-shadow:0 16px 34px rgba(37,99,235,.12);
}
.profile-action-link b{
    font-size:17px;
}
.profile-action-link span{
    width:30px;
    height:30px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:#dbeafe;
    color:#1d4ed8;
    font-weight:950;
}
.profile-action-link small{
    grid-column:1 / -1;
    color:#64748b;
    font-weight:650;
    line-height:1.45;
}
.profile-action-link--primary{
    background:linear-gradient(135deg,#0b1e4b,#2563eb);
    color:#fff;
    border-color:#93c5fd;
}
.profile-action-link--primary small{
    color:#dbeafe;
}
.profile-action-link--primary span{
    background:#fff;
    color:#1d4ed8;
}
@media(max-width:980px){
    .profile-compact-hero,
    .profile-summary-grid{
        grid-template-columns:1fr;
    }
    .profile-action-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:620px){
    .profile-compact-hero{
        padding:18px;
        border-radius:20px;
    }
    .profile-compact-hero h1{
        font-size:28px;
    }
    .profile-action-grid{
        grid-template-columns:1fr;
    }
}

/* v18.89 Landing menu Fitur dibuat compact, profesional, dan non-teknis */
.landing-feature-page{
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}
.landing-feature-compact{
    padding-top:48px;
    padding-bottom:58px;
}
.landing-feature-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.45fr) minmax(280px, .55fr);
    gap:22px;
    align-items:stretch;
    margin-bottom:18px;
}
.landing-feature-hero__copy,
.landing-feature-hero__note,
.landing-feature-card,
.landing-feature-bottom{
    border:1px solid rgba(148,163,184,.26);
    background:rgba(255,255,255,.88);
    box-shadow:0 20px 54px rgba(15,23,42,.08);
    backdrop-filter:blur(14px);
}
.landing-feature-hero__copy{
    border-radius:28px;
    padding:32px;
}
.landing-feature-eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:31px;
    padding:0 13px;
    border-radius:999px;
    background:#eaf1ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.landing-feature-hero__copy h1{
    max-width:780px;
    margin:16px 0 10px;
    color:#071a44;
    font-size:42px;
    line-height:1.12;
    letter-spacing:-.9px;
}
.landing-feature-hero__copy p{
    max-width:760px;
    margin:0;
    color:#52637a;
    font-size:16px;
    line-height:1.75;
}
.landing-feature-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}
.landing-feature-hero__note{
    border-radius:28px;
    padding:26px;
    background:
        linear-gradient(135deg, rgba(15,42,100,.96), rgba(37,99,235,.88));
    color:#fff;
}
.landing-feature-hero__note strong{
    display:block;
    margin-bottom:16px;
    font-size:20px;
}
.landing-feature-hero__note ol{
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:feature-step;
}
.landing-feature-hero__note li{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.92);
    font-weight:800;
    line-height:1.45;
    counter-increment:feature-step;
}
.landing-feature-hero__note li::before{
    content:counter(feature-step);
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:999px;
    background:#fff;
    color:#1d4ed8;
    font-size:13px;
    font-weight:950;
}
.landing-feature-card-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}
.landing-feature-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    min-height:132px;
    padding:18px;
    border-radius:22px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.landing-feature-card:hover{
    transform:translateY(-3px);
    border-color:rgba(37,99,235,.34);
    box-shadow:0 24px 60px rgba(15,23,42,.10);
}
.landing-feature-card__icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:16px;
    background:linear-gradient(135deg, #eaf1ff, #f8fbff);
    color:#2563eb;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.10);
}
.landing-feature-card__icon svg{
    width:24px;
    height:24px;
}
.landing-feature-card h2{
    margin:2px 0 6px;
    color:#0f172a;
    font-size:17px;
    line-height:1.25;
}
.landing-feature-card p{
    margin:0;
    color:#64748b;
    font-size:13.5px;
    line-height:1.58;
}
.landing-feature-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:18px;
    padding:18px 22px;
    border-radius:22px;
}
.landing-feature-bottom strong{
    display:block;
    color:#0f172a;
    font-size:18px;
    margin-bottom:4px;
}
.landing-feature-bottom p{
    margin:0;
    color:#64748b;
    line-height:1.55;
}
@media(max-width:1060px){
    .landing-feature-card-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .landing-feature-hero{
        grid-template-columns:1fr;
    }
}
@media(max-width:720px){
    .landing-feature-compact{
        padding-top:28px;
        padding-bottom:38px;
    }
    .landing-feature-hero__copy,
    .landing-feature-hero__note{
        border-radius:22px;
        padding:22px;
    }
    .landing-feature-hero__copy h1{
        font-size:30px;
    }
    .landing-feature-card-grid{
        grid-template-columns:1fr;
    }
    .landing-feature-card{
        min-height:auto;
    }
    .landing-feature-bottom{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* v18.90 Landing copy ajakan + layout Fitur lebih menarik */
.landing-hero-benefits,
.landing-feature-mini-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}
.landing-hero-benefits span,
.landing-feature-mini-points span{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(37,99,235,.12);
    color:#0b1e4b;
    font-size:13px;
    font-weight:900;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.ats-hero__content .landing-hero-benefits span{
    background:#ffffff;
}
.landing-feature-page{
    background:
        radial-gradient(circle at 12% 10%, rgba(37,99,235,.12), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(149,180,0,.14), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}
.landing-feature-compact{
    position:relative;
}
.landing-feature-compact::before{
    content:"";
    position:absolute;
    inset:26px auto auto 50%;
    width:min(640px, 72vw);
    height:150px;
    transform:translateX(-50%);
    border-radius:999px;
    background:linear-gradient(90deg, rgba(37,99,235,.12), rgba(149,180,0,.10));
    filter:blur(34px);
    pointer-events:none;
}
.landing-feature-hero,
.landing-feature-card-grid,
.landing-feature-bottom{
    position:relative;
    z-index:1;
}
.landing-feature-hero__copy{
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,251,255,.88)),
        radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 34%);
}
.landing-feature-eyebrow{
    background:linear-gradient(135deg,#eaf1ff,#effce8);
    color:#1d4ed8;
}
.landing-feature-hero__copy h1{
    max-width:820px;
}
.landing-feature-hero__note{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:240px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 30%),
        linear-gradient(135deg, rgba(11,30,75,.98), rgba(37,99,235,.90));
}
.landing-feature-hero__note::after{
    content:"Daftar akun, lalu pilih token atau paket saat butuh fitur lebih lengkap.";
    display:block;
    margin-top:18px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.9);
    font-size:13px;
    font-weight:800;
    line-height:1.45;
}
.landing-feature-card{
    background:linear-gradient(180deg,#fff 0%,#f9fbff 100%);
}
.landing-feature-card:nth-child(2n) .landing-feature-card__icon{
    color:#0f766e;
    background:linear-gradient(135deg,#ccfbf1,#f8fbff);
}
.landing-feature-card:nth-child(3n) .landing-feature-card__icon{
    color:#7c3aed;
    background:linear-gradient(135deg,#ede9fe,#f8fbff);
}
.landing-feature-card:nth-child(4n) .landing-feature-card__icon{
    color:#b45309;
    background:linear-gradient(135deg,#fef3c7,#f8fbff);
}
.landing-feature-bottom{
    background:
        linear-gradient(135deg, rgba(11,30,75,.96), rgba(37,99,235,.88));
    color:#fff;
}
.landing-feature-bottom strong{
    color:#fff;
}
.landing-feature-bottom p{
    color:rgba(255,255,255,.84);
}
.landing-feature-bottom .ats-btn--ghost{
    background:#fff;
    border-color:#fff;
    color:#1d4ed8;
}
@media(max-width:720px){
    .landing-hero-benefits span,
    .landing-feature-mini-points span{
        width:100%;
        justify-content:center;
    }
}

/* v18.91 Landing menu Template: preview blur + bahasa ajakan */
.landing-template-page-v91{
    background:
        radial-gradient(circle at 12% 8%, rgba(37,99,235,.13), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(245,158,11,.15), transparent 30%),
        linear-gradient(180deg,#f8fbff 0%,#f1f6ff 100%);
    min-height:calc(100vh - var(--public-header-height, 88px));
}
.landing-template-showcase{
    width:min(1180px, calc(100vw - 48px));
    margin:0 auto;
    padding:46px 0 58px;
}
.landing-template-hero-v91{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1.04fr) minmax(360px, .96fr);
    gap:22px;
    align-items:stretch;
}
.landing-template-hero-v91::before{
    content:"";
    position:absolute;
    inset:18px 12% auto auto;
    width:320px;
    height:160px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(37,99,235,.18), rgba(245,158,11,.14));
    filter:blur(36px);
    pointer-events:none;
}
.landing-template-hero-v91__copy,
.landing-template-hero-v91__preview,
.landing-template-intro-v91,
.landing-template-bottom-v91{
    position:relative;
    z-index:1;
    border:1px solid rgba(226,232,240,.9);
    border-radius:30px;
    background:rgba(255,255,255,.88);
    box-shadow:0 24px 70px rgba(15,23,42,.08);
    backdrop-filter:blur(14px);
}
.landing-template-hero-v91__copy{
    padding:34px;
}
.landing-template-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:32px;
    padding:0 13px;
    border-radius:999px;
    background:linear-gradient(135deg,#eaf1ff,#fff7ed);
    color:#1d4ed8;
    font-size:12px;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.landing-template-eyebrow svg{
    width:17px;
    height:17px;
}
.landing-template-eyebrow--soft{
    background:#eef6ff;
}
.landing-template-hero-v91 h1{
    margin:16px 0 12px;
    max-width:780px;
    color:#0b1e4b;
    font-size:44px;
    line-height:1.1;
    letter-spacing:-1.1px;
}
.landing-template-hero-v91 p,
.landing-template-intro-v91 p,
.landing-template-bottom-v91 p{
    margin:0;
    color:#64748b;
    line-height:1.72;
}
.landing-template-actions-v91,
.landing-template-bottom-v91__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}
.landing-template-points-v91{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}
.landing-template-points-v91 span{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(37,99,235,.12);
    color:#0f172a;
    font-size:13px;
    font-weight:900;
    box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.landing-template-hero-v91__preview{
    min-height:348px;
    padding:28px;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,.42), transparent 28%),
        linear-gradient(135deg, rgba(11,30,75,.97), rgba(37,99,235,.88));
}
.template-preview-stack{
    position:absolute;
    width:215px;
    height:286px;
    border-radius:24px;
    background:#fff;
    padding:13px;
    box-shadow:0 28px 70px rgba(2,6,23,.30);
    transform:rotate(-8deg);
}
.template-preview-stack--one{
    top:34px;
    left:36px;
}
.template-preview-stack--two{
    right:36px;
    bottom:34px;
    transform:rotate(8deg);
}
.landing-template-lock-note{
    position:absolute;
    left:50%;
    top:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:min(245px, 76%);
    min-height:126px;
    padding:18px;
    transform:translate(-50%, -50%);
    border-radius:24px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.35);
    text-align:center;
    box-shadow:0 20px 50px rgba(2,6,23,.22);
}
.landing-template-lock-note svg{
    width:26px;
    height:26px;
    color:#1d4ed8;
}
.landing-template-lock-note strong{
    color:#0b1e4b;
    font-size:16px;
}
.landing-template-lock-note small{
    color:#64748b;
    font-weight:800;
}
.landing-template-intro-v91{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-top:20px;
    padding:24px;
}
.landing-template-intro-v91 h2{
    margin:12px 0 8px;
    color:#0b1e4b;
    font-size:30px;
    line-height:1.2;
}
.landing-template-mini-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:0 18px;
    border-radius:999px;
    background:#0b1e4b;
    color:#fff;
    font-weight:950;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 16px 34px rgba(11,30,75,.20);
}
.landing-template-mini-cta svg{
    width:18px;
    height:18px;
}
.landing-template-gallery-v91{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    margin-top:20px;
}
.landing-template-card-v91{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(226,232,240,.96);
    border-radius:26px;
    background:#fff;
    box-shadow:0 18px 48px rgba(15,23,42,.075);
}
.landing-template-card-v91::before{
    content:"";
    position:absolute;
    inset:auto -26px -46px auto;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
}
.landing-template-card-v91__badge{
    position:absolute;
    z-index:2;
    top:14px;
    left:14px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,255,255,.88);
    color:#0b1e4b;
    font-size:12px;
    font-weight:950;
    box-shadow:0 10px 22px rgba(15,23,42,.12);
}
.landing-template-card-v91__badge svg{
    width:15px;
    height:15px;
}
.landing-template-card-v91__thumb{
    min-height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:42px 20px 20px;
    background:linear-gradient(135deg,#f8fbff,#eef4ff);
}
.landing-template-card-v91--gold .landing-template-card-v91__thumb{background:linear-gradient(135deg,#fff7ed,#fef3c7);}
.landing-template-card-v91--creative .landing-template-card-v91__thumb{background:linear-gradient(135deg,#f5f3ff,#ffedd5);}
.landing-template-card-v91--minimal .landing-template-card-v91__thumb{background:linear-gradient(135deg,#f8fafc,#eef2f7);}
.landing-template-card-v91--formal .landing-template-card-v91__thumb{background:linear-gradient(135deg,#eff6ff,#ffffff);}
.landing-template-card-v91--admin .landing-template-card-v91__thumb{background:linear-gradient(135deg,#f8fafc,#f1f5f9);}
.landing-template-card-v91__body{
    position:relative;
    z-index:1;
    padding:16px 18px 18px;
}
.landing-template-card-v91__body strong{
    display:block;
    color:#0f172a;
    font-size:18px;
    margin-bottom:4px;
}
.landing-template-card-v91__body p{
    margin:0;
    color:#64748b;
    font-weight:800;
    font-size:13px;
}
.blur-doc-mini,
.blur-letter-mini{
    position:relative;
    width:150px;
    height:198px;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(226,232,240,.92);
    box-shadow:0 16px 34px rgba(15,23,42,.13);
    filter:blur(1.2px);
    opacity:.82;
}
.landing-template-card-v91:hover .blur-doc-mini,
.landing-template-card-v91:hover .blur-letter-mini{
    filter:blur(.6px);
    opacity:.9;
}
.blur-doc-mini::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:45px;
    background:#2563eb;
}
.blur-doc-mini i{
    position:absolute;
    top:18px;
    left:12px;
    width:25px;
    height:25px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
}
.blur-doc-mini b{
    position:absolute;
    top:22px;
    left:58px;
    width:70px;
    height:12px;
    border-radius:999px;
    background:#0f172a;
}
.blur-doc-mini em,
.blur-doc-mini span{
    position:absolute;
    left:58px;
    right:15px;
    border-radius:999px;
    background:#cbd5e1;
}
.blur-doc-mini em{top:48px;height:7px;box-shadow:0 19px 0 #dbe3ef, 0 38px 0 #dbe3ef, 0 57px 0 #dbe3ef;}
.blur-doc-mini span{top:126px;height:8px;box-shadow:0 18px 0 #dbe3ef, 0 36px 0 #dbe3ef;}
.blur-doc-mini--gold::before{background:#0f172a;}
.blur-doc-mini--gold b{background:#b45309;}
.blur-doc-mini--creative::before{background:linear-gradient(180deg,#7c3aed,#f97316);}
.blur-doc-mini--creative b{background:#7c3aed;}
.blur-doc-mini--minimal::before{background:#e2e8f0;}
.blur-doc-mini--minimal b{background:#334155;}
.blur-letter-mini{
    width:158px;
    height:205px;
    padding:18px;
}
.blur-letter-mini::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:42px;
    background:linear-gradient(135deg,#2563eb,#93c5fd);
}
.blur-letter-mini i,
.blur-letter-mini b,
.blur-letter-mini em,
.blur-letter-mini span{
    position:absolute;
    left:22px;
    right:22px;
    border-radius:999px;
    background:#cbd5e1;
}
.blur-letter-mini i{top:58px;height:10px;background:#0f172a;}
.blur-letter-mini b{top:82px;height:8px;box-shadow:0 18px 0 #dbe3ef, 0 36px 0 #dbe3ef, 0 54px 0 #dbe3ef;}
.blur-letter-mini em{top:158px;height:8px;width:58%;}
.blur-letter-mini span{top:178px;height:8px;width:42%;}
.blur-letter-mini--admin::before{background:linear-gradient(135deg,#0f172a,#64748b);}
.landing-template-bottom-v91{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-top:20px;
    padding:24px;
    background:
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg,#0b1e4b,#2563eb);
    color:#fff;
}
.landing-template-bottom-v91 strong{
    display:block;
    color:#fff;
    font-size:22px;
    margin-bottom:8px;
}
.landing-template-bottom-v91 p{
    color:rgba(255,255,255,.85);
}
.landing-template-bottom-v91 .ats-btn--ghost{
    background:#fff;
    border-color:#fff;
    color:#1d4ed8;
}
@media(max-width:980px){
    .landing-template-hero-v91,
    .landing-template-gallery-v91{
        grid-template-columns:1fr 1fr;
    }
    .landing-template-hero-v91__copy,
    .landing-template-hero-v91__preview{
        grid-column:1 / -1;
    }
    .landing-template-intro-v91,
    .landing-template-bottom-v91{
        align-items:flex-start;
        flex-direction:column;
    }
}
@media(max-width:720px){
    .landing-template-showcase{
        width:100%;
        padding:28px 16px 42px;
    }
    .landing-template-hero-v91,
    .landing-template-gallery-v91{
        grid-template-columns:1fr;
    }
    .landing-template-hero-v91__copy,
    .landing-template-hero-v91__preview,
    .landing-template-intro-v91,
    .landing-template-bottom-v91{
        border-radius:24px;
        padding:22px;
    }
    .landing-template-hero-v91 h1{
        font-size:31px;
    }
    .landing-template-hero-v91__preview{
        min-height:310px;
    }
    .template-preview-stack{
        width:178px;
        height:244px;
    }
    .template-preview-stack--one{left:14px;}
    .template-preview-stack--two{right:14px;}
    .landing-template-mini-cta,
    .landing-template-actions-v91 .ats-btn,
    .landing-template-bottom-v91 .ats-btn{
        width:100%;
    }
    .landing-template-points-v91 span{
        width:100%;
        justify-content:center;
    }
}

/* v18.93 - Traffic admin compact professional */
.traffic-v93{padding:18px 18px 44px;background:linear-gradient(180deg,#eef5ff 0%,#f8fafc 34%,#ffffff 100%)}
.traffic-v93-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #dbeafe;background:linear-gradient(135deg,#0b1e4b,#1d4ed8);border-radius:28px;padding:24px 26px;color:#fff;box-shadow:0 26px 70px rgba(37,99,235,.22)}
.traffic-v93-hero h1{margin:8px 0 8px;font-size:34px;line-height:1.05;letter-spacing:-.04em;color:#fff}
.traffic-v93-hero p{margin:0;color:#dbeafe;font-size:14px;line-height:1.6;font-weight:750;max-width:760px}
.traffic-v93 .traffic-kicker{background:rgba(255,255,255,.16);color:#dbeafe;border:1px solid rgba(255,255,255,.18)}
.traffic-v93-hero__right{min-width:180px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.12);border-radius:22px;padding:16px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.traffic-v93-hero__right span,.traffic-v93-hero__right small{display:block;color:#dbeafe;font-weight:850}.traffic-v93-hero__right strong{display:block;font-size:42px;line-height:1;color:#fff;margin:4px 0}
.traffic-v93-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:14px 0}.traffic-v93-kpis article{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:15px;box-shadow:0 12px 32px rgba(15,23,42,.06)}.traffic-v93-kpis span{display:block;color:#64748b;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}.traffic-v93-kpis strong{display:block;color:#0f172a;font-size:25px;margin-top:5px;line-height:1}.traffic-v93-kpis small{display:block;color:#64748b;font-size:11px;font-weight:800;margin-top:8px;line-height:1.35}
.traffic-v93-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}.traffic-v93-chart{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:16px;box-shadow:0 18px 45px rgba(15,23,42,.07);overflow:hidden}.traffic-v93-chart__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.traffic-v93-chart h2{margin:0;color:#0f172a;font-size:17px}.traffic-v93-chart p{margin:3px 0 0;color:#64748b;font-size:12px;line-height:1.45;font-weight:750}.traffic-v93-chart__head strong{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:34px;border-radius:14px;background:#eff6ff;color:#1d4ed8;font-size:18px}.traffic-v93-bars{height:132px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end}.traffic-v93-bar-item{height:100%;display:grid;grid-template-rows:1fr auto;gap:7px;text-align:center}.traffic-v93-bar-track{height:100%;border-radius:12px;background:#f1f5f9;display:flex;align-items:end;justify-content:center;overflow:hidden}.traffic-v93-bar-track span{width:100%;min-height:6%;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#60a5fa,#2563eb);display:flex;align-items:flex-start;justify-content:center;padding-top:4px;transition:.2s ease}.traffic-v93-bar-track b{font-size:10px;color:#fff;line-height:1}.traffic-v93-bar-item small{font-size:10px;color:#64748b;font-weight:850}.traffic-v93-chart--green .traffic-v93-bar-track span{background:linear-gradient(180deg,#86efac,#16a34a)}.traffic-v93-chart--gold .traffic-v93-bar-track span{background:linear-gradient(180deg,#fde68a,#d97706)}
.traffic-v93-card{border-radius:22px;box-shadow:0 18px 45px rgba(15,23,42,.06)}.traffic-v93-card--tight{padding:18px;margin-top:14px}.traffic-v93-head{margin-bottom:12px}.traffic-v93-head h2{font-size:20px;margin:0 0 4px}.traffic-v93-head p{font-size:13px;line-height:1.5;max-width:760px}.traffic-v93-table-wrap{border:1px solid #e2e8f0;border-radius:16px;overflow:auto;background:#fff}.traffic-v93-table-wrap--wide{max-height:560px}.traffic-v93-table{font-size:12px}.traffic-v93-table th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#334155;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px}.traffic-v93-table td{padding:10px 12px;vertical-align:middle}.traffic-v93-user-table{min-width:1060px}.traffic-v93-user-table tbody tr:hover{background:#f8fafc}.traffic-v93-mini-stack{display:grid;gap:3px;min-width:116px;color:#64748b;font-size:11px;font-weight:800;line-height:1.35}.traffic-v93-mini-stack b{color:#0f172a;font-size:13px}.traffic-v93-mini-stack span{display:block}.traffic-v93-warning{color:#92400e!important;background:#fef3c7;border-radius:999px;padding:3px 7px;width:max-content}.traffic-v93-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:128px}.traffic-v93-actions form{margin:0}.traffic-v93-actions button{width:auto;min-height:32px;padding:7px 10px;border-radius:10px;font-size:11px;white-space:nowrap}.traffic-v93 .traffic-light-btn,.traffic-v93 .traffic-danger-btn{font-weight:950}.traffic-v93 .traffic-user-subline{font-size:10.5px;font-weight:750}.traffic-v93 .traffic-pill{padding:6px 9px;font-size:11px;border:1px solid transparent}
.traffic-v93-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.traffic-v93-split-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.traffic-v93-split-list h3{margin:0 0 8px;color:#0f172a;font-size:14px}.traffic-v93 .traffic-mini-list{gap:7px}.traffic-v93 .traffic-mini-list div{padding:9px 10px;border-radius:13px}.traffic-v93 .traffic-mini-list span{font-size:12px}.traffic-v93 .traffic-mini-list strong{font-size:14px}.traffic-v93-details{margin-top:14px}.traffic-v93-details>summary{cursor:pointer;font-weight:950;color:#0f172a}.traffic-v93-details-grid{align-items:start}.traffic-v93-details section{min-width:0}.traffic-v93-details h2{font-size:16px;margin:10px 0}.traffic-v93-storage{margin-top:14px;border:1px dashed #cbd5e1;border-radius:16px;padding:12px;background:#f8fafc}.traffic-v93-storage>summary{cursor:pointer;font-weight:950;color:#334155}.traffic-v93 .traffic-health-grid{margin-top:10px}
@media(max-width:1180px){.traffic-v93-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.traffic-v93-chart-grid{grid-template-columns:1fr}.traffic-v93-bars{height:116px}.traffic-v93-two-col{grid-template-columns:1fr}.traffic-v93-split-list{grid-template-columns:1fr}}
@media(max-width:720px){.traffic-v93{padding:12px 10px 34px}.traffic-v93-hero{display:block;border-radius:22px;padding:20px}.traffic-v93-hero h1{font-size:28px}.traffic-v93-hero__right{margin-top:14px}.traffic-v93-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.traffic-v93-kpis article{padding:12px;border-radius:16px}.traffic-v93-kpis strong{font-size:20px}.traffic-v93-card--tight{padding:14px;border-radius:18px}.traffic-v93-chart{padding:14px;border-radius:18px}.traffic-v93-actions{display:grid}.traffic-v93-actions button{width:100%}.traffic-v93-split-list{grid-template-columns:1fr}.traffic-v93-table th:nth-child(n+5),.traffic-v93-table td:nth-child(n+5){display:table-cell}.traffic-v93-user-table{min-width:900px}}

/* v18.94 - Maintenance mode admin toggle */
.traffic-v93-maintenance{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:14px;
    padding:18px;
    border:1px solid #e2e8f0;
    background:#ffffff;
}
.traffic-v93-maintenance.is-active{
    border-color:#fecaca;
    background:linear-gradient(135deg,#fff7ed,#ffffff 58%,#fee2e2);
}
.traffic-v93-maintenance__text h2{
    margin:6px 0 5px;
    color:#0f172a;
    font-size:20px;
}
.traffic-v93-maintenance__text p{
    margin:0;
    color:#475569;
    font-size:13px;
    font-weight:800;
    line-height:1.55;
}
.traffic-v93-maintenance__text small{
    display:block;
    margin-top:8px;
    color:#64748b;
    font-size:11px;
    font-weight:800;
}
.traffic-v93-maintenance__badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.traffic-v93-maintenance.is-active .traffic-v93-maintenance__badge{
    background:#fee2e2;
    color:#b91c1c;
}
.traffic-v93-maintenance__form{
    flex:0 0 auto;
    margin:0;
}
.traffic-maintenance-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:8px 14px 8px 8px;
    border:1px solid #bfdbfe;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(37,99,235,.12);
}
.traffic-maintenance-toggle span{
    position:relative;
    width:58px;
    height:32px;
    border-radius:999px;
    background:#cbd5e1;
    box-shadow:inset 0 2px 8px rgba(15,23,42,.12);
}
.traffic-maintenance-toggle span::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 5px 12px rgba(15,23,42,.22);
    transition:.2s ease;
}
.traffic-maintenance-toggle.is-on{
    border-color:#fecaca;
    background:#fff1f2;
    color:#b91c1c;
    box-shadow:0 12px 26px rgba(239,68,68,.12);
}
.traffic-maintenance-toggle.is-on span{
    background:#ef4444;
}
.traffic-maintenance-toggle.is-on span::after{
    transform:translateX(26px);
}
.public-maintenance-pill{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 14px;
    border-radius:999px;
    background:#fff7ed;
    color:#b45309;
    border:1px solid #fed7aa;
    font-size:13px;
    font-weight:950;
}
.maintenance-public-body{
    min-height:100vh;
    margin:0;
    background:
        radial-gradient(circle at 18% 16%, rgba(37,99,235,.16), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(245,158,11,.13), transparent 26%),
        linear-gradient(135deg,#eef5ff,#ffffff 45%,#f8fafc);
    color:#0f172a;
}
.maintenance-public-header{
    width:min(1120px, calc(100% - 32px));
    margin:18px auto 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border:1px solid rgba(226,232,240,.9);
    border-radius:24px;
    background:rgba(255,255,255,.86);
    box-shadow:0 18px 45px rgba(15,23,42,.08);
    backdrop-filter:blur(14px);
}
.maintenance-public-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#0b1e4b;
    font-weight:950;
}
.maintenance-public-brand span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,#0b1e4b,#2563eb);
    color:#fff;
    letter-spacing:.04em;
}
.maintenance-public-header nav{
    display:flex;
    align-items:center;
    gap:10px;
}
.maintenance-public-header nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    background:#0b1e4b;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:950;
}
.maintenance-public-main{
    width:min(920px, calc(100% - 32px));
    margin:80px auto 0;
}
.maintenance-public-card{
    position:relative;
    overflow:hidden;
    padding:44px;
    border:1px solid rgba(191,219,254,.9);
    border-radius:34px;
    background:rgba(255,255,255,.92);
    box-shadow:0 30px 90px rgba(15,23,42,.12);
    text-align:center;
}
.maintenance-public-card::before{
    content:"";
    position:absolute;
    inset:-100px -80px auto auto;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(37,99,235,.10);
}
.maintenance-public-icon{
    width:84px;
    height:84px;
    margin:0 auto 16px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#dbeafe,#eff6ff);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 36px rgba(37,99,235,.14);
}
.maintenance-public-icon span{
    width:42px;
    height:42px;
    border-radius:16px;
    background:linear-gradient(135deg,#0b1e4b,#2563eb);
    position:relative;
}
.maintenance-public-icon span::before,
.maintenance-public-icon span::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    height:4px;
    border-radius:999px;
    background:#fff;
}
.maintenance-public-icon span::before{top:13px;}
.maintenance-public-icon span::after{top:24px;}
.maintenance-public-kicker{
    display:inline-flex;
    min-height:30px;
    align-items:center;
    padding:0 12px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.maintenance-public-card h1{
    margin:14px auto 12px;
    max-width:720px;
    color:#0b1e4b;
    font-size:42px;
    line-height:1.06;
    letter-spacing:-.04em;
}
.maintenance-public-card p{
    margin:0 auto;
    max-width:660px;
    color:#475569;
    font-size:16px;
    font-weight:800;
    line-height:1.7;
}
.maintenance-public-actions{
    margin-top:24px;
    display:flex;
    justify-content:center;
}
.maintenance-public-actions .btn{
    min-width:160px;
}
.maintenance-public-note{
    display:grid;
    gap:4px;
    margin:24px auto 0;
    max-width:560px;
    padding:14px 16px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#64748b;
    font-size:13px;
    font-weight:800;
}
.maintenance-public-note strong{
    color:#0f172a;
}
.maintenance-public-card small{
    display:block;
    margin-top:16px;
    color:#94a3b8;
    font-weight:800;
}
@media(max-width:720px){
    .traffic-v93-maintenance{display:block;padding:16px;border-radius:20px}.traffic-v93-maintenance__form{margin-top:14px}.traffic-maintenance-toggle{width:100%;justify-content:space-between}.maintenance-public-header{border-radius:20px}.maintenance-public-main{margin-top:42px}.maintenance-public-card{padding:30px 20px;border-radius:26px}.maintenance-public-card h1{font-size:31px}.maintenance-public-header nav a{min-height:38px;padding:0 12px}.maintenance-public-brand strong{display:none}
}

/* v18.95 - Maintenance public page: bigger, friendly, non-technical */
.maintenance-public-main{
    width:min(1080px, calc(100% - 32px));
    margin:72px auto 0;
}
.maintenance-public-card{
    padding:74px 82px;
    border-radius:38px;
    min-height:430px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.maintenance-public-card::before{
    width:360px;
    height:360px;
    inset:-120px -90px auto auto;
    background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(219,234,254,.38));
}
.maintenance-public-icon{
    width:110px;
    height:110px;
    border-radius:34px;
    margin-bottom:22px;
}
.maintenance-public-icon span{
    width:54px;
    height:54px;
    border-radius:20px;
}
.maintenance-public-icon span::before{top:17px;left:13px;right:13px;height:5px;}
.maintenance-public-icon span::after{top:31px;left:13px;right:13px;height:5px;}
.maintenance-public-kicker{
    min-height:34px;
    padding:0 16px;
    font-size:13px;
}
.maintenance-public-card h1{
    max-width:860px;
    margin:18px auto 16px;
    font-size:58px;
    line-height:1.02;
}
.maintenance-public-card p{
    max-width:780px;
    font-size:20px;
    line-height:1.65;
    color:#334155;
}
.maintenance-public-actions{
    margin-top:32px;
}
.maintenance-public-actions .btn{
    min-width:190px;
    min-height:52px;
    border-radius:16px;
    font-size:15px;
}
.maintenance-public-note,
.maintenance-public-card small{
    display:none!important;
}
.traffic-v93-maintenance__form button[name="enabled"]{
    position:relative;
}
@media(max-width:720px){
    .maintenance-public-main{margin-top:38px;width:min(100% - 24px, 1080px)}
    .maintenance-public-card{padding:42px 22px;min-height:390px;border-radius:28px}
    .maintenance-public-icon{width:88px;height:88px;border-radius:28px}
    .maintenance-public-card h1{font-size:38px;line-height:1.08}
    .maintenance-public-card p{font-size:16px;line-height:1.65}
    .maintenance-public-actions .btn{width:100%;min-width:0}
}


/* v18.98 - Maintenance toggle switch position fix */
.traffic-v93-maintenance__form{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.traffic-maintenance-toggle{
    position:relative;
    user-select:none;
}
.traffic-maintenance-toggle input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    pointer-events:none;
}
.traffic-maintenance-toggle span::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:999px;
    border:2px solid transparent;
    transition:.2s ease;
}
.traffic-maintenance-toggle input:focus-visible + span::before{
    border-color:#2563eb;
}
.traffic-maintenance-toggle b{
    min-width:72px;
    text-align:left;
}
.traffic-maintenance-toggle:not(.is-on) b{
    color:#1d4ed8;
}
.traffic-maintenance-toggle.is-on b{
    color:#b91c1c;
}
.traffic-v93-maintenance.is-active .traffic-maintenance-toggle span::after{
    transform:translateX(26px);
}
@media(max-width:720px){
    .traffic-v93-maintenance__form{align-items:stretch}
    .traffic-maintenance-toggle{width:100%;justify-content:space-between}
}

/* v18.99 - lupa password */
.password-reset-note{
    margin:-6px 0 0;
    padding:12px 14px;
    border:1px solid rgba(37,99,235,.14);
    border-radius:14px;
    background:#eff6ff;
    color:#475569;
    font-size:14px;
    line-height:1.5;
    font-weight:700;
}
.forgot-password-form .gold-login-btn{
    margin-top:2px;
}
.traffic-v93-hero__right em{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:8px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-style:normal;
    font-size:12px;
    font-weight:800;
}

/* v19.03 - Maintenance toggle animation in Admin > Analisis User */
.traffic-maintenance-toggle{
    position:relative;
    user-select:none;
    transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease,transform .22s ease;
}
.traffic-maintenance-toggle input[type="checkbox"]{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:pointer;
    z-index:3;
    pointer-events:auto;
}
.traffic-maintenance-toggle span{
    flex:0 0 auto;
    transition:background .24s ease,box-shadow .24s ease;
}
.traffic-maintenance-toggle span::after{
    transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease;
}
.traffic-maintenance-toggle input[type="checkbox"]:checked + span{
    background:#ef4444;
}
.traffic-maintenance-toggle input[type="checkbox"]:checked + span::after{
    transform:translateX(26px);
}
.traffic-maintenance-toggle input[type="checkbox"]:focus-visible + span{
    outline:3px solid rgba(37,99,235,.28);
    outline-offset:3px;
}
.traffic-maintenance-toggle.is-saving{
    opacity:.82;
    pointer-events:none;
    transform:scale(.985);
}
.traffic-maintenance-toggle.is-saving span::after{
    box-shadow:0 8px 18px rgba(15,23,42,.28);
}
.traffic-maintenance-toggle input[type="checkbox"]:disabled{
    cursor:wait;
}
.traffic-maintenance-toggle input[type="checkbox"]:checked + span::after,
.traffic-maintenance-toggle.is-on span::after{
    transform:translateX(26px);
}
.traffic-v93-maintenance{
    transition:background .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.traffic-v93-maintenance__badge{
    transition:background .24s ease,color .24s ease;
}

/* v19.06 - Maintenance toggle: posisi kanan/kiri dipaksa dari data-state agar tidak mental balik */
.traffic-maintenance-toggle[data-state="off"] span::after,
.traffic-maintenance-toggle.is-off span::after{
    transform:translateX(0)!important;
}
.traffic-maintenance-toggle[data-state="on"] span,
.traffic-maintenance-toggle.is-on span,
.traffic-maintenance-toggle input[type="checkbox"]:checked + span{
    background:#ef4444!important;
}
.traffic-maintenance-toggle[data-state="on"] span::after,
.traffic-maintenance-toggle.is-on span::after,
.traffic-maintenance-toggle input[type="checkbox"]:checked + span::after{
    transform:translateX(26px)!important;
}
.traffic-maintenance-toggle em[data-maintenance-status]{
    display:block;
    min-width:126px;
    color:#64748b;
    font-size:11px;
    font-style:normal;
    font-weight:900;
    line-height:1.15;
}
.traffic-maintenance-toggle.is-saving{
    pointer-events:none;
}

/* v19.21 - Layout CV/Surat floating panel, preview tetap terlihat */
.layout-floating-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:26px;
    background:rgba(15,23,42,.46);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    z-index:25000;
}
.layout-floating-modal.is-open{display:flex;}
body.layout-floating-open{overflow:hidden!important;}
.layout-floating-modal__backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:transparent;
    cursor:pointer;
}
.layout-floating-modal__card{
    position:relative;
    width:min(780px, calc(100vw - 34px));
    height:min(760px, calc(100vh - 44px));
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
    border-radius:24px;
    border:1px solid rgba(191,219,254,.92);
    background:#ffffff;
    box-shadow:0 34px 90px rgba(15,23,42,.34);
}
.layout-floating-modal__head{
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 22px;
    background:linear-gradient(135deg,#eff6ff 0%,#ffffff 52%,#eef2ff 100%);
    border-bottom:1px solid #dbeafe;
}
.layout-floating-modal__badge{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 11px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.layout-floating-modal__head h2{
    margin:8px 0 4px;
    font-size:23px;
    font-weight:900;
    color:#0f172a;
}
.layout-floating-modal__head p{
    margin:0;
    color:#475569;
    font-size:14px;
    line-height:1.35;
}
.layout-floating-modal.has-saved .layout-floating-modal__head{
    background:linear-gradient(135deg,#ecfdf5 0%,#ffffff 52%,#eff6ff 100%);
}
.layout-floating-modal__close{
    width:42px;
    height:42px;
    border:1px solid #bfdbfe;
    border-radius:50%;
    background:#ffffff;
    color:#1d4ed8;
    font-size:26px;
    line-height:1;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(37,99,235,.16);
}
.layout-floating-modal__close:hover{
    background:#2563eb;
    color:#ffffff;
    border-color:#2563eb;
}
.layout-floating-modal__frame{
    width:100%;
    height:100%;
    border:0;
    background:#f8fafc;
}
.layout-embedded-body{
    margin:0;
    min-height:100vh;
    background:#f8fafc;
    overflow:auto;
}
.layout-embedded-main{
    min-height:100vh;
    padding:0;
}

/* v21.57 - Guard ketika URL floating layout terbuka langsung, bukan di iframe modal. */
html.layout-floating-standalone,
body.layout-floating-standalone{
    overflow:auto!important;
    background:#f8fafc!important;
}
body.layout-floating-standalone .layout-setting-page--floating{
    max-width:760px!important;
    width:min(760px, calc(100vw - 28px))!important;
    margin:0 auto!important;
    padding:16px!important;
}
body.layout-floating-standalone .layout-setting-page--floating .layout-setting-top{
    max-width:760px!important;
}
body.layout-floating-standalone .layout-setting-page--single .layout-window-grid{
    grid-template-columns:minmax(0, 1fr)!important;
}
body.layout-floating-standalone .layout-window-card{
    border-radius:18px!important;
    box-shadow:0 18px 46px rgba(15,23,42,.12)!important;
}
body.layout-floating-standalone .layout-sticky-actions--floating{
    position:sticky!important;
    bottom:0!important;
    justify-content:center!important;
    background:linear-gradient(180deg, rgba(248,250,252,0), #f8fafc 35%)!important;
}
.layout-setting-page--floating{
    max-width:none!important;
    width:100%;
    padding:18px!important;
    margin:0!important;
}
.layout-setting-page--floating .layout-setting-top{
    max-width:none!important;
    align-items:flex-start;
    margin-bottom:12px;
}
.layout-setting-page--floating .layout-setting-top h1{
    font-size:22px;
}
.layout-setting-page--floating .layout-setting-top p{
    max-width:none;
    font-size:14px;
}
.layout-floating-saved-note{
    display:inline-flex;
    align-items:center;
    margin-top:10px;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    font-weight:800;
    font-size:13px;
}
.layout-setting-page--single .layout-window-grid{
    max-width:none!important;
    margin:0!important;
    grid-template-columns:minmax(0,1fr)!important;
}
.layout-setting-page--floating .layout-window-card{
    border-radius:18px;
    overflow:hidden!important;
}
.layout-setting-page--floating .layout-window-body{
    max-height:none!important;
    padding:20px 22px 18px;
}
.layout-setting-page--floating .layout-window-body h2{
    font-size:20px;
    margin-bottom:8px;
}
.layout-setting-page--floating .layout-subtitle{
    text-align:left;
    max-width:none;
    margin-bottom:18px;
}
.layout-setting-page--floating .layout-combo-row{
    margin-bottom:13px;
}
.layout-setting-page--floating .layout-combo-row select{
    min-height:48px;
}
.layout-sticky-actions--floating{
    position:sticky!important;
    bottom:0;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:14px 0 0!important;
    background:linear-gradient(180deg,rgba(248,250,252,0),#f8fafc 42%)!important;
}
@media (max-width: 760px){
    .layout-floating-modal{padding:10px;align-items:stretch;}
    .layout-floating-modal__card{width:100%;height:calc(100vh - 20px);border-radius:18px;}
    .layout-floating-modal__head{min-height:78px;padding:14px 16px;}
    .layout-floating-modal__head h2{font-size:19px;}
    .layout-setting-page--floating{padding:12px!important;}
}


/* v19.22 - Setting layout jadi panel kiri; preview tetap terlihat di kanan */
.layout-floating-modal{
    align-items:stretch!important;
    justify-content:flex-start!important;
    padding:0!important;
    background:linear-gradient(90deg,rgba(15,23,42,.28) 0%,rgba(15,23,42,.10) 42%,rgba(15,23,42,.04) 100%)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
.layout-floating-modal__backdrop{
    left:min(560px, 46vw)!important;
    right:0!important;
    top:0!important;
    bottom:0!important;
    width:auto!important;
    background:transparent!important;
}
.layout-floating-modal__card{
    width:min(560px, 46vw)!important;
    max-width:560px!important;
    min-width:430px!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0 28px 28px 0!important;
    border:0!important;
    border-right:1px solid rgba(191,219,254,.96)!important;
    box-shadow:18px 0 54px rgba(15,23,42,.28)!important;
}
.layout-floating-modal__head{
    min-height:96px!important;
    align-items:flex-start!important;
    padding:18px 20px!important;
}
.layout-floating-modal__frame{background:#f8fafc!important;}
.layout-floating-modal__preview-note{
    position:fixed;
    top:18px;
    left:calc(min(560px, 46vw) + 20px);
    z-index:1;
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    border:1px solid #bfdbfe;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
    box-shadow:0 12px 30px rgba(15,23,42,.12);
    pointer-events:none;
}
.cv-template-toolbar-link,
.letter-template-preview-link{
    font-weight:900!important;
    color:#1d4ed8!important;
    border-color:#2563eb!important;
    background:#eff6ff!important;
}
.cv-template-toolbar-link:hover,
.letter-template-preview-link:hover{
    color:#fff!important;
    background:#2563eb!important;
}
@media (max-width: 900px){
    .layout-floating-modal__card{width:100%!important;max-width:none!important;min-width:0!important;border-radius:0!important;}
    .layout-floating-modal__backdrop,.layout-floating-modal__preview-note{display:none!important;}
}

/* v19.23 - Setting layout dikunci untuk KarirRapi Plus */
.cv-layout-toolbar-link--locked,
.letter-layout-preview-link--locked,
.letter-layout-locked{
    background:linear-gradient(135deg,#fff7ed,#fffbeb)!important;
    border-color:#fed7aa!important;
    color:#9a3412!important;
    font-weight:900!important;
}
.cv-layout-toolbar-link--locked:hover,
.letter-layout-preview-link--locked:hover,
.letter-layout-locked:hover{
    background:linear-gradient(135deg,#ffedd5,#fef3c7)!important;
    border-color:#fb923c!important;
    color:#7c2d12!important;
    transform:translateY(-1px);
}

/* v19.25 Bootstrap bridge
   Bootstrap 5 dimuat sebelum CSS custom. Bagian ini memastikan navbar custom tetap dominan. */
.app-header.navbar,
.public-site-header.navbar{
    padding:0;
}
.app-header .container-fluid,
.public-site-header .container-fluid{
    width:100%;
}
.app-nav .nav-link,
.public-main-nav .nav-link{
    text-decoration:none;
}
.app-nav__menu.dropdown-menu{
    border:1px solid #e2e8f0;
}

/* v19.25 - Bootstrap global adapter bridge
   Bootstrap diterapkan ke seluruh layout/page sebagai lapisan UI aman.
   CSS custom lama tetap menjadi identitas utama agar preview/export/function tidak berubah. */
.bootstrap-layout-main{
    width:100%;
}
.bootstrap-page-ready{
    box-sizing:border-box;
}
.bootstrap-ui-enabled .container-fluid{
    max-width:1440px;
}
.bootstrap-ui-enabled .ats-homepage.container-fluid,
.bootstrap-ui-enabled .ats-homepage--landing-only,
.bootstrap-ui-enabled .public-site-header__inner.container-fluid,
.bootstrap-ui-enabled .app-header__inner.container-fluid{
    max-width:none;
}
.bootstrap-ui-enabled .card.page-card,
.bootstrap-ui-enabled .card.tools-card,
.bootstrap-ui-enabled .card.payment-card,
.bootstrap-ui-enabled .card.traffic-card,
.bootstrap-ui-enabled .card.panel-card,
.bootstrap-ui-enabled .card.tool-dialog,
.bootstrap-ui-enabled .card.quickdb-window{
    border-radius:22px;
    background:#fff;
}
.bootstrap-ui-enabled .form-control,
.bootstrap-ui-enabled .form-select{
    border-radius:12px;
    border-color:#dbe3ef;
    min-height:42px;
    box-shadow:none;
}
.bootstrap-ui-enabled textarea.form-control{
    min-height:84px;
}
.bootstrap-ui-enabled .form-control:focus,
.bootstrap-ui-enabled .form-select:focus{
    border-color:#95b400;
    box-shadow:0 0 0 .2rem rgba(149,180,0,.16);
}
.bootstrap-ui-enabled .btn{
    border-radius:12px;
    font-weight:800;
}
.bootstrap-ui-enabled .btn-primary,
.bootstrap-ui-enabled .btn.primary,
.bootstrap-ui-enabled .gold-login-btn.btn{
    background:#95b400;
    border-color:#95b400;
    color:#fff;
}
.bootstrap-ui-enabled .btn-primary:hover,
.bootstrap-ui-enabled .btn.primary:hover,
.bootstrap-ui-enabled .gold-login-btn.btn:hover{
    background:#819b00;
    border-color:#819b00;
    color:#fff;
}
.bootstrap-ui-enabled .btn-outline-secondary{
    border-color:#cbd5e1;
    color:#0f172a;
}
.bootstrap-ui-enabled .table{
    --bs-table-bg:transparent;
    margin-bottom:0;
}
.bootstrap-ui-enabled .table-responsive{
    border-radius:16px;
}
.bootstrap-ui-enabled .alert{
    border-radius:14px;
}
.bootstrap-ui-enabled .dropdown-menu{
    border-radius:16px;
    border-color:#e2e8f0;
    padding:8px;
}
.bootstrap-ui-enabled .dropdown-item{
    border-radius:10px;
    font-weight:700;
}
.bootstrap-ui-enabled .badge{
    font-weight:800;
}
.bootstrap-ui-enabled .row > article,
.bootstrap-ui-enabled .row > section,
.bootstrap-ui-enabled .row > div{
    min-width:0;
}
.bootstrap-ui-enabled .login-split-card.card,
.bootstrap-ui-enabled .maintenance-public-card.card{
    overflow:hidden;
}
.bootstrap-ui-enabled .landing-pricing-grid.row > *,
.bootstrap-ui-enabled .payment-stat-grid.row > *{
    min-width:220px;
}
@media (max-width: 768px){
    .bootstrap-ui-enabled .container-fluid,
    .bootstrap-ui-enabled .bootstrap-page-ready.container-fluid{
        padding-left:14px;
        padding-right:14px;
    }
    .bootstrap-ui-enabled .table-responsive{
        overflow-x:auto;
    }
}

/* v19.26 - Bootstrap safe repair
   Bootstrap tetap aktif, tetapi layout custom ATS tidak boleh dipaksa berubah oleh class Bootstrap. */
body.auth-body .site-footer--auth{
    display:none !important;
}

/* Header workspace dirapikan ulang agar tidak turun dua baris di desktop. */
.app-header{
    position:sticky !important;
    top:0 !important;
    z-index:120 !important;
    padding:0 !important;
}
.app-header__inner{
    width:100% !important;
    max-width:1540px !important;
    min-height:86px !important;
    margin:0 auto !important;
    padding:0 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    flex-wrap:nowrap !important;
}
.app-brand{
    flex:0 0 auto !important;
    min-width:220px !important;
    width:auto !important;
    gap:12px !important;
}
.app-brand__mark{
    width:54px !important;
    height:54px !important;
    border-radius:18px !important;
}
.app-brand__text strong{
    font-size:26px !important;
    white-space:nowrap !important;
}
.app-nav{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
}
.app-nav > a,
.app-nav > .app-nav__dropdown > button{
    min-height:42px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    font-size:14px !important;
    line-height:1 !important;
    white-space:nowrap !important;
}
.app-nav__dropdown{
    flex:0 0 auto !important;
}
.app-nav__menu{
    z-index:9999 !important;
}
.app-header__actions{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    width:auto !important;
}
.app-header__actions .btn.small,
.user-pill{
    min-height:40px !important;
    font-size:13px !important;
    white-space:nowrap !important;
}
.app-body.with-navbar{
    min-height:calc(100vh - 86px) !important;
}
@media (max-width: 1280px){
    .app-header__inner{
        min-height:82px !important;
        padding:0 18px !important;
        gap:10px !important;
    }
    .app-brand{min-width:190px !important;}
    .app-brand__mark{width:48px !important;height:48px !important;}
    .app-brand__text strong{font-size:23px !important;}
    .app-nav{gap:5px !important;}
    .app-nav > a,
    .app-nav > .app-nav__dropdown > button{
        padding:0 10px !important;
        font-size:13px !important;
    }
    .app-header__actions .btn.small,
    .user-pill{font-size:12px !important;padding-left:12px !important;padding-right:12px !important;}
}
@media (max-width: 1040px){
    .app-header__inner{
        flex-wrap:wrap !important;
        justify-content:flex-start !important;
        padding:12px 16px !important;
    }
    .app-brand{width:100% !important;min-width:0 !important;}
    .app-nav{
        order:3 !important;
        width:100% !important;
        justify-content:flex-start !important;
        overflow-x:auto !important;
        padding-bottom:4px !important;
    }
    .app-header__actions{
        position:absolute !important;
        right:16px !important;
        top:18px !important;
    }
}
@media (max-width: 640px){
    .app-brand__text strong{font-size:20px !important;}
    .app-brand__mark{width:44px !important;height:44px !important;}
    .app-header__actions{
        position:static !important;
        order:2 !important;
        width:100% !important;
        justify-content:flex-start !important;
    }
    .app-nav{order:3 !important;}
}

/* Login/register/forgot password kembali memakai desain custom, bukan override tombol Bootstrap. */
.login-split-card.auth-split-card-compact,
.login-split-card.register-split-card.auth-split-card-compact{
    display:grid !important;
}
.login-page-shell .gold-login-btn{
    background:linear-gradient(135deg, #d4aa2a 0%, #c79812 100%) !important;
    border:0 !important;
    color:#fff !important;
}
.login-page-shell .google-account-btn{
    background:#fff !important;
    color:#0f172a !important;
}

/* Analisis User: pastikan kartu KPI dan grafik kembali menjadi grid custom. */
.traffic-v93-kpis,
.traffic-v93-chart-grid{
    width:100% !important;
}
.traffic-v93-kpis article{
    min-width:0 !important;
}


/* v19.27 - Fix full preview Buat CV setelah Bootstrap.
   CV builder tidak boleh dibatasi container Bootstrap / layout putih kanan. */
body.cv-builder-body{
    overflow:hidden !important;
    background:#d1d5db !important;
}
body.cv-builder-body .app-body.with-navbar{
    height:calc(100vh - 76px) !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#d1d5db !important;
}
body.cv-builder-body .flash{
    position:fixed !important;
    top:auto !important;
    right:18px !important;
    bottom:18px !important;
    left:auto !important;
    transform:none !important;
    width:min(440px, calc(100vw - 36px)) !important;
    max-width:none !important;
    margin:0 !important;
    z-index:2400 !important;
    box-shadow:0 18px 38px rgba(15,23,42,.18) !important;
}
body.cv-builder-body .flash.is-hiding{
    transform:translateY(10px) !important;
}
body.cv-builder-body .cv-builder-python-shell,
body.cv-builder-body .cv-builder-python-shell.container-fluid{
    width:100vw !important;
    max-width:none !important;
    height:calc(100vh - 76px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    grid-template-columns:minmax(360px, 470px) minmax(0, 1fr) !important;
}
body.cv-builder-body .cv-builder-python-shell form{
    min-width:0 !important;
    height:100% !important;
}
body.cv-builder-body .cv-builder-left{
    height:100% !important;
    max-height:none !important;
    overflow:auto !important;
}
body.cv-builder-body .cv-builder-preview-wrap{
    min-width:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
}
body.cv-builder-body .cv-preview-toolbar{
    min-width:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:thin !important;
    flex-wrap:nowrap !important;
}
body.cv-builder-body .cv-preview-toolbar .cv-toolbar-btn,
body.cv-builder-body .cv-preview-toolbar .cv-zoom-box,
body.cv-builder-body .cv-preview-toolbar .cv-page-indicator{
    flex:0 0 auto !important;
}
body.cv-builder-body .cv-preview-viewport{
    width:100% !important;
    height:100% !important;
    overflow:auto !important;
    padding:22px 24px 80px !important;
    background:#d1d5db !important;
}
body.cv-builder-body .cv-preview-stage{
    width:max-content !important;
    min-width:794px !important;
    max-width:none !important;
    margin:0 auto !important;
    transform-origin:top center !important;
}
body.cv-builder-body .cv-builder-python-shell.hide-input-panel{
    grid-template-columns:minmax(0, 1fr) !important;
}
body.cv-builder-body .cv-builder-python-shell.hide-input-panel .cv-preview-viewport{
    overflow:auto !important;
    padding:22px 24px 90px !important;
}
@media (max-width:1320px){
    body.cv-builder-body .app-body.with-navbar,
    body.cv-builder-body .cv-builder-python-shell,
    body.cv-builder-body .cv-builder-python-shell.container-fluid{
        height:calc(100vh - 110px) !important;
    }
    body.cv-builder-body .flash{
        top:auto !important;
        right:16px !important;
        bottom:16px !important;
        width:min(420px, calc(100vw - 32px)) !important;
    }
}
@media (max-width:1100px){
    body.cv-builder-body{
        overflow:auto !important;
    }
    body.cv-builder-body .app-body.with-navbar{
        height:auto !important;
        min-height:calc(100vh - 110px) !important;
        overflow:visible !important;
    }
    body.cv-builder-body .cv-builder-python-shell,
    body.cv-builder-body .cv-builder-python-shell.container-fluid{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        grid-template-columns:1fr !important;
        overflow:visible !important;
    }
    body.cv-builder-body .cv-builder-python-shell.hide-input-panel form{
        display:none !important;
    }
    body.cv-builder-body .cv-preview-viewport{
        min-height:680px !important;
    }
    body.cv-builder-body .flash{
        position:fixed !important;
        top:auto !important;
        right:12px !important;
        bottom:12px !important;
        left:auto !important;
        transform:none !important;
        width:min(420px, calc(100vw - 24px)) !important;
        margin:0 !important;
    }
}
@media (max-width:720px){
    body.cv-builder-body .cv-preview-stage{
        min-width:794px !important;
        margin:0 !important;
    }
}

/* Queue Job - upload/export berat */
.queue-page{max-width:1240px;margin:0 auto;padding:32px 18px 64px;color:#0f172a;}
.queue-hero{display:flex;justify-content:space-between;gap:20px;align-items:stretch;background:linear-gradient(135deg,#0b1d48,#2563eb);border-radius:28px;padding:28px;color:#fff;box-shadow:0 18px 38px rgba(37,99,235,.24);}
.queue-hero h1{margin:8px 0 10px;font-size:clamp(28px,4vw,46px);line-height:1.05;}
.queue-hero p{margin:0;max-width:760px;color:#dbeafe;font-weight:700;}
.queue-eyebrow{display:inline-flex;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:999px;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.queue-driver-card{min-width:230px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px;font-weight:900;}
.queue-driver-card span,.queue-driver-card small{color:#dbeafe;}
.queue-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:14px;margin:18px 0;}
.queue-stat-grid article{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.06);}
.queue-stat-grid span{display:block;font-size:12px;font-weight:900;text-transform:uppercase;color:#64748b;letter-spacing:.04em;}
.queue-stat-grid strong{display:block;margin-top:8px;font-size:32px;color:#0b1d48;}
.queue-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;align-items:center;}
.queue-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:10px 14px;font-weight:900;text-decoration:none;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,.08);}
.queue-btn--primary{background:#2563eb;color:#fff;border-color:#2563eb;}
.queue-btn--download{background:#16a34a;color:#fff;border-color:#16a34a;}
.queue-btn--small{padding:7px 10px;font-size:12px;}
.queue-note-card{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:18px;padding:14px 16px;margin:12px 0 18px;font-weight:800;display:flex;gap:8px;flex-wrap:wrap;}
.queue-note-card code{background:#fff;border:1px solid #fdba74;border-radius:8px;padding:2px 6px;}
.queue-table-card{background:#fff;border:1px solid #e2e8f0;border-radius:26px;box-shadow:0 14px 36px rgba(15,23,42,.07);overflow:hidden;}
.queue-table-head{padding:22px 24px;border-bottom:1px solid #e2e8f0;}
.queue-table-head h2{margin:0 0 6px;font-size:24px;}
.queue-table-head p{margin:0;color:#64748b;font-weight:700;}
.queue-table-wrap{overflow:auto;}
.queue-table{width:100%;border-collapse:collapse;min-width:900px;}
.queue-table th,.queue-table td{padding:14px 16px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top;}
.queue-table th{background:#f8fafc;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:900;}
.queue-table small{color:#64748b;font-weight:700;}
.queue-row-highlight{background:#ecfeff;}
.queue-badge{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;}
.queue-badge--pending{background:#fff7ed;color:#c2410c;}
.queue-badge--processing{background:#eff6ff;color:#1d4ed8;}
.queue-badge--done{background:#dcfce7;color:#15803d;}
.queue-badge--failed{background:#fee2e2;color:#b91c1c;}
.queue-badge--cancelled{background:#e5e7eb;color:#374151;}
.queue-actions{display:flex;gap:8px;flex-wrap:wrap;}
.queue-actions form{margin:0;}
.queue-result-ok{color:#15803d;font-weight:900;}
.queue-result-error{color:#b91c1c;font-weight:800;display:inline-block;max-width:320px;}
.queue-muted,.queue-empty{color:#64748b;font-weight:800;}
.queue-empty{padding:26px;}
@media (max-width:900px){.queue-hero{flex-direction:column}.queue-stat-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.queue-page{padding:20px 12px 48px}}

/* v19.31 - KarirRapi Plus payment flow: QR/rekening muncul setelah klik daftar, bukti upload wajib */
.ats-payment-modal__grid.is-checkout-hidden{grid-template-columns:minmax(0,1fr)}
.ats-payment-modal__grid.is-checkout-hidden .ats-payment-qr-panel{display:none!important}
.ats-payment-request-form{width:100%;display:grid;gap:9px;margin-top:8px;padding:12px;border:1px solid rgba(191,219,254,.28);border-radius:18px;background:rgba(255,255,255,.08);text-align:left}
.ats-payment-request-form label{font-size:13px;font-weight:950;color:#e0f2fe}
.ats-payment-request-form input[type=file],.ats-payment-request-form textarea{width:100%;border:1px solid rgba(191,219,254,.35);border-radius:12px;background:#fff;color:#0f172a;padding:9px 10px;font:inherit;font-size:13px}
.ats-payment-request-form textarea{min-height:62px;resize:vertical}
.ats-payment-status-link{display:inline-flex;justify-content:center;color:#fef08a!important;font-size:13px;font-weight:950;text-decoration:none}
.ats-payment-status-link:hover{text-decoration:underline}

.payment-page--ats-flow{max-width:1280px;margin:0 auto}.payment-hero--ats-flow{background:linear-gradient(135deg,#eff6ff,#ffffff 45%,#fff7ed)}.payment-token-card--expired{background:linear-gradient(145deg,#7f1d1d,#e11d48)}.payment-stat-grid article small{display:block;margin-top:4px;color:#64748b;font-weight:750}.payment-flow-info{display:grid;gap:14px}.payment-flow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.payment-flow-steps div{display:grid;gap:8px;align-content:start;border:1px solid #dbeafe;border-radius:18px;background:linear-gradient(180deg,#fff,#eff6ff);padding:14px}.payment-flow-steps b{width:32px;height:32px;border-radius:999px;background:#2563eb;color:#fff;display:inline-flex;align-items:center;justify-content:center}.payment-flow-steps span{color:#334155;font-weight:850;line-height:1.35}.payment-atsplus-flow-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(340px,1.15fr);gap:18px;align-items:start;border:1px solid #bfdbfe;border-radius:26px;background:linear-gradient(135deg,#fff,#eff6ff);padding:22px}.payment-atsplus-copy{display:grid;gap:10px}.payment-atsplus-copy h3{margin:0;color:#0f172a;font-size:30px;font-weight:950}.payment-atsplus-copy strong{font-size:42px;color:#0b1e4b}.payment-atsplus-copy ul{margin:6px 0 0;padding-left:20px;color:#475569;font-weight:750;line-height:1.6}.payment-start-btn{width:max-content}.payment-checkout-box{display:grid;grid-template-columns:minmax(0,.75fr) 180px;gap:12px;align-items:start;border:1px solid #c7d2fe;border-radius:22px;background:#fff;padding:16px;box-shadow:0 18px 40px rgba(37,99,235,.12)}.payment-checkout-box[hidden]{display:none!important}.payment-bca-box{display:grid;gap:4px;border:1px solid #dbeafe;border-radius:18px;background:linear-gradient(135deg,#0b1e4b,#2563eb);color:#fff;padding:16px}.payment-bca-box span{font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#bfdbfe}.payment-bca-box strong{font-size:28px;color:#fef08a;letter-spacing:.04em}.payment-bca-box small,.payment-bca-box em{color:#dbeafe;font-weight:750}.payment-qris-button{display:grid;gap:6px;justify-items:center;border:1px solid #dbeafe;background:#fff;border-radius:18px;padding:10px;cursor:pointer;color:#1d4ed8;font-weight:900;text-align:center}.payment-qris-button img{width:142px;height:142px;object-fit:contain;border-radius:12px;background:#fff}.payment-proof-field{grid-column:1/-1;display:grid;gap:7px;font-weight:900;color:#0f172a}.payment-proof-field input{width:100%;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc;padding:11px}.payment-proof-field small{color:#64748b;font-weight:700}.payment-checkout-box textarea{grid-column:1/-1;width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:12px;font:inherit;resize:vertical}.payment-checkout-box>.btn{grid-column:1/-1}.payment-checkout-box--mini{grid-template-columns:1fr;box-shadow:none}.payment-bca-box--mini strong{font-size:20px}.payment-qris-button--mini img{width:96px;height:96px}.payment-row-subline{display:block;margin-top:4px;color:#64748b;font-size:12px;font-weight:750}.payment-proof-link{display:inline-flex;border-radius:999px;background:#dbeafe;color:#1d4ed8!important;padding:6px 10px;text-decoration:none;font-weight:950;font-size:12px}.payment-proof-link:hover{background:#bfdbfe}.payment-package.is-checkout-open,.payment-atsplus-flow-card.is-checkout-open{border-color:#2563eb;box-shadow:0 22px 60px rgba(37,99,235,.16)}
@media(max-width:980px){.payment-flow-steps,.payment-atsplus-flow-card,.payment-checkout-box{grid-template-columns:1fr}.payment-start-btn{width:100%}.payment-qris-button img{width:160px;height:160px}.ats-payment-modal__grid{grid-template-columns:1fr}.ats-payment-qr-panel{display:grid}}
.traffic-payment-verify-table th,.traffic-payment-verify-table td{min-width:120px}.traffic-payment-verify-table th:nth-child(8),.traffic-payment-verify-table td:nth-child(8){min-width:220px}.traffic-admin-note-input{width:100%;margin:3px 0}.traffic-proof-link{white-space:nowrap;text-decoration:none!important}

/* v19.32: Landing page React layer. React hanya untuk public landing, tidak menyentuh CV/surat workspace. */
#landingReactRoot{
    display:block;
    width:100%;
}
#landingReactRoot.is-react-mounted .landing-react-fallback{
    display:none;
}
.ats-homepage--react{
    isolation:isolate;
}
.landing-plus-showcase--react{
    cursor:pointer;
    outline:none;
}
.landing-plus-showcase--react:focus-visible{
    box-shadow:0 0 0 4px rgba(37,99,235,.18), 0 26px 60px rgba(15,23,42,.18);
}
.landing-plus-showcase--react .landing-plus-slide{
    pointer-events:none;
}
.landing-plus-showcase--react .landing-plus-showcase__hint{
    color:#1d4ed8;
    background:rgba(219,234,254,.88);
    border-color:rgba(96,165,250,.45);
}
.landing-floating-support--react{
    z-index:60;
}
@media (prefers-reduced-motion: reduce){
    .landing-plus-showcase--react,
    .landing-plus-showcase--react *{
        transition:none !important;
        animation:none !important;
    }
}

/* v19.39 - Preview CV interaktif dibuat lebih rapi dan tidak memakai istilah teknis di UI. */
.cv-preview-react-root{display:none;width:100%;min-width:0;background:#eef2f7;border-bottom:1px solid #cbd5e1;}
.cv-preview-react-root.is-react-mounted{display:block;}
.cv-builder-preview-wrap.is-react-preview-mounted{grid-template-rows:auto minmax(0,1fr)!important;}
.cv-builder-preview-wrap.is-react-preview-mounted .cv-preview-toolbar--fallback{display:none!important;}
.cv-react-preview-shell{display:grid;gap:0;background:linear-gradient(180deg,#f8fafc,#e5edf8);border-bottom:1px solid #cbd5e1;position:relative;z-index:12;}
.cv-react-toolbar{min-height:60px;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 16px;background:linear-gradient(135deg,#f8fafc 0%,#eef6ff 55%,#fff7ed 100%);overflow:hidden;}
.cv-react-toolbar__title{flex:0 0 170px;max-width:170px;min-width:145px;display:grid;gap:1px;line-height:1.12;overflow:hidden;}
.cv-react-toolbar__title span{width:max-content;max-width:100%;border-radius:999px;background:#dbeafe;color:#1d4ed8;padding:3px 8px;font-size:9.5px;font-weight:950;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-react-toolbar__title strong{display:block;color:#0f172a;font-size:18px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-react-toolbar__title small{display:block;color:#64748b;font-size:10.5px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-react-toolbar__actions{min-width:0;flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;gap:7px;overflow-x:auto;overflow-y:hidden;padding:2px 4px 4px 0;scrollbar-width:thin;scrollbar-gutter:stable;}
.cv-react-toolbar__actions::-webkit-scrollbar{height:6px}.cv-react-toolbar__actions::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.cv-react-btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#334155;padding:0 10px;font-size:12px;font-weight:950;text-decoration:none;cursor:pointer;box-shadow:0 6px 14px rgba(15,23,42,.05);white-space:nowrap;}
.cv-react-btn:hover{border-color:#2563eb;color:#1d4ed8;background:#eff6ff;text-decoration:none;}
.cv-react-btn--primary{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 10px 20px rgba(37,99,235,.20);}
.cv-react-btn--primary:hover{background:#1d4ed8;color:#fff;}
.cv-react-btn--template{border-color:#fde68a;background:#fffbeb;color:#92400e;}
.cv-react-btn--soft{background:#f8fafc;color:#475569;}
.cv-react-btn--locked{border-color:#fbbf24;background:#fffbeb;color:#92400e;}
.cv-react-zoom{min-height:36px;display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;border:1px solid #dbeafe;border-radius:13px;background:#fff;padding:3px;box-shadow:0 6px 14px rgba(15,23,42,.05);}
.cv-react-zoom button{min-width:31px;height:28px;border:0;border-radius:9px;background:#eff6ff;color:#1d4ed8;font-weight:950;cursor:pointer;}
.cv-react-zoom button:nth-child(2){min-width:52px;background:#fff;color:#334155;}
.cv-react-inspector{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);gap:14px;padding:12px 16px;border-top:1px solid #dbeafe;background:rgba(255,255,255,.82);}
.cv-react-inspector strong{display:block;color:#0f172a;font-size:15px;font-weight:950;margin-bottom:4px;}
.cv-react-inspector p{margin:0;color:#64748b;font-size:12px;font-weight:750;line-height:1.45;}
.cv-react-preview-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.cv-react-preview-pill{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:6px;border:1px solid #dbeafe;border-radius:999px;background:#fff;padding:7px 10px;color:#334155;box-shadow:0 8px 18px rgba(15,23,42,.04);}
.cv-react-preview-pill b{font-size:15px;color:#1d4ed8;}
.cv-react-preview-pill small{font-size:11px;font-weight:900;color:#64748b;}
.cv-react-preview-pill--total{border-color:#fde68a;background:#fffbeb;}
.cv-react-preview-pill--total b{color:#b45309;}
body.cv-builder-body .cv-builder-preview-wrap.is-react-preview-mounted .cv-preview-viewport{height:100%!important;min-height:0!important;}

/* v20.33 - badge template aktif di pojok kanan header preview CV */
.cv-react-template-badge{margin-left:auto;flex:0 0 210px;max-width:260px;min-width:170px;display:grid;gap:1px;align-content:center;border:1px solid #bfdbfe;background:linear-gradient(135deg,#ffffff 0%,#eff6ff 100%);box-shadow:0 8px 18px rgba(37,99,235,.12);border-radius:16px;padding:7px 12px;color:#0f172a;line-height:1.12;overflow:hidden;}
.cv-react-template-badge small{font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#2563eb;white-space:nowrap;}
.cv-react-template-badge strong{display:block;font-size:13px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-react-template-badge span{font-size:9.5px;font-weight:850;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-toolbar-template-active{margin-left:auto;display:grid;gap:1px;align-content:center;border:1px solid #bfdbfe;background:#eff6ff;border-radius:14px;padding:6px 10px;line-height:1.1;max-width:260px;color:#0f172a;}
.cv-toolbar-template-active small{font-size:8.5px;font-weight:950;text-transform:uppercase;color:#2563eb;letter-spacing:.06em;white-space:nowrap;}
.cv-toolbar-template-active strong{font-size:12px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.letter-toolbar-template-active{margin-left:auto;flex:0 0 210px;max-width:260px;min-width:170px;display:grid;gap:1px;align-content:center;border:1px solid color-mix(in srgb, var(--letter-template-accent, #2563eb) 28%, #bfdbfe);background:linear-gradient(135deg,#ffffff 0%, color-mix(in srgb, var(--letter-template-accent, #2563eb) 10%, #eff6ff) 100%);box-shadow:0 8px 18px color-mix(in srgb, var(--letter-template-accent, #2563eb) 18%, transparent);border-radius:16px;padding:7px 12px;color:#0f172a;line-height:1.12;overflow:hidden;}
.letter-toolbar-template-active small{font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--letter-template-accent, #2563eb);white-space:nowrap;}
.letter-toolbar-template-active strong{display:block;font-size:13px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.letter-toolbar-template-active span{font-size:9.5px;font-weight:850;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:1280px){.cv-react-template-badge{flex-basis:180px;max-width:200px}.cv-react-template-badge strong{font-size:12px}.letter-toolbar-template-active{flex-basis:180px;max-width:200px}.letter-toolbar-template-active strong{font-size:12px}}
@media(max-width:980px){.cv-react-template-badge{width:100%;max-width:none;flex-basis:auto}.cv-toolbar-template-active{width:100%;max-width:none}.letter-toolbar-template-active{width:100%;max-width:none;flex-basis:auto}}

@media(max-width:1280px){.cv-react-toolbar__title{flex-basis:150px;max-width:150px}.cv-react-btn{padding:0 9px;font-size:11.5px}.cv-react-toolbar__actions{gap:6px}}
@media(max-width:980px){.cv-react-toolbar{display:grid;grid-template-columns:1fr;padding:9px 10px}.cv-react-toolbar__title{max-width:100%;min-width:0;display:flex;align-items:center;gap:8px}.cv-react-toolbar__title small{display:none}.cv-react-toolbar__actions{width:100%}.cv-react-inspector{grid-template-columns:1fr}.cv-react-preview-pills{justify-content:flex-start}}
@media(max-width:720px){.cv-react-toolbar__title strong{font-size:16px}.cv-react-toolbar__title span{font-size:9px}.cv-react-btn{min-height:34px;padding:0 9px;font-size:11.5px}.cv-react-inspector{padding:10px}.cv-react-preview-pill{border-radius:14px}}

/* React Admin Dashboard */
.traffic-react-root{display:none;margin:14px 0;}
.traffic-react-root.is-react-mounted{display:block;}
.traffic-react-root.is-react-mounted ~ .traffic-v93-static-kpis,
.traffic-react-root.is-react-mounted ~ .traffic-v93-static-charts{display:none!important;}
.traffic-react-dashboard{border:1px solid #dbeafe;border-radius:26px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);box-shadow:0 24px 65px rgba(15,23,42,.08);padding:18px;color:#0f172a;}
.traffic-react-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;}
.traffic-react-kicker{display:inline-flex;border-radius:999px;background:#dbeafe;color:#1d4ed8;padding:6px 10px;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;}
.traffic-react-head h2{margin:8px 0 5px;font-size:26px;font-weight:950;letter-spacing:-.03em;}
.traffic-react-head p{margin:0;color:#64748b;font-size:13px;line-height:1.5;font-weight:750;max-width:780px;}
.traffic-react-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.traffic-react-tabs button{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:10px 13px;font-weight:950;cursor:pointer;}
.traffic-react-tabs button.is-active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 12px 24px rgba(37,99,235,.20);}
.traffic-react-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.traffic-react-kpi{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.05);overflow:hidden;}
.traffic-react-kpi span{display:block;color:#64748b;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;}
.traffic-react-kpi strong{display:block;margin-top:5px;color:#0f172a;font-size:23px;line-height:1;font-weight:950;white-space:nowrap;}
.traffic-react-kpi small{display:block;margin-top:8px;color:#64748b;font-size:11px;font-weight:850;line-height:1.35;}
.traffic-react-kpi--blue{background:linear-gradient(180deg,#fff,#eff6ff)}.traffic-react-kpi--green{background:linear-gradient(180deg,#fff,#ecfdf5)}.traffic-react-kpi--gold{background:linear-gradient(180deg,#fff,#fffbeb)}.traffic-react-kpi--red{background:linear-gradient(180deg,#fff,#fff1f2)}.traffic-react-kpi--indigo{background:linear-gradient(180deg,#fff,#eef2ff)}.traffic-react-kpi--dark{background:linear-gradient(180deg,#fff,#f8fafc)}
.traffic-react-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.traffic-react-chart{border:1px solid #e2e8f0;border-radius:22px;background:#fff;padding:14px;box-shadow:0 14px 36px rgba(15,23,42,.06);}
.traffic-react-chart__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.traffic-react-chart h3{margin:0;color:#0f172a;font-size:16px;font-weight:950}.traffic-react-chart p{margin:3px 0 0;color:#64748b;font-size:12px;font-weight:750}.traffic-react-chart__head strong{min-width:38px;height:32px;border-radius:14px;background:#eff6ff;color:#1d4ed8;display:inline-flex;align-items:center;justify-content:center;font-size:17px;}
.traffic-react-bars{height:128px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end}.traffic-react-bar{height:100%;display:grid;grid-template-rows:1fr auto;gap:7px;text-align:center}.traffic-react-bar__track{height:100%;border-radius:12px;background:#f1f5f9;display:flex;align-items:end;justify-content:center;overflow:hidden}.traffic-react-bar__track span{width:100%;min-height:6%;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#60a5fa,#2563eb);display:flex;align-items:flex-start;justify-content:center;padding-top:4px}.traffic-react-bar__track b{font-size:10px;color:#fff;line-height:1}.traffic-react-bar small{font-size:10px;color:#64748b;font-weight:850}.traffic-react-chart--green .traffic-react-bar__track span{background:linear-gradient(180deg,#86efac,#16a34a)}.traffic-react-chart--gold .traffic-react-bar__track span{background:linear-gradient(180deg,#fde68a,#d97706)}
.traffic-react-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.traffic-react-list-card{border:1px solid #e2e8f0;border-radius:20px;background:#fff;padding:14px}.traffic-react-list-card h3{margin:0 0 10px;font-size:16px;font-weight:950}.traffic-react-mini-list{display:grid;gap:8px}.traffic-react-mini-list div{display:flex;justify-content:space-between;gap:10px;border:1px solid #f1f5f9;background:#f8fafc;border-radius:13px;padding:9px 10px}.traffic-react-mini-list span{font-size:12px;font-weight:900;color:#334155}.traffic-react-mini-list small{display:block;color:#64748b;font-size:10.5px;margin-top:3px}.traffic-react-mini-list strong{font-size:14px;color:#0f172a}.traffic-react-filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}.traffic-react-filterbar input,.traffic-react-filterbar select{min-height:42px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;padding:0 12px;font:inherit;font-weight:800;color:#0f172a}.traffic-react-filterbar input{flex:1 1 320px}.traffic-react-filterbar span{font-size:12px;color:#64748b;font-weight:900}.traffic-react-table-wrap{border:1px solid #e2e8f0;border-radius:18px;background:#fff;overflow:auto}.traffic-react-table{width:100%;border-collapse:collapse;min-width:980px}.traffic-react-table th,.traffic-react-table td{padding:11px 12px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}.traffic-react-table th{background:#f8fafc;color:#475569;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}.traffic-react-table strong,.traffic-react-table b{display:block;color:#0f172a}.traffic-react-table small{display:block;color:#64748b;font-size:10.5px;font-weight:800;margin-top:3px}.traffic-react-status{display:inline-flex;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:950;background:#e5e7eb;color:#374151}.traffic-react-status.is-admin{background:#dbeafe;color:#1d4ed8}.traffic-react-status.is-plus{background:#dcfce7;color:#15803d}.traffic-react-status.is-free{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}.traffic-react-payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.traffic-react-payment-card,.traffic-react-empty-card{border:1px solid #e2e8f0;border-radius:20px;background:#fff;padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.05)}.traffic-react-empty-card{color:#64748b;font-weight:900}.traffic-react-payment-card__top{display:flex;justify-content:space-between;gap:10px;align-items:center}.traffic-react-badge{display:inline-flex;border-radius:999px;background:#eff6ff;color:#1d4ed8;padding:6px 9px;font-size:11px;font-weight:950}.traffic-react-payment-card__top strong{font-size:18px;color:#0f172a}.traffic-react-payment-card h3{margin:10px 0 4px;color:#0f172a;font-size:17px;font-weight:950}.traffic-react-payment-card p{margin:0 0 4px;color:#475569;font-size:12px;font-weight:850}.traffic-react-payment-card small{display:block;color:#64748b;font-size:11px;font-weight:750;line-height:1.35}.traffic-react-payment-card__links{margin:10px 0}.traffic-react-payment-card__links a,.traffic-react-payment-card__links span{display:inline-flex;border-radius:999px;background:#dbeafe;color:#1d4ed8!important;text-decoration:none;padding:7px 10px;font-size:12px;font-weight:950}.traffic-react-payment-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.traffic-react-payment-actions form{display:grid;gap:7px;margin:0}.traffic-react-payment-actions textarea{width:100%;min-height:54px;border:1px solid #cbd5e1;border-radius:12px;padding:8px 9px;font:inherit;font-size:12px;resize:vertical}.traffic-react-btn{border:0;border-radius:12px;min-height:36px;padding:0 10px;font-weight:950;cursor:pointer}.traffic-react-btn--ok{background:#16a34a;color:#fff}.traffic-react-btn--danger{background:#ef4444;color:#fff}
@media(max-width:1180px){.traffic-react-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.traffic-react-chart-grid,.traffic-react-two-col{grid-template-columns:1fr}.traffic-react-head{display:grid}.traffic-react-tabs{justify-content:flex-start}}
@media(max-width:720px){.traffic-react-dashboard{padding:12px;border-radius:20px}.traffic-react-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.traffic-react-chart{padding:12px}.traffic-react-payment-actions{grid-template-columns:1fr}.traffic-react-head h2{font-size:22px}.traffic-react-tabs button{padding:8px 10px}.traffic-react-bars{height:112px}}


/* v19.37 - Friendly error pages */
.friendly-error-page{
    min-height:calc(100vh - 180px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(24px,4vw,56px);
    background:radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 32%), linear-gradient(180deg,#f8fafc,#eef2f7);
}
.friendly-error-card{
    width:min(760px,100%);
    border-radius:28px;
    padding:clamp(24px,4vw,44px);
    text-align:center;
    background:rgba(255,255,255,.96);
}
.friendly-error-code{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:88px;
    height:44px;
    padding:0 18px;
    border-radius:999px;
    margin-bottom:18px;
    font-weight:900;
    letter-spacing:.14em;
    color:#1d4ed8;
    background:#dbeafe;
}
.friendly-error-card h1{
    margin:0 0 12px;
    font-size:clamp(1.75rem,4vw,2.75rem);
    line-height:1.1;
    color:#0f172a;
}
.friendly-error-message{
    max-width:620px;
    margin:0 auto 20px;
    color:#475569;
    font-size:1.05rem;
    line-height:1.7;
}
.friendly-error-tips{
    margin:20px auto 0;
    padding:18px 20px;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#f8fafc;
    text-align:left;
    max-width:620px;
    color:#334155;
}
.friendly-error-tips strong{display:block;margin-bottom:8px;color:#0f172a;}
.friendly-error-tips ul{margin:0;padding-left:20px;}
.friendly-error-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:24px;
}
.friendly-error-debug{
    width:min(980px,calc(100% - 32px));
    margin:24px auto;
    padding:24px;
    border-radius:20px;
    overflow:auto;
}
.friendly-error-debug pre{white-space:pre-wrap;font-size:.82rem;}
.friendly-maintenance-card .friendly-maintenance-info{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:20px 0;
}
.friendly-maintenance-card .friendly-maintenance-info div{
    border:1px solid rgba(148,163,184,.28);
    background:rgba(255,255,255,.72);
    border-radius:18px;
    padding:14px;
    text-align:left;
}
.friendly-maintenance-card .friendly-maintenance-info strong,
.friendly-maintenance-card .friendly-maintenance-info span{display:block;}
.friendly-maintenance-card .friendly-maintenance-info strong{color:#0f172a;margin-bottom:4px;}
.friendly-maintenance-card .friendly-maintenance-info span{color:#64748b;font-size:.92rem;}
@media (max-width:640px){
    .friendly-error-page{padding:18px;align-items:flex-start;}
    .friendly-error-card{padding:24px 18px;border-radius:22px;}
    .friendly-error-actions{flex-direction:column;}
    .friendly-error-actions .btn{width:100%;}
    .friendly-maintenance-card .friendly-maintenance-info{grid-template-columns:1fr;}
}


/* v19.38 - Header login user dirapikan agar menu tidak menumpuk dengan logo.
   Penyebab sebelumnya: item menu user terlalu banyak dan brand terlalu besar, sehingga pada layar tertentu
   label Profil Pengguna terlihat menempel/menimpa teks KarirRapi. */
.app-header--user .app-header__inner{
    max-width:none !important;
    min-height:72px !important;
    padding:0 22px !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
}
.app-header--user .app-brand{
    flex:0 0 255px !important;
    min-width:255px !important;
    max-width:255px !important;
    width:255px !important;
    overflow:hidden !important;
    gap:10px !important;
}
.app-header--user .app-brand__mark{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    border-radius:15px !important;
}
.app-header--user .app-brand__doc{
    width:28px !important;
    height:34px !important;
    font-size:11px !important;
}
.app-header--user .app-brand__text{
    min-width:0 !important;
    overflow:hidden !important;
}
.app-header--user .app-brand__text strong{
    display:block !important;
    font-size:23px !important;
    line-height:1 !important;
    max-width:185px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.app-header--user .app-nav{
    flex:1 1 auto !important;
    min-width:0 !important;
    justify-content:flex-start !important;
    gap:6px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    flex-wrap:nowrap !important;
    padding:5px 2px !important;
    scrollbar-width:thin !important;
}
.app-header--user .app-nav::-webkit-scrollbar{
    height:5px !important;
}
.app-header--user .app-nav::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.65) !important;
    border-radius:999px !important;
}
.app-header--user .app-nav > a,
.app-header--user .app-nav > .app-nav__dropdown > button{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:12.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
}
.app-header--user .app-nav > a.active,
.app-header--user .app-nav > .app-nav__dropdown > button.active,
.app-header--user .app-nav > a:hover,
.app-header--user .app-nav > .app-nav__dropdown > button:hover{
    transform:none !important;
    box-shadow:0 8px 18px rgba(11,30,75,.12) !important;
}
.app-header--user .app-nav__menu{
    top:46px !important;
    z-index:9999 !important;
}
.app-header--user .app-header__actions{
    flex:0 0 auto !important;
    min-width:0 !important;
    width:auto !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
}
.app-header--user .user-pill{
    max-width:185px !important;
    min-height:38px !important;
    padding:0 12px !important;
    font-size:12px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
}
.app-header--user .app-header__actions .btn.small.danger{
    min-height:38px !important;
    padding:0 16px !important;
    font-size:12px !important;
}
@media (max-width: 1380px){
    .app-header--user .app-header__inner{
        padding:0 14px !important;
        gap:8px !important;
    }
    .app-header--user .app-brand{
        flex-basis:225px !important;
        min-width:225px !important;
        max-width:225px !important;
        width:225px !important;
    }
    .app-header--user .app-brand__mark{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
    }
    .app-header--user .app-brand__text strong{
        font-size:20px !important;
        max-width:165px !important;
    }
    .app-header--user .app-nav{
        gap:4px !important;
    }
    .app-header--user .app-nav > a,
    .app-header--user .app-nav > .app-nav__dropdown > button{
        min-height:36px !important;
        padding:0 9px !important;
        font-size:11.5px !important;
    }
    .app-header--user .user-pill{
        max-width:150px !important;
        font-size:11.5px !important;
    }
    .app-header--user .app-header__actions .btn.small.danger{
        padding:0 13px !important;
    }
}
@media (max-width: 1040px){
    .app-header--user .app-header__inner{
        min-height:96px !important;
        flex-wrap:wrap !important;
        align-items:center !important;
        padding:10px 14px !important;
    }
    .app-header--user .app-brand{
        flex:1 1 auto !important;
        width:auto !important;
        min-width:0 !important;
        max-width:calc(100% - 210px) !important;
    }
    .app-header--user .app-header__actions{
        position:static !important;
        margin-left:auto !important;
        order:2 !important;
    }
    .app-header--user .app-nav{
        order:3 !important;
        width:100% !important;
        flex-basis:100% !important;
        padding-bottom:6px !important;
    }
}
@media (max-width: 640px){
    .app-header--user .app-brand{
        max-width:100% !important;
        flex-basis:100% !important;
    }
    .app-header--user .app-header__actions{
        width:100% !important;
        margin-left:0 !important;
        justify-content:space-between !important;
    }
    .app-header--user .user-pill{
        max-width:calc(100vw - 130px) !important;
    }
}

/* v19.40 - Popup pembayaran KarirRapi Plus lebih mudah dibaca dan tombol lanjut ke Pembayaran Token */
.ats-payment-modal__card{
    width:min(980px,96vw)!important;
    max-height:calc(100vh - 28px)!important;
    overflow:auto!important;
}
.ats-payment-modal__grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,380px)!important;
    gap:18px!important;
    align-items:start!important;
}
.ats-payment-modal__grid.is-checkout-hidden{
    grid-template-columns:minmax(0,720px)!important;
    justify-content:center!important;
}
.ats-payment-modal__content{
    min-height:0!important;
}
.ats-payment-qr-panel{
    justify-items:stretch!important;
    text-align:left!important;
    padding:20px!important;
    gap:11px!important;
}
.ats-payment-qr-panel > span,
.ats-payment-qr-panel > strong,
.ats-payment-qr-panel > p,
.ats-payment-qr-image{
    text-align:center!important;
}
.ats-payment-checkout-intro{
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    font-size:13px!important;
    line-height:1.55!important;
    color:#e0f2fe!important;
    font-weight:800!important;
}
.ats-payment-qr-image{
    width:190px!important;
    min-height:190px!important;
    justify-self:center!important;
}
.ats-payment-qr-image img{
    height:144px!important;
}
.ats-payment-qr-panel p[data-payment-qr-note]{
    font-size:13px!important;
    line-height:1.55!important;
    max-width:100%!important;
}
.ats-payment-request-form{
    display:grid!important;
    width:100%!important;
}
.ats-payment-status-link{
    border-radius:14px!important;
    background:rgba(254,240,138,.16)!important;
    border:1px solid rgba(254,240,138,.28)!important;
    color:#fef08a!important;
    min-height:40px!important;
    align-items:center!important;
    text-align:center!important;
    padding:8px 10px!important;
}
.ats-payment-modal__actions .btn[data-payment-reveal-checkout][data-payment-revealed="1"]{
    background:#95b400!important;
    color:#fff!important;
    border-color:#95b400!important;
}
@media(max-width:860px){
    .ats-payment-modal__grid,
    .ats-payment-modal__grid.is-checkout-hidden{
        grid-template-columns:1fr!important;
    }
    .ats-payment-qr-panel{
        text-align:center!important;
    }
}
.ats-payment-qr-panel .ats-payment-status-link{display:inline-flex!important;justify-content:center!important;}

/* v19.41 - Popup KarirRapi Plus dibuat satu panel, tanpa panel QR/rekening di popup terkunci */
.ats-payment-modal__grid--single{
    grid-template-columns:minmax(0,1fr)!important;
    width:min(820px,100%)!important;
    margin:0 auto!important;
    padding:36px!important;
    gap:0!important;
}
.ats-payment-modal__grid--single .ats-payment-modal__content{
    padding-right:0!important;
    gap:16px!important;
    width:100%!important;
}
.ats-payment-modal__grid--single .ats-payment-modal__badge{
    margin-bottom:2px!important;
}
.ats-payment-modal__grid--single h2{
    max-width:100%!important;
}
.ats-payment-modal__grid--single p[data-payment-message]{
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.6!important;
}
.ats-payment-modal__grid--single .ats-payment-price{
    width:max-content!important;
    max-width:100%!important;
    margin:0!important;
}
.ats-payment-modal__grid--single .ats-payment-features{
    max-width:100%!important;
    margin:2px 0 0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px 16px!important;
}
.ats-payment-modal__grid--single .ats-payment-features li{
    margin:0!important;
    line-height:1.45!important;
}
.ats-payment-modal__grid--single .ats-payment-modal__actions{
    margin-top:8px!important;
    width:100%!important;
}
.ats-payment-modal__grid--single .ats-payment-modal__actions .btn{
    min-height:48px!important;
    padding:0 22px!important;
    white-space:normal!important;
    text-align:center!important;
}
@media(max-width:680px){
    .ats-payment-modal__grid--single{
        padding:24px 18px!important;
    }
    .ats-payment-modal__grid--single .ats-payment-features{
        grid-template-columns:1fr!important;
    }
    .ats-payment-modal__grid--single .ats-payment-modal__actions .btn{
        width:100%!important;
    }
}

/* v19.42 - Header user tanpa scrollbar horizontal.
   Penyebab utama sebelumnya: inner header memakai width 100% + padding sehingga bisa melebar melebihi layar.
   Perbaikan ini menjaga menu tetap rapi tanpa memunculkan scrollbar kanan/kiri. */
html,
body{
    max-width:100% !important;
    overflow-x:hidden !important;
}
.app-header,
.app-header *,
.app-header *::before,
.app-header *::after{
    box-sizing:border-box !important;
}
.app-header,
.app-header__inner{
    max-width:100% !important;
    overflow:visible !important;
}
.app-header__inner{
    width:100% !important;
    padding-left:clamp(10px, 1.25vw, 22px) !important;
    padding-right:clamp(10px, 1.25vw, 22px) !important;
}
.app-header--user .app-brand{
    min-width:190px !important;
    max-width:260px !important;
    flex:0 0 auto !important;
}
.app-header--user .app-brand__mark{
    width:46px !important;
    height:46px !important;
    border-radius:15px !important;
}
.app-header--user .app-brand__doc{
    width:27px !important;
    height:34px !important;
    font-size:11px !important;
}
.app-header--user .app-brand__text strong{
    font-size:23px !important;
    line-height:1 !important;
}
.app-header--user .app-nav{
    min-width:0 !important;
    flex:1 1 auto !important;
    gap:6px !important;
    overflow:visible !important;
    overflow-x:visible !important;
    scrollbar-width:none !important;
}
.app-header--user .app-nav::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
}
.app-header--user .app-nav > a,
.app-header--user .app-nav > .app-nav__dropdown > button{
    min-height:38px !important;
    padding:0 10px !important;
    font-size:12.5px !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
}
.app-header--user .app-header__actions{
    flex:0 0 auto !important;
    min-width:0 !important;
    max-width:260px !important;
    overflow:visible !important;
}
.app-header--user .user-pill{
    max-width:150px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}
.app-header--user .app-header__actions .btn.small{
    min-height:38px !important;
    padding:0 16px !important;
}
@media (max-width: 1280px){
    .app-header--user .app-header__inner{
        gap:8px !important;
    }
    .app-header--user .app-brand{
        min-width:170px !important;
        max-width:220px !important;
    }
    .app-header--user .app-brand__text strong{
        font-size:21px !important;
    }
    .app-header--user .app-nav{
        gap:4px !important;
    }
    .app-header--user .app-nav > a,
    .app-header--user .app-nav > .app-nav__dropdown > button{
        min-height:36px !important;
        padding:0 8px !important;
        font-size:12px !important;
    }
    .app-header--user .user-pill{
        max-width:120px !important;
    }
    .app-header--user .app-header__actions .btn.small{
        padding:0 14px !important;
    }
}
@media (max-width: 1120px){
    .app-header--user .app-header__inner{
        min-height:auto !important;
        padding-top:10px !important;
        padding-bottom:10px !important;
        flex-wrap:wrap !important;
    }
    .app-header--user .app-brand{
        width:auto !important;
        min-width:0 !important;
        max-width:calc(100% - 180px) !important;
    }
    .app-header--user .app-nav{
        order:3 !important;
        width:100% !important;
        flex:0 0 100% !important;
        flex-wrap:wrap !important;
        justify-content:flex-start !important;
        overflow:visible !important;
        padding-bottom:0 !important;
    }
    .app-header--user .app-header__actions{
        position:static !important;
        margin-left:auto !important;
        max-width:none !important;
    }
}
@media (max-width: 640px){
    .app-header--user .app-brand{
        max-width:100% !important;
    }
    .app-header--user .app-header__actions{
        width:100% !important;
        justify-content:flex-start !important;
        margin-left:0 !important;
    }
    .app-header--user .user-pill{
        max-width:190px !important;
    }
}

/* v19.43 - Header user: status token dibaca penuh, tanpa scrollbar, Bootstrap aman */
.app-header--user{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
}
.app-header--user .app-header__inner.container-fluid{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    gap:10px !important;
    padding-left:clamp(10px,1vw,18px) !important;
    padding-right:clamp(10px,1vw,18px) !important;
}
.app-header--user .app-brand.navbar-brand{
    margin:0 !important;
    min-width:176px !important;
    max-width:230px !important;
    flex:0 0 auto !important;
    padding:0 !important;
    gap:10px !important;
}
.app-header--user .app-brand__text{
    min-width:0 !important;
}
.app-header--user .app-brand__text strong{
    display:block !important;
    white-space:nowrap !important;
    font-size:22px !important;
}
.app-header--user .app-nav.navbar-nav{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    gap:5px !important;
    overflow:visible !important;
}
.app-header--user .app-nav > a.nav-link,
.app-header--user .app-nav > .app-nav__dropdown > button.nav-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:0 9px !important;
    border-radius:999px !important;
    font-size:12px !important;
    line-height:1 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
}
.app-header--user .app-nav > .app-nav__dropdown{
    flex:0 0 auto !important;
    min-width:0 !important;
}
.app-header--user .app-header__actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex:0 0 auto !important;
    min-width:max-content !important;
    max-width:none !important;
    margin-left:auto !important;
    overflow:visible !important;
}
.app-header--user .user-pill,
.app-header--user .user-pill.badge{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:max-content !important;
    max-width:none !important;
    flex:0 0 auto !important;
    height:38px !important;
    padding:0 16px !important;
    border-radius:999px !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    background:#fff !important;
    color:#64748b !important;
    border:1px solid #e5edf7 !important;
    box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
}
.app-header--user .app-header__actions .btn.small,
.app-header--user .app-header__actions .btn-danger{
    min-width:72px !important;
    min-height:38px !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
}

/* Bootstrap diterapkan aman di halaman user: hanya elemen umum, bukan area preview/export CV. */
.auth-body.bootstrap-ui-enabled .app-body :where(.payment-page,.queue-page,.tools-page,.template-cepat-page,.choose-template-page,.profile-page,.page-card,.payment-card,.tools-card,.queue-card,.panel-card){
    box-sizing:border-box !important;
}
.auth-body.bootstrap-ui-enabled .app-body :where(.payment-page,.queue-page,.tools-page,.template-cepat-page,.choose-template-page,.profile-page) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea){
    border-radius:12px;
    border:1px solid #dbe3ef;
    min-height:42px;
}
.auth-body.bootstrap-ui-enabled .app-body :where(.payment-page,.queue-page,.tools-page,.template-cepat-page,.choose-template-page,.profile-page) :where(button,.btn,a.btn){
    border-radius:12px;
    font-weight:800;
}
.auth-body.bootstrap-ui-enabled .app-body :where(.payment-page,.queue-page,.tools-page,.template-cepat-page,.choose-template-page,.profile-page) table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

@media (max-width: 1380px){
    .app-header--user .app-header__inner.container-fluid{gap:7px !important;}
    .app-header--user .app-brand.navbar-brand{min-width:165px !important;max-width:205px !important;gap:8px !important;}
    .app-header--user .app-brand__mark{width:42px !important;height:42px !important;}
    .app-header--user .app-brand__text strong{font-size:20px !important;}
    .app-header--user .app-nav.navbar-nav{gap:3px !important;}
    .app-header--user .app-nav > a.nav-link,
    .app-header--user .app-nav > .app-nav__dropdown > button.nav-link{padding:0 7px !important;font-size:11.6px !important;min-height:36px !important;}
    .app-header--user .user-pill,.app-header--user .user-pill.badge{height:36px !important;padding:0 12px !important;font-size:11.6px !important;}
    .app-header--user .app-header__actions .btn.small,.app-header--user .app-header__actions .btn-danger{min-height:36px !important;min-width:66px !important;padding-left:12px !important;padding-right:12px !important;}
}
@media (max-width: 1180px){
    .app-header--user .app-header__inner.container-fluid{
        flex-wrap:wrap !important;
        align-items:flex-start !important;
        padding-top:10px !important;
        padding-bottom:10px !important;
    }
    .app-header--user .app-brand.navbar-brand{
        max-width:calc(100% - 260px) !important;
    }
    .app-header--user .app-header__actions{
        margin-left:auto !important;
    }
    .app-header--user .app-nav.navbar-nav{
        order:3 !important;
        flex:0 0 100% !important;
        width:100% !important;
        flex-wrap:wrap !important;
        overflow:visible !important;
        row-gap:6px !important;
    }
}
@media (max-width: 640px){
    .app-header--user .app-brand.navbar-brand,
    .app-header--user .app-header__actions,
    .app-header--user .app-nav.navbar-nav{
        flex:0 0 100% !important;
        width:100% !important;
        max-width:100% !important;
        justify-content:flex-start !important;
        margin-left:0 !important;
    }
    .app-header--user .user-pill,.app-header--user .user-pill.badge{
        max-width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
        height:auto !important;
        min-height:36px !important;
        padding-top:8px !important;
        padding-bottom:8px !important;
    }
}


/* v19.44 - Pembayaran Token: QRIS mini jelas dan bukti token export opsional */
.payment-qris-button--mini span{
    display:block;
    font-size:11px;
    line-height:1.2;
    max-width:120px;
    white-space:normal;
}
.payment-proof-help{
    grid-column:1/-1;
    display:block;
    margin-top:-4px;
    color:#64748b;
    font-size:12px;
    font-weight:750;
    line-height:1.35;
}
.payment-package .payment-proof-field span b{
    color:#16a34a;
}

/* v19.46 - Header user: submenu Menu Tambahan tampil sebagai children; Queue Job disembunyikan dari user biasa */
.app-header--user .app-nav > .app-nav__dropdown--tools{
    position:relative !important;
    overflow:visible !important;
}
.app-header--user .app-nav > .app-nav__dropdown--tools > button.nav-link{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
}
.app-header--user .app-nav__dropdown--tools .app-nav__menu{
    left:auto !important;
    right:0 !important;
    top:calc(100% + 10px) !important;
    min-width:285px !important;
    width:max-content !important;
    max-width:min(360px, calc(100vw - 32px)) !important;
    padding:10px !important;
    gap:6px !important;
    border-radius:18px !important;
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    box-shadow:0 24px 55px rgba(15,23,42,.18) !important;
    z-index:10050 !important;
}
.app-header--user .app-nav__dropdown--tools .app-nav__menu::before{
    content:"";
    position:absolute;
    right:24px;
    top:-7px;
    width:14px;
    height:14px;
    transform:rotate(45deg);
    background:#ffffff;
    border-left:1px solid #e2e8f0;
    border-top:1px solid #e2e8f0;
}
.app-header--user .app-nav__dropdown--tools:hover .app-nav__menu,
.app-header--user .app-nav__dropdown--tools:focus-within .app-nav__menu,
.app-header--user .app-nav__dropdown--tools.is-open .app-nav__menu{
    display:grid !important;
}
.app-header--user .app-nav__dropdown--tools .app-nav__menu a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    min-height:38px !important;
    padding:0 12px !important;
    border-radius:12px !important;
    color:#334155 !important;
    background:#ffffff !important;
    font-size:12.5px !important;
    font-weight:850 !important;
    line-height:1.2 !important;
    text-align:left !important;
    text-decoration:none !important;
    white-space:nowrap !important;
}
.app-header--user .app-nav__dropdown--tools .app-nav__menu a:hover{
    background:#eff6ff !important;
    color:#1d4ed8 !important;
}
.app-header--user .app-nav__dropdown--locked > button.nav-link,
.app-header--user .app-nav__dropdown--locked > button.nav-link:hover,
.app-header--user .app-nav__dropdown--locked.is-open > button.nav-link{
    border:1px solid #fed7aa !important;
    background:linear-gradient(135deg,#fff7ed,#fffbeb) !important;
    color:#9a3412 !important;
    box-shadow:0 8px 20px rgba(251,146,60,.12) !important;
}
.app-header--user .app-nav__dropdown--locked .app-nav__menu--locked{
    border-color:#fed7aa !important;
}
.app-header--user .app-nav__dropdown--locked .app-nav__menu--locked a:hover{
    background:#fff7ed !important;
    color:#9a3412 !important;
}
.app-header--user .app-nav__dropdown--locked .app-nav__menu--locked small{
    flex:0 0 auto !important;
    color:#d97706 !important;
    font-size:12px !important;
    font-weight:950 !important;
}
.app-header--user .app-nav__dropdown--locked .locked-tools-note{
    display:block !important;
    margin-bottom:3px !important;
    padding:9px 11px !important;
    border-radius:13px !important;
    border:1px solid #fed7aa !important;
    background:#fff7ed !important;
    color:#92400e !important;
    font-size:12px !important;
    font-weight:950 !important;
    line-height:1.35 !important;
}
@media (max-width:1180px){
    .app-header--user .app-nav__dropdown--tools .app-nav__menu{
        left:0 !important;
        right:auto !important;
    }
    .app-header--user .app-nav__dropdown--tools .app-nav__menu::before{
        left:22px !important;
        right:auto !important;
    }
}


/* v19.47 - Header login user: hover/click Menu Tambahan stabil dan panah dropdown satu saja */
.app-header--user{
    z-index:10080 !important;
    overflow:visible !important;
}
.app-header--user .app-header__inner,
.app-header--user .app-nav,
.app-header--user .app-nav.navbar-nav,
.app-header--user .app-nav > .app-nav__dropdown--tools{
    overflow:visible !important;
}
.app-header--user .app-nav > .app-nav__dropdown--tools{
    isolation:isolate !important;
}
.app-header--user .app-nav__dropdown--tools::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    height:16px !important;
    z-index:10049 !important;
}
.app-header--user .app-nav__dropdown--tools .app-nav__menu{
    display:grid !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(6px) !important;
    transition:opacity .14s ease, transform .14s ease, visibility .14s ease !important;
    z-index:10060 !important;
}
.app-header--user .app-nav__dropdown--tools:hover .app-nav__menu,
.app-header--user .app-nav__dropdown--tools:focus-within .app-nav__menu,
.app-header--user .app-nav__dropdown--tools.is-open .app-nav__menu{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
}
.app-header--user .app-nav > .app-nav__dropdown--tools > button.nav-link.dropdown-toggle::after{
    content:"" !important;
    display:inline-block !important;
    margin-left:6px !important;
    vertical-align:.12em !important;
    border-top:.34em solid currentColor !important;
    border-right:.34em solid transparent !important;
    border-bottom:0 !important;
    border-left:.34em solid transparent !important;
}
@media (max-width:1180px){
    .app-header--user .app-nav,
    .app-header--user .app-nav.navbar-nav{
        overflow:visible !important;
    }
}

/* v19.49 - Login password view toggle + WhatsApp floating untuk mode maintenance. */
.login-field-label--password input{
    padding-right:64px;
}
.password-view-toggle{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:44px;
    height:44px;
    border:1px solid #dbe3ee;
    border-radius:14px;
    background:#ffffff;
    color:#0b1e4b;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.password-view-toggle:hover,
.password-view-toggle:focus-visible{
    border-color:#d4aa2a;
    background:#fffdf6;
    outline:none;
    box-shadow:0 0 0 4px rgba(212,170,42,.12);
}
.password-view-toggle__hide{
    display:none;
}
.password-view-toggle.is-visible .password-view-toggle__show{
    display:none;
}
.password-view-toggle.is-visible .password-view-toggle__hide{
    display:inline;
}
.maintenance-whatsapp-floating{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:130;
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:64px;
    padding:8px 16px 8px 8px;
    border-radius:999px;
    background:#ffffff;
    color:#065f46;
    text-decoration:none;
    border:1px solid rgba(187,247,208,.9);
    box-shadow:0 18px 42px rgba(15,23,42,.18);
}
.maintenance-whatsapp-floating:hover,
.maintenance-whatsapp-floating:focus-visible{
    color:#047857;
    transform:translateY(-2px);
    text-decoration:none;
    outline:none;
    box-shadow:0 22px 52px rgba(15,23,42,.22);
}
.maintenance-whatsapp-floating__icon{
    width:48px;
    height:48px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#16a34a,#25d366);
    color:#ffffff;
    box-shadow:0 12px 26px rgba(22,163,74,.28);
}
.maintenance-whatsapp-floating__icon svg{
    width:30px;
    height:30px;
    fill:currentColor;
}
.maintenance-whatsapp-floating__label{
    font-size:13px;
    font-weight:950;
    white-space:nowrap;
}
@media(max-width:720px){
    .login-field-label--password input{padding-right:58px}
    .password-view-toggle{right:11px;width:40px;height:40px;border-radius:13px}
    .maintenance-whatsapp-floating{right:14px;bottom:14px;min-height:58px;padding:5px;border-radius:999px}
    .maintenance-whatsapp-floating__icon{width:48px;height:48px}
    .maintenance-whatsapp-floating__label{display:none}
}

/* v19.53 - Landing slider dibuat non-teknis, lebih menarik, dan gambar tidak terpotong */
.landing-plus-showcase__hint{
    background:linear-gradient(135deg,#eff6ff,#f8fbff);
    border:1px solid rgba(96,165,250,.34);
    color:#174ea6;
    box-shadow:0 8px 18px rgba(37,99,235,.08);
}
.landing-plus-slides--real-template{
    background:
        radial-gradient(circle at 18% 12%,rgba(149,180,0,.14),transparent 30%),
        radial-gradient(circle at 92% 8%,rgba(37,99,235,.12),transparent 32%),
        linear-gradient(135deg,#f8fbff,#ffffff 52%,#fff7fb);
    border-color:rgba(191,219,254,.78);
}
.landing-real-doc-preview{
    background:linear-gradient(135deg,#eef6ff,#ffffff 48%,#fff7fb);
    border-color:rgba(191,219,254,.85);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.78),
        0 20px 48px rgba(15,23,42,.14);
}
.landing-real-doc-preview img{
    object-position:center center;
    transform:none;
}
.landing-real-doc-preview figcaption{
    background:linear-gradient(135deg,#0b1e4b,#2563eb);
    min-height:34px;
    padding:0 14px;
    box-shadow:0 14px 28px rgba(11,30,75,.22);
}
.landing-plus-slide__text{
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    border-color:rgba(191,219,254,.78);
}
.landing-plus-slide__text strong{
    letter-spacing:-.03em;
}
.landing-plus-cta{
    min-height:48px;
    padding:0 24px;
    box-shadow:0 18px 34px rgba(11,30,75,.26);
}
@media(max-width:720px){
    .landing-plus-showcase__hint{font-size:10px;line-height:1.35;}
    .landing-real-doc-preview img{object-position:center center;}
}


/* v19.54 - Landing slider cache-bust, full image preview, dan caption lebih aman */
.landing-plus-showcase__hint{
    min-height:36px;
    padding:0 16px;
    font-size:12px;
}
.landing-plus-slides--real-template .landing-real-doc-preview img{
    object-fit:contain;
    object-position:center center;
    padding:12px;
    background:transparent;
}
.landing-real-doc-preview figcaption{
    min-height:38px;
    padding:8px 14px;
    line-height:1.3;
    white-space:normal;
}
.landing-plus-slide__text span{
    line-height:1.75;
}
@media(max-width:720px){
    .landing-plus-slides--real-template .landing-real-doc-preview img{padding:8px;}
    .landing-real-doc-preview figcaption{font-size:10px; line-height:1.35;}
}


/* v19.55 - rapikan jarak preview slider agar caption tidak terlihat ketumpuk */
.landing-plus-slides--real-template{
    min-height:540px;
}
.landing-plus-slides--real-template .landing-plus-slide{
    grid-template-rows:minmax(320px, 360px) auto;
    gap:26px;
    padding:20px;
}
.landing-real-doc-preview{
    min-height:320px;
}
.landing-real-doc-preview figcaption{
    bottom:18px;
    left:18px;
    max-width:min(78%, 520px);
    font-size:11px;
    line-height:1.28;
    padding:9px 14px;
}
.landing-plus-slide__text{
    position:relative;
    z-index:4;
    margin-top:6px;
    padding:22px 22px 20px;
}
.landing-plus-slide__text strong{
    line-height:1.22;
    margin-bottom:10px;
}
.landing-plus-slide__text span{
    line-height:1.8;
}
@media(max-width:720px){
    .landing-plus-slides--real-template{min-height:456px;}
    .landing-plus-slides--real-template .landing-plus-slide{grid-template-rows:minmax(250px, 290px) auto; gap:18px; padding:14px;}
    .landing-real-doc-preview{min-height:250px;}
    .landing-real-doc-preview figcaption{bottom:12px; left:12px; max-width:calc(100% - 24px); font-size:10px; padding:8px 12px;}
    .landing-plus-slide__text{padding:18px 16px 16px;}
}


/* v19.56 - gambar landing diperbesar, box deskripsi diperkecil */
.landing-plus-slides--real-template{
    min-height:500px;
}
.landing-plus-slides--real-template .landing-plus-slide{
    grid-template-rows:minmax(360px, 398px) auto;
    gap:14px;
    padding:16px;
}
.landing-real-doc-preview{
    min-height:360px;
}
.landing-plus-slides--real-template .landing-real-doc-preview img{
    padding:4px;
}
.landing-plus-slide__text{
    padding:16px 18px 14px;
    border-radius:18px;
    box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.landing-plus-slide__text strong{
    font-size:20px;
    margin-bottom:8px;
}
.landing-plus-slide__text span{
    font-size:13px;
    line-height:1.6;
}
@media(max-width:720px){
    .landing-plus-slides--real-template{min-height:430px;}
    .landing-plus-slides--real-template .landing-plus-slide{grid-template-rows:minmax(245px, 272px) auto; gap:12px; padding:12px;}
    .landing-real-doc-preview{min-height:245px;}
    .landing-plus-slides--real-template .landing-real-doc-preview img{padding:3px;}
    .landing-plus-slide__text{padding:14px 14px 12px;}
    .landing-plus-slide__text strong{font-size:18px;}
    .landing-plus-slide__text span{font-size:12px; line-height:1.55;}
}


/* v19.57 - box dibuat lebih ringkas, gap tengah diperkecil, preview lebih dominan */
.landing-plus-showcase__head{
    margin-bottom:12px;
}
.landing-plus-slides--real-template{
    min-height:470px;
}
.landing-plus-slides--real-template .landing-plus-slide{
    grid-template-rows:minmax(372px, 408px) auto;
    gap:8px;
    padding:12px;
}
.landing-real-doc-preview{
    min-height:372px;
    border-radius:22px;
}
.landing-plus-slides--real-template .landing-real-doc-preview img{
    padding:2px;
}
.landing-real-doc-preview figcaption{
    bottom:12px;
}
.landing-plus-slide__text{
    padding:12px 14px 11px;
    border-radius:16px;
}
.landing-plus-slide__text strong{
    font-size:18px;
    margin-bottom:6px;
}
.landing-plus-slide__text span{
    font-size:12.5px;
    line-height:1.5;
}
@media(max-width:720px){
    .landing-plus-slides--real-template{min-height:408px;}
    .landing-plus-slides--real-template .landing-plus-slide{grid-template-rows:minmax(250px, 280px) auto; gap:8px; padding:10px;}
    .landing-real-doc-preview{min-height:250px; border-radius:18px;}
    .landing-plus-slide__text{padding:11px 12px 10px; border-radius:14px;}
    .landing-plus-slide__text strong{font-size:16px; margin-bottom:5px;}
    .landing-plus-slide__text span{font-size:11.5px; line-height:1.45;}
}


/* v19.58 - gambar dalam slide diperlebar, outer diperkecil, ajakan lebih pas */
.landing-plus-showcase{
    padding:16px 16px 12px;
}
.landing-plus-showcase__head{
    margin-bottom:10px;
}
.landing-plus-slides--real-template{
    min-height:438px;
    border-radius:24px;
}
.landing-plus-slides--real-template .landing-plus-slide{
    grid-template-rows:minmax(304px, 332px) auto;
    gap:6px;
    padding:10px;
}
.landing-real-doc-preview{
    min-height:304px;
    border-radius:18px;
}
.landing-plus-slides--real-template .landing-real-doc-preview img{
    padding:0;
    object-fit:cover;
    object-position:center 42%;
    transform:scale(1.18);
}
.landing-real-doc-preview figcaption{
    left:12px;
    bottom:10px;
    max-width:min(82%, 460px);
    font-size:10px;
    padding:8px 12px;
}
.landing-plus-slide__text{
    padding:10px 12px 9px;
    border-radius:14px;
    box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.landing-plus-slide__text strong{
    font-size:16px;
    line-height:1.18;
    margin-bottom:4px;
}
.landing-plus-slide__text span{
    font-size:11.5px;
    line-height:1.42;
}
@media(max-width:720px){
    .landing-plus-showcase{padding:14px 12px 10px;}
    .landing-plus-slides--real-template{min-height:374px; border-radius:20px;}
    .landing-plus-slides--real-template .landing-plus-slide{grid-template-rows:minmax(230px, 250px) auto; gap:6px; padding:8px;}
    .landing-real-doc-preview{min-height:230px; border-radius:16px;}
    .landing-plus-slides--real-template .landing-real-doc-preview img{object-position:center 40%; transform:scale(1.22);}
    .landing-real-doc-preview figcaption{left:10px; bottom:8px; max-width:calc(100% - 20px); font-size:9.5px; padding:7px 10px;}
    .landing-plus-slide__text{padding:9px 10px 8px; border-radius:12px;}
    .landing-plus-slide__text strong{font-size:15px; margin-bottom:3px;}
    .landing-plus-slide__text span{font-size:10.8px; line-height:1.36;}
}


/* v19.59 - hilangkan caption di dalam preview agar area gambar full */
.landing-real-doc-preview figcaption{
    display:none !important;
}

/* v19.62 - Landing Template memakai katalog asli + preview CV Seno blur */
.landing-template-page-v62 .landing-template-hero-v62{
    grid-template-columns:minmax(0, .92fr) minmax(420px, 1.08fr);
}
.landing-template-hero-v62__preview{
    min-height:430px;
    padding:0;
    background:linear-gradient(135deg,#eef6ff,#ffffff 58%,#fff7fb);
}
.landing-template-hero-v62__preview img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}
.landing-template-lock-note--seno{
    left:auto;
    right:24px;
    top:auto;
    bottom:24px;
    width:min(280px,calc(100% - 48px));
    min-height:0;
    transform:none;
    align-items:flex-start;
    text-align:left;
}
.landing-template-section-title-v62{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:28px 0 14px;
    padding:16px 18px;
    border:1px solid rgba(191,219,254,.8);
    border-radius:22px;
    background:rgba(255,255,255,.86);
    box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.landing-template-section-title-v62 span,
.landing-template-section-title-v62 strong{
    display:flex;
    align-items:center;
    gap:8px;
    color:#0b1e4b;
    font-weight:950;
}
.landing-template-section-title-v62 svg{
    width:18px;
    height:18px;
    color:#2563eb;
}
.landing-template-section-title-v62 strong{
    color:#64748b;
    font-size:13px;
}
.landing-template-gallery-v62{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.landing-template-card-v62{
    border-radius:22px;
}
.landing-template-card-v62 .landing-template-card-v91__thumb{
    min-height:188px;
    padding:38px 14px 14px;
    background:
        radial-gradient(circle at 24% 18%,rgba(37,99,235,.10),transparent 34%),
        linear-gradient(135deg,#f8fbff,#ffffff 50%,#fff7fb);
}
.landing-template-card-v62 .landing-template-card-v91__body{
    padding:14px 15px 16px;
}
.landing-template-card-v62 .landing-template-card-v91__body strong{
    font-size:16px;
    line-height:1.22;
}
.landing-template-card-v62 .landing-template-card-v91__body p{
    font-size:12px;
    line-height:1.5;
    font-weight:750;
}
.landing-real-template-mini{
    position:relative;
    width:156px;
    height:198px;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(226,232,240,.95);
    box-shadow:0 16px 34px rgba(15,23,42,.12);
    transform:rotate(-2deg);
}
.landing-real-template-mini::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0),rgba(255,255,255,.34));
    pointer-events:none;
}
.mini-doc-head{
    position:absolute;
    inset:0 0 auto 0;
    height:48px;
    padding:11px 12px;
    display:flex;
    align-items:center;
    gap:8px;
}
.mini-doc-head span{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:8px;
    background:#c8d31a;
    color:#0b1e4b;
    font-size:8px;
    font-weight:950;
}
.mini-doc-head b,
.mini-doc-head i{
    display:block;
    border-radius:999px;
    background:var(--tpl-accent,#2563eb);
}
.mini-doc-head b{width:64px;height:8px;}
.mini-doc-head i{width:34px;height:5px;opacity:.28;}
.mini-doc-sidebar{
    position:absolute;
    left:12px;
    top:62px;
    bottom:14px;
    width:42px;
    border-radius:12px;
    background:var(--tpl-accent,#2563eb);
}
.mini-letter-band{
    position:absolute;
    left:14px;
    right:14px;
    top:58px;
    height:34px;
    border-radius:12px;
    background:color-mix(in srgb, var(--tpl-accent,#2563eb) 12%, #ffffff);
    border:1px solid rgba(226,232,240,.9);
}
.mini-doc-photo{
    position:absolute;
    right:14px;
    top:66px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:linear-gradient(135deg,#dbeafe,#94a3b8);
    filter:blur(1.8px);
}
.mini-doc-title,
.mini-doc-section,
.mini-doc-lines{
    position:absolute;
    border-radius:999px;
}
.mini-doc-title{
    left:68px;
    right:18px;
    top:68px;
    height:8px;
    background:#0f172a;
}
.landing-real-template-mini--letter .mini-doc-title{
    left:22px;
    top:108px;
    right:34px;
}
.mini-doc-lines{
    left:68px;
    right:18px;
    height:6px;
    background:var(--tpl-line,#cbd5e1);
    box-shadow:0 14px 0 var(--tpl-line,#cbd5e1),0 28px 0 var(--tpl-line,#cbd5e1),0 42px 0 var(--tpl-line,#cbd5e1);
}
.mini-doc-lines--a{top:90px;}
.mini-doc-section{
    left:68px;
    right:54px;
    top:152px;
    height:8px;
    background:var(--tpl-accent,#2563eb);
    opacity:.92;
}
.mini-doc-lines--b{top:170px;right:34px;}
.landing-real-template-mini--letter .mini-doc-lines{
    left:22px;
    right:22px;
}
.landing-real-template-mini--letter .mini-doc-lines--a{top:130px;}
.landing-real-template-mini--letter .mini-doc-section{left:22px;right:80px;top:78px;}
.landing-real-template-mini--letter .mini-doc-lines--b{top:178px;right:70px;}
.landing-template-card-v62:hover .landing-real-template-mini{
    transform:rotate(0deg) translateY(-4px);
    box-shadow:0 22px 42px rgba(15,23,42,.16);
}
.landing-real-doc-preview--seno img{
    object-fit:cover;
    object-position:center center;
}
@media(max-width:1180px){
    .landing-template-gallery-v62{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:980px){
    .landing-template-page-v62 .landing-template-hero-v62{grid-template-columns:1fr;}
    .landing-template-gallery-v62{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:720px){
    .landing-template-gallery-v62{grid-template-columns:1fr;}
    .landing-template-section-title-v62{align-items:flex-start;flex-direction:column;}
    .landing-template-hero-v62__preview{min-height:320px;}
    .landing-template-lock-note--seno{right:16px;bottom:16px;width:calc(100% - 32px);}
}


/* v19.63 landing template uses real preview cards and friendlier copy */
.landing-template-card-v91__thumb .cv-showcase-thumb,
.landing-template-card-v91__thumb .letter-showcase-thumb {
    transform: scale(.9);
    transform-origin: center;
    margin: 0 auto;
}
.landing-template-card-v91__thumb .cv-showcase-paper,
.landing-template-card-v91__thumb .letter-showcase-paper {
    box-shadow: 0 20px 35px rgba(15, 23, 42, .12);
}
.landing-template-lock-note--seno strong,
.landing-template-lock-note--seno small {
    letter-spacing: normal;
}


/* v19.64 landing template limited to 6 items with 3x2 layout */
.landing-template-gallery-v62 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
    .landing-template-gallery-v62 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .landing-template-gallery-v62 {
        grid-template-columns: 1fr;
    }
}


/* v19.65 image-only support for landing slider */
.landing-plus-slide--image-only {
    grid-template-rows: minmax(320px, 1fr);
    gap: 0;
}
.landing-plus-slide--image-only .landing-real-doc-preview {
    min-height: 320px;
}
@media (max-width: 767px) {
    .landing-plus-slide--image-only {
        grid-template-rows: minmax(250px, 1fr);
    }
    .landing-plus-slide--image-only .landing-real-doc-preview {
        min-height: 250px;
    }
}


/* v19.67 force image-only preview on landing menu template */
.landing-template-hero-v62__preview--image-only {
    padding-bottom: 0;
}
.landing-template-hero-v62__preview--image-only .landing-template-lock-note,
.landing-template-hero-v62__preview .landing-template-lock-note--seno {
    display: none !important;
}

/* v19.75 - Foto CV untuk template Polos Nadia Sidebar */
.cv-modal-field.photo .cv-photo-picker-row{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;border:1px dashed #cbd5e1;border-radius:12px;padding:12px;background:#f8fafc;}
.cv-photo-picker-preview{width:82px;height:82px;border:2px solid #0b3a75;border-radius:999px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;color:#0b3a75;font:700 11px Arial,sans-serif;}
.cv-photo-picker-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.cv-photo-picker-inputs{display:grid;gap:7px;}
.cv-photo-picker-inputs small{font-weight:500;color:#64748b;line-height:1.35;}

/* v19.80 - preview paper no outer border */
.cv-preview-stage .cv-paper{border:0!important;outline:0!important;}


/* v19.81 - default preview memakai ukuran A4 Python 595x842, bukan kertas 794px */
body.cv-builder-body .cv-preview-stage{
    min-width:595px!important;
}
body.cv-builder-body .cv-preview-stage .cv-polos-live-stage{
    width:794px!important;
    min-width:794px!important;
    margin:0 auto!important;
}
body.cv-builder-body .cv-preview-stage .cv-polos-live-stage .polos-live-page,
body.cv-builder-body .cv-preview-stage .cv-polos-live-stage .nadia-sidebar-cv-page,
body.cv-builder-body .cv-preview-stage .cv-polos-live-stage .navy-exec-cv-page{
    margin:0!important;
}
body.cv-builder-body .cv-preview-stage .cv-python-export-stage:not(.cv-creative-stage):not(.cv-polos-live-stage):not(.cv-nadia-stage):not(.cv-navy-exec-stage){
    width:595.276px!important;
}
body.cv-builder-body .cv-preview-stage .cv-python-export-stage:not(.cv-creative-stage):not(.cv-polos-live-stage):not(.cv-nadia-stage):not(.cv-navy-exec-stage) .python-ats-cv-page{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
}

/* v20.06 - Textarea Deskripsi dibuat sama rasa/ukuran dengan Edit Ringkasan Profesional. */
.cv-modal-field textarea[name="summary"],
.cv-modal-field textarea[name="description"]{
    font-size:14px!important;
    line-height:1.45!important;
    font-family:inherit!important;
}

/* v20.08 - status translate online full page CV */
.cv-translate-status{
    display:block;
    margin:8px 0 10px;
    padding:10px 12px;
    border-radius:12px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    line-height:1.45;
}
.cv-builder-python-shell.is-translating-online .cv-builder-left{opacity:.78;pointer-events:none}
.cv-builder-python-shell.is-translating-online .cv-builder-preview-wrap:after{
    content:'Translate ONLINE full page sedang diproses...';
    position:fixed;
    right:26px;
    bottom:26px;
    z-index:9999;
    padding:13px 16px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    font-weight:950;
    box-shadow:0 18px 44px rgba(15,23,42,.28);
}

/* v20.14 - Modal Pendidikan dibuat seperti referensi Python: rapi, satu kolom, datalist editable, kalender bulan/tahun. */
#cvBuilderModal.is-education-modal .cv-modal-card{
    width:min(676px, calc(100vw - 28px))!important;
    max-height:94vh!important;
    border-radius:6px!important;
    border:1px solid #cbd5e1!important;
    box-shadow:0 18px 48px rgba(15,23,42,.28)!important;
}
#cvBuilderModal.is-education-modal .cv-modal-head{
    min-height:70px!important;
    padding:16px 24px!important;
    background:#fff!important;
    border-bottom:1px solid #94a3b8!important;
}
#cvBuilderModal.is-education-modal .cv-modal-head h2{
    font-size:18px!important;
    font-weight:800!important;
    color:#1e293b!important;
}
#cvBuilderModal.is-education-modal .cv-modal-body{
    padding:24px!important;
    gap:13px!important;
    background:#fff!important;
    scrollbar-gutter:stable!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field{
    gap:7px!important;
    color:#334155!important;
    font-size:13px!important;
    font-weight:500!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field > span{
    display:block!important;
    line-height:1.25!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field input,
#cvBuilderModal.is-education-modal .cv-modal-field textarea,
#cvBuilderModal.is-education-modal .cv-modal-field select{
    border-radius:0!important;
    border:1px solid #d1d5db!important;
    background:#fff!important;
    color:#111827!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.45!important;
    box-shadow:inset 0 0 0 1px #f3f4f6!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field input{
    min-height:52px!important;
    padding:12px 10px!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field textarea{
    min-height:114px!important;
    padding:8px 10px!important;
    resize:vertical!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="start_date"],
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="end_date"],
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="gpa"],
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="max_gpa"]{
    max-width:304px!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field.checkbox{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    max-width:none!important;
    min-height:24px!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field.checkbox input{
    width:14px!important;
    height:14px!important;
    min-height:14px!important;
    padding:0!important;
    border-radius:0!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field.checkbox span{
    display:inline!important;
    color:#111827!important;
    font-size:12px!important;
}
#cvBuilderModal.is-education-modal .cv-date-helper-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:8px!important;
    align-items:center!important;
}
#cvBuilderModal.is-education-modal .cv-date-month-picker{
    min-width:48px!important;
    width:48px!important;
    padding:0 4px!important;
    cursor:pointer!important;
    color:transparent!important;
}
#cvBuilderModal.is-education-modal .cv-date-month-picker::-webkit-calendar-picker-indicator{
    opacity:1!important;
    cursor:pointer!important;
    width:22px!important;
    height:22px!important;
}
#cvBuilderModal.is-education-modal .cv-field-help{
    color:#64748b!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:500!important;
}
#cvBuilderModal.is-education-modal .cv-modal-foot{
    padding:14px 16px!important;
    background:#fff!important;
    border-top:1px solid #cbd5e1!important;
    gap:12px!important;
}
#cvBuilderModal.is-education-modal .cv-modal-foot .btn{
    flex:1 1 0!important;
    min-height:42px!important;
    border-radius:0!important;
    font-weight:700!important;
}
#cvBuilderModal.is-education-modal .cv-modal-foot .btn.primary{
    background:#2563eb!important;
    border-color:#2563eb!important;
    color:#fff!important;
}

/* v20.37 - Setting Layout floating panel tidak mengunci scrollbar preview CV/Surat */
body.layout-floating-open{
    overflow:auto!important;
}
.layout-floating-modal.is-open{
    pointer-events:none!important;
}
.layout-floating-modal__backdrop{
    pointer-events:none!important;
    cursor:default!important;
}
.layout-floating-modal__card,
.layout-floating-modal__card *,
.layout-floating-modal__frame{
    pointer-events:auto!important;
}
body.layout-floating-open .cv-preview-viewport,
body.layout-floating-open .letter-builder-right,
body.layout-floating-open #letterPreviewViewport{
    overflow:auto!important;
    pointer-events:auto!important;
    overscroll-behavior:auto!important;
}
body.layout-floating-open .cv-preview-viewport::-webkit-scrollbar,
body.layout-floating-open .letter-builder-right::-webkit-scrollbar,
body.layout-floating-open #letterPreviewViewport::-webkit-scrollbar{
    width:auto!important;
    height:auto!important;
    display:block!important;
}


/* v20.38 - Input section CV jadi panel floating kiri seperti Setting Layout; tampilan CV tetap bisa discroll dan update real-time. */
body.cv-input-floating-open{
    overflow:auto!important;
}
.cv-modal-overlay{
    position:fixed!important;
    inset:0!important;
    display:none!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    padding:0!important;
    background:linear-gradient(90deg,rgba(15,23,42,.28) 0%,rgba(15,23,42,.10) 42%,rgba(15,23,42,.04) 100%)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:26000!important;
    pointer-events:none!important;
}
.cv-modal-overlay.is-open{
    display:flex!important;
}
.cv-modal-card,
#cvBuilderModal.is-education-modal .cv-modal-card{
    position:relative!important;
    width:min(560px, 46vw)!important;
    max-width:560px!important;
    min-width:430px!important;
    height:100vh!important;
    max-height:100vh!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    overflow:hidden!important;
    border-radius:0 28px 28px 0!important;
    border:0!important;
    border-right:1px solid rgba(191,219,254,.96)!important;
    background:#ffffff!important;
    box-shadow:18px 0 54px rgba(15,23,42,.28)!important;
    pointer-events:auto!important;
}
.cv-modal-head,
#cvBuilderModal.is-education-modal .cv-modal-head{
    min-height:96px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:18px!important;
    padding:18px 20px!important;
    background:linear-gradient(135deg,#eff6ff 0%,#ffffff 52%,#eef2ff 100%)!important;
    border-bottom:1px solid #dbeafe!important;
}
.cv-modal-badge{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 11px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.cv-modal-head h2,
#cvBuilderModal.is-education-modal .cv-modal-head h2{
    margin:8px 0 4px!important;
    font-size:23px!important;
    font-weight:900!important;
    color:#0f172a!important;
}
.cv-modal-head p,
#cvBuilderModal.is-education-modal .cv-modal-head p{
    margin:0!important;
    color:#475569!important;
    font-size:13px!important;
    line-height:1.35!important;
    font-weight:700!important;
}
.cv-modal-head p.is-ok{color:#166534!important;}
.cv-modal-head p.is-error{color:#b91c1c!important;}
.cv-modal-close,
#cvBuilderModal.is-education-modal .cv-modal-close{
    flex:0 0 auto!important;
    width:42px!important;
    height:42px!important;
    border:1px solid #bfdbfe!important;
    border-radius:50%!important;
    background:#ffffff!important;
    color:#1d4ed8!important;
    font-size:26px!important;
    line-height:1!important;
    font-weight:800!important;
    cursor:pointer!important;
    box-shadow:0 10px 24px rgba(37,99,235,.16)!important;
}
.cv-modal-close:hover,
#cvBuilderModal.is-education-modal .cv-modal-close:hover{
    background:#2563eb!important;
    color:#ffffff!important;
    border-color:#2563eb!important;
}
.cv-modal-body,
#cvBuilderModal.is-education-modal .cv-modal-body{
    min-height:0!important;
    overflow:auto!important;
    padding:18px 20px 20px!important;
    background:#f8fafc!important;
    scrollbar-gutter:stable!important;
}
.cv-modal-foot,
#cvBuilderModal.is-education-modal .cv-modal-foot{
    position:sticky!important;
    bottom:0!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:10px!important;
    padding:14px 18px!important;
    border-top:1px solid #dbeafe!important;
    background:linear-gradient(180deg,rgba(248,250,252,.92),#ffffff 42%)!important;
}
.cv-modal-foot .btn,
#cvBuilderModal.is-education-modal .cv-modal-foot .btn{
    min-height:42px!important;
    border-radius:12px!important;
    font-weight:900!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="start_date"],
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="end_date"],
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="gpa"],
#cvBuilderModal.is-education-modal .cv-modal-field[data-cv-field="max_gpa"]{
    max-width:none!important;
}
body.cv-input-floating-open .cv-preview-viewport,
body.cv-input-floating-open .letter-builder-right,
body.cv-input-floating-open #letterPreviewViewport{
    overflow:auto!important;
    pointer-events:auto!important;
    overscroll-behavior:auto!important;
}
body.cv-input-floating-open .cv-preview-viewport::-webkit-scrollbar,
body.cv-input-floating-open .letter-builder-right::-webkit-scrollbar,
body.cv-input-floating-open #letterPreviewViewport::-webkit-scrollbar{
    width:auto!important;
    height:auto!important;
    display:block!important;
}
@media (max-width: 900px){
    .cv-modal-card,
    #cvBuilderModal.is-education-modal .cv-modal-card{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        border-radius:0!important;
    }
}

/* v20.40 - Tombol Update CV manual di setiap input section + modal floating. */
.cv-update-cv-btn{
    min-height:46px!important;
    margin-top:10px!important;
    border:1px solid #93c5fd!important;
    border-radius:14px!important;
    background:linear-gradient(135deg,#eff6ff 0%,#ffffff 100%)!important;
    color:#1d4ed8!important;
    font-size:15px!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    box-shadow:0 10px 22px rgba(37,99,235,.08)!important;
}
.cv-update-cv-btn:hover{
    background:#2563eb!important;
    color:#ffffff!important;
    border-color:#2563eb!important;
}
.cv-update-cv-btn:disabled,
.cv-update-cv-modal:disabled{
    opacity:.78!important;
    cursor:wait!important;
}
.cv-modal-foot .cv-update-cv-modal,
#cvBuilderModal.is-education-modal .cv-modal-foot .cv-update-cv-modal{
    border:1px solid #93c5fd!important;
    background:#eff6ff!important;
    color:#1d4ed8!important;
    box-shadow:0 8px 18px rgba(37,99,235,.10)!important;
}
.cv-modal-foot .cv-update-cv-modal:hover,
#cvBuilderModal.is-education-modal .cv-modal-foot .cv-update-cv-modal:hover{
    background:#2563eb!important;
    border-color:#2563eb!important;
    color:#ffffff!important;
}
@media (max-width: 900px){
    .cv-update-cv-btn{min-height:42px!important;font-size:14px!important;}
}

/* v20.44 - Loading overlay saat tombol Update CV diklik; hilang otomatis setelah tampilan CV benar-benar berubah. */
.cv-update-loading-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:32000!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    padding:24px!important;
    background:rgba(15,23,42,.16)!important;
    pointer-events:none!important;
}
.cv-update-loading-overlay.is-visible{
    display:flex!important;
}
.cv-update-loading-card{
    position:relative!important;
    width:min(390px, calc(100vw - 34px))!important;
    border:1px solid rgba(191,219,254,.98)!important;
    border-radius:24px!important;
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 48%,#eef2ff 100%)!important;
    box-shadow:0 28px 80px rgba(15,23,42,.30),0 0 0 8px rgba(255,255,255,.38)!important;
    padding:26px 28px 24px!important;
    text-align:center!important;
    color:#0f172a!important;
    pointer-events:auto!important;
    overflow:hidden!important;
    animation:cvUpdateLoadingFloat 1.15s ease-in-out infinite alternate!important;
}
.cv-update-loading-card:before{
    content:""!important;
    position:absolute!important;
    top:-45%!important;
    left:-60%!important;
    width:80%!important;
    height:190%!important;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.70) 45%,transparent 78%)!important;
    transform:rotate(10deg)!important;
    animation:cvUpdateLoadingShine 1.6s linear infinite!important;
    pointer-events:none!important;
}
.cv-update-loading-close{
    position:absolute!important;
    right:12px!important;
    top:10px!important;
    width:30px!important;
    height:30px!important;
    border:1px solid #bfdbfe!important;
    border-radius:999px!important;
    background:#ffffff!important;
    color:#1d4ed8!important;
    font-size:20px!important;
    font-weight:900!important;
    line-height:1!important;
    cursor:pointer!important;
    z-index:2!important;
}
.cv-update-loading-spinner{
    position:relative!important;
    z-index:1!important;
    width:58px!important;
    height:58px!important;
    margin:0 auto 14px!important;
    border:6px solid rgba(147,197,253,.42)!important;
    border-top-color:#2563eb!important;
    border-right-color:#7c3aed!important;
    border-radius:999px!important;
    animation:cvUpdateLoadingSpin .72s linear infinite!important;
}
.cv-update-loading-text{
    position:relative!important;
    z-index:1!important;
    font-size:24px!important;
    line-height:1.12!important;
    font-weight:1000!important;
    letter-spacing:.015em!important;
    text-transform:lowercase!important;
    color:#1e3a8a!important;
    animation:cvUpdateLoadingTextMove .85s ease-in-out infinite alternate!important;
}
.cv-update-loading-runner{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:9px!important;
    margin:16px auto 12px!important;
    border-radius:999px!important;
    background:rgba(191,219,254,.75)!important;
    overflow:hidden!important;
}
.cv-update-loading-runner span{
    display:block!important;
    width:42%!important;
    height:100%!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#2563eb,#7c3aed,#0ea5e9)!important;
    animation:cvUpdateLoadingRunner 1.05s ease-in-out infinite!important;
}
.cv-update-loading-card p{
    position:relative!important;
    z-index:1!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.45!important;
    color:#475569!important;
    font-weight:800!important;
}
.cv-update-loading-overlay.is-waiting .cv-update-loading-card p{
    color:#b45309!important;
}
body.cv-update-loading-active .cv-update-cv-btn,
body.cv-update-loading-active .cv-update-cv-modal{
    cursor:wait!important;
}
@keyframes cvUpdateLoadingSpin{
    to{transform:rotate(360deg);}
}
@keyframes cvUpdateLoadingRunner{
    0%{transform:translateX(-105%);}
    50%{transform:translateX(74%);}
    100%{transform:translateX(158%);}
}
@keyframes cvUpdateLoadingTextMove{
    from{transform:translateY(0) scale(1); opacity:.88;}
    to{transform:translateY(-3px) scale(1.025); opacity:1;}
}
@keyframes cvUpdateLoadingFloat{
    from{transform:translateY(0);}
    to{transform:translateY(-5px);}
}
@keyframes cvUpdateLoadingShine{
    0%{left:-70%;}
    100%{left:125%;}
}

/* v21.47 - Modal Riwayat Pekerjaan: semua input dibuat identik, full width, dan datalist editable. */
#cvBuilderModal.is-work-modal .cv-modal-card{
    width:min(676px, calc(100vw - 28px))!important;
    max-height:94vh!important;
    border-radius:6px!important;
    border:1px solid #cbd5e1!important;
    box-shadow:0 18px 48px rgba(15,23,42,.28)!important;
}
#cvBuilderModal.is-work-modal .cv-modal-head{
    min-height:70px!important;
    padding:16px 24px!important;
    background:#fff!important;
    border-bottom:1px solid #94a3b8!important;
}
#cvBuilderModal.is-work-modal .cv-modal-head h2{
    font-size:18px!important;
    font-weight:800!important;
    color:#1e293b!important;
}
#cvBuilderModal.is-work-modal .cv-modal-body{
    padding:24px!important;
    gap:13px!important;
    background:#fff!important;
    scrollbar-gutter:stable!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    max-width:none!important;
    color:#334155!important;
    font-size:13px!important;
    font-weight:500!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field > span{
    display:block!important;
    line-height:1.25!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field input,
#cvBuilderModal.is-work-modal .cv-modal-field textarea,
#cvBuilderModal.is-work-modal .cv-modal-field select{
    width:100%!important;
    max-width:none!important;
    border-radius:0!important;
    border:1px solid #d1d5db!important;
    background:#fff!important;
    color:#111827!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.45!important;
    box-shadow:inset 0 0 0 1px #f3f4f6!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field input,
#cvBuilderModal.is-work-modal .cv-modal-field select{
    min-height:52px!important;
    padding:12px 10px!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field textarea{
    min-height:114px!important;
    padding:8px 10px!important;
    resize:vertical!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field.checkbox{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-height:24px!important;
    padding:0!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field.checkbox input{
    width:14px!important;
    height:14px!important;
    min-height:14px!important;
    padding:0!important;
    border-radius:0!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field.checkbox span{
    display:inline!important;
    color:#111827!important;
    font-size:12px!important;
}
#cvBuilderModal.is-work-modal .cv-date-helper-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
}
#cvBuilderModal.is-work-modal .cv-date-month-picker{
    min-width:48px!important;
    width:48px!important;
    padding:0 4px!important;
    cursor:pointer!important;
    color:transparent!important;
}
#cvBuilderModal.is-work-modal .cv-field-help{
    display:block!important;
    margin-top:2px!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:600!important;
    line-height:1.35!important;
}


/* v21.49 - Modal Riwayat Magang: identik seperti Riwayat Pekerjaan, dengan datalist editable. */
#cvBuilderModal.is-internship-modal .cv-modal-card{
    width:min(676px, calc(100vw - 28px))!important;
    max-height:94vh!important;
    border-radius:6px!important;
    border:1px solid #cbd5e1!important;
    box-shadow:0 18px 48px rgba(15,23,42,.28)!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-head{
    min-height:70px!important;
    padding:16px 24px!important;
    background:#fff!important;
    border-bottom:1px solid #94a3b8!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-head h2{
    font-size:18px!important;
    font-weight:800!important;
    color:#1e293b!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-body{
    padding:24px!important;
    gap:13px!important;
    background:#fff!important;
    scrollbar-gutter:stable!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    max-width:none!important;
    color:#334155!important;
    font-size:13px!important;
    font-weight:500!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field > span{
    display:block!important;
    line-height:1.25!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field input,
#cvBuilderModal.is-internship-modal .cv-modal-field textarea,
#cvBuilderModal.is-internship-modal .cv-modal-field select{
    width:100%!important;
    max-width:none!important;
    border-radius:0!important;
    border:1px solid #d1d5db!important;
    background:#fff!important;
    color:#111827!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.45!important;
    box-shadow:inset 0 0 0 1px #f3f4f6!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field input,
#cvBuilderModal.is-internship-modal .cv-modal-field select{
    min-height:52px!important;
    padding:12px 10px!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field textarea{
    min-height:114px!important;
    padding:8px 10px!important;
    resize:vertical!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field.checkbox{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-height:24px!important;
    padding:0!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field.checkbox input{
    width:14px!important;
    height:14px!important;
    min-height:14px!important;
    padding:0!important;
    border-radius:0!important;
}
#cvBuilderModal.is-internship-modal .cv-modal-field.checkbox span{
    display:inline!important;
    color:#111827!important;
    font-size:12px!important;
}
#cvBuilderModal.is-internship-modal .cv-date-helper-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
}
#cvBuilderModal.is-internship-modal .cv-date-month-picker{
    min-width:48px!important;
    width:48px!important;
    padding:0 4px!important;
    cursor:pointer!important;
    color:transparent!important;
}
#cvBuilderModal.is-internship-modal .cv-field-help{
    display:block!important;
    margin-top:2px!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:600!important;
    line-height:1.35!important;
}


/* v21.48 - Semua input tanggal CV memakai pemilih kalender bulan/tahun. */
#cvBuilderModal .cv-modal-field.date-helper.calendar-only{
    width:100%!important;
    max-width:none!important;
}
#cvBuilderModal .cv-calendar-only-row{
    display:block!important;
    width:100%!important;
}
#cvBuilderModal .cv-date-main-picker{
    width:100%!important;
    min-width:100%!important;
    height:54px!important;
    min-height:54px!important;
    padding:0 16px!important;
    border:1px solid #d5dbe7!important;
    border-radius:0!important;
    background:#fff!important;
    color:#0f172a!important;
    font-size:14px!important;
    line-height:54px!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    appearance:auto!important;
    -webkit-appearance:auto!important;
}
#cvBuilderModal .cv-date-main-picker:focus{
    outline:2px solid rgba(37,99,235,.18)!important;
    border-color:#93b4ff!important;
    box-shadow:0 0 0 3px rgba(37,99,235,.08)!important;
}
#cvBuilderModal .cv-date-main-picker::-webkit-calendar-picker-indicator{
    opacity:1!important;
    cursor:pointer!important;
    width:22px!important;
    height:22px!important;
}
#cvBuilderModal .cv-field-help{
    display:block!important;
    margin-top:5px!important;
    color:#64748b!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:600!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field.calendar-only .cv-calendar-only-row,
#cvBuilderModal.is-work-modal .cv-modal-field.calendar-only .cv-calendar-only-row,
#cvBuilderModal.is-internship-modal .cv-modal-field.calendar-only .cv-calendar-only-row,
#cvBuilderModal .cv-modal-field.calendar-only .cv-calendar-only-row{
    display:block!important;
    grid-template-columns:none!important;
    width:100%!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field.calendar-only .cv-date-main-picker,
#cvBuilderModal.is-work-modal .cv-modal-field.calendar-only .cv-date-main-picker,
#cvBuilderModal.is-internship-modal .cv-modal-field.calendar-only .cv-date-main-picker,
#cvBuilderModal .cv-modal-field.calendar-only .cv-date-main-picker{
    width:100%!important;
    min-width:100%!important;
    max-width:none!important;
    height:54px!important;
    min-height:54px!important;
    padding:0 16px!important;
    color:#0f172a!important;
}

/* v21.50 - Modal Sertifikasi: input seragam seperti riwayat kerja/magang, datalist tetap editable. */
#cvBuilderModal.is-certification-modal .cv-modal-card{
    width:min(676px, calc(100vw - 28px))!important;
    max-height:94vh!important;
    border-radius:6px!important;
    border:1px solid #cbd5e1!important;
    box-shadow:0 18px 48px rgba(15,23,42,.28)!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-head{
    min-height:70px!important;
    padding:16px 24px!important;
    background:#fff!important;
    border-bottom:1px solid #94a3b8!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-head h2{
    font-size:18px!important;
    font-weight:800!important;
    color:#1e293b!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-body{
    padding:24px!important;
    gap:13px!important;
    background:#fff!important;
    scrollbar-gutter:stable!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    max-width:none!important;
    color:#334155!important;
    font-size:13px!important;
    font-weight:500!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field > span{
    display:block!important;
    line-height:1.25!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field input,
#cvBuilderModal.is-certification-modal .cv-modal-field textarea,
#cvBuilderModal.is-certification-modal .cv-modal-field select{
    width:100%!important;
    max-width:none!important;
    border-radius:0!important;
    border:1px solid #d1d5db!important;
    background:#fff!important;
    color:#111827!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.45!important;
    box-shadow:inset 0 0 0 1px #f3f4f6!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field input,
#cvBuilderModal.is-certification-modal .cv-modal-field select{
    min-height:52px!important;
    padding:12px 10px!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field textarea{
    min-height:114px!important;
    padding:8px 10px!important;
    resize:vertical!important;
}
#cvBuilderModal.is-certification-modal .cv-field-help{
    display:block!important;
    margin-top:2px!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:600!important;
    line-height:1.35!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field.calendar-only .cv-calendar-only-row{
    display:block!important;
    grid-template-columns:none!important;
    width:100%!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field.calendar-only .cv-date-main-picker{
    width:100%!important;
    min-width:100%!important;
    max-width:none!important;
    height:54px!important;
    min-height:54px!important;
    padding:0 16px!important;
    color:#0f172a!important;
}

/* v21.53 - Combo/datalist terlihat seperti dropdown, tetapi tetap bisa diketik manual. */
#cvBuilderModal .cv-modal-field.has-combo-datalist .cv-combo-wrap{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
}
#cvBuilderModal .cv-modal-field.has-combo-datalist .cv-combo-input{
    width:100%!important;
    padding-right:46px!important;
}
#cvBuilderModal .cv-modal-field.has-combo-datalist .cv-combo-trigger{
    position:absolute!important;
    right:8px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border:1px solid #bfdbfe!important;
    border-radius:10px!important;
    background:#eff6ff!important;
    color:#1d4ed8!important;
    font-size:16px!important;
    font-weight:900!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    box-shadow:0 6px 14px rgba(37, 99, 235, .12)!important;
}
#cvBuilderModal .cv-modal-field.has-combo-datalist .cv-combo-trigger:hover{
    background:#dbeafe!important;
    border-color:#60a5fa!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger{
    background:#fff7ed!important;
    border-color:#fed7aa!important;
    color:#c2410c!important;
}
#cvBuilderModal.is-certification-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger:hover{
    background:#ffedd5!important;
    border-color:#fb923c!important;
}

/* v21.58 - Input tanggal/periode CV tetap memakai kalender, tanpa tombol kalender terpisah di luar kotak input. */
#cvBuilderModal .cv-calendar-picker-shell{
    position:relative!important;
    display:block!important;
    width:100%!important;
}
#cvBuilderModal .cv-calendar-picker-shell .cv-date-main-picker{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    padding:0 14px!important;
    border:1px solid #d5dbe7!important;
    border-radius:0!important;
    background:#ffffff!important;
    color:#0f172a!important;
    font-size:14px!important;
    font-weight:600!important;
    cursor:pointer!important;
    box-sizing:border-box!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field.calendar-only .cv-calendar-picker-shell,
#cvBuilderModal.is-work-modal .cv-modal-field.calendar-only .cv-calendar-picker-shell,
#cvBuilderModal.is-internship-modal .cv-modal-field.calendar-only .cv-calendar-picker-shell,
#cvBuilderModal.is-certification-modal .cv-modal-field.calendar-only .cv-calendar-picker-shell{
    display:block!important;
}
#cvBuilderModal.is-education-modal .cv-modal-field.calendar-only .cv-date-main-picker,
#cvBuilderModal.is-work-modal .cv-modal-field.calendar-only .cv-date-main-picker,
#cvBuilderModal.is-internship-modal .cv-modal-field.calendar-only .cv-date-main-picker,
#cvBuilderModal.is-certification-modal .cv-modal-field.calendar-only .cv-date-main-picker{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    color:#0f172a!important;
}

/* v21.56 - Pilihan bantuan CV dibuat custom supaya terlihat jelas, tidak bergantung native datalist browser. */
#cvBuilderModal .cv-modal-field.has-combo-datalist .cv-combo-wrap{
    position:relative!important;
    overflow:visible!important;
}
#cvBuilderModal .cv-combo-suggestion-panel{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 6px)!important;
    z-index:999999!important;
    display:none!important;
    max-height:260px!important;
    overflow:auto!important;
    padding:6px!important;
    border:1px solid #93c5fd!important;
    border-radius:12px!important;
    background:#ffffff!important;
    box-shadow:0 18px 38px rgba(15,23,42,.24)!important;
}
#cvBuilderModal .cv-combo-suggestion-panel.is-open{
    display:block!important;
}
#cvBuilderModal .cv-combo-option{
    width:100%!important;
    min-height:36px!important;
    display:block!important;
    padding:8px 10px!important;
    border:0!important;
    border-radius:8px!important;
    background:#ffffff!important;
    color:#0f172a!important;
    font-size:13px!important;
    font-weight:650!important;
    line-height:1.25!important;
    text-align:left!important;
    cursor:pointer!important;
}
#cvBuilderModal .cv-combo-option:hover,
#cvBuilderModal .cv-combo-option:focus{
    outline:0!important;
    background:#eff6ff!important;
    color:#1d4ed8!important;
}
#cvBuilderModal .cv-combo-empty{
    padding:10px!important;
    color:#64748b!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1.4!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger{
    background:#ecfdf5!important;
    border-color:#86efac!important;
    color:#15803d!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger:hover{
    background:#dcfce7!important;
    border-color:#22c55e!important;
}
#cvBuilderModal.is-work-modal .cv-modal-field.has-combo-datalist .cv-combo-suggestion-panel{
    border-color:#86efac!important;
}
#cvBuilderModal.is-work-modal .cv-combo-option:hover,
#cvBuilderModal.is-work-modal .cv-combo-option:focus{
    background:#ecfdf5!important;
    color:#15803d!important;
}


/* v21.57 - Safety gate: tombol Download Word hanya boleh terlihat untuk login admin.
   Jika tombol word masih tercetak oleh fallback toolbar, React toolbar, atau cache HTML lama,
   user/guest tetap tidak akan melihat tombol tersebut. */
body:not(.role-admin) [data-export-kind="word"],
body:not(.role-admin) a[href*="export.word"],
body:not(.role-admin) a[href*="letter.export.word"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.role-admin [data-export-kind="word"] {
    display: inline-flex;
}

/* v21.59 - Checklist status aktif untuk pekerjaan, magang, organisasi dibuat rapi satu gaya. */
#cvBuilderModal .cv-modal-field.status-checkbox{
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr)!important;
    align-items:center!important;
    gap:4px 10px!important;
    min-height:auto!important;
    padding:8px 0!important;
}
#cvBuilderModal .cv-modal-field.status-checkbox input{
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
}
#cvBuilderModal .cv-modal-field.status-checkbox > span{
    grid-column:2!important;
    grid-row:1!important;
    font-size:12px!important;
    font-weight:700!important;
}
#cvBuilderModal .cv-modal-field.status-checkbox .cv-field-help{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.35!important;
}

/* v21.61 - Pilihan bantuan global panel kiri Buat CV: organisasi, personal, skills/software/bahasa, dan textarea. */
#cvBuilderModal.is-organization-modal .cv-modal-card,
#cvBuilderModal.is-general-modal .cv-modal-card{
    width:min(676px, calc(100vw - 28px))!important;
    max-height:94vh!important;
    border-radius:6px!important;
    border:1px solid #cbd5e1!important;
    box-shadow:0 18px 48px rgba(15,23,42,.28)!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-head,
#cvBuilderModal.is-general-modal .cv-modal-head{
    min-height:70px!important;
    padding:16px 24px!important;
    background:#fff!important;
    border-bottom:1px solid #94a3b8!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-head h2,
#cvBuilderModal.is-general-modal .cv-modal-head h2{
    font-size:18px!important;
    font-weight:800!important;
    color:#1e293b!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-body,
#cvBuilderModal.is-general-modal .cv-modal-body{
    padding:24px!important;
    gap:13px!important;
    background:#fff!important;
    scrollbar-gutter:stable!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field,
#cvBuilderModal.is-general-modal .cv-modal-field{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    max-width:none!important;
    color:#334155!important;
    font-size:13px!important;
    font-weight:500!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field > span,
#cvBuilderModal.is-general-modal .cv-modal-field > span{
    display:block!important;
    line-height:1.25!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field input,
#cvBuilderModal.is-organization-modal .cv-modal-field textarea,
#cvBuilderModal.is-general-modal .cv-modal-field input,
#cvBuilderModal.is-general-modal .cv-modal-field textarea{
    width:100%!important;
    max-width:none!important;
    border-radius:10px!important;
    border:1px solid #cbd5e1!important;
    background:#fff!important;
    color:#111827!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1.45!important;
    box-shadow:inset 0 0 0 1px #f8fafc!important;
    box-sizing:border-box!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field input,
#cvBuilderModal.is-general-modal .cv-modal-field input{
    min-height:52px!important;
    padding:12px 10px!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field textarea,
#cvBuilderModal.is-general-modal .cv-modal-field textarea{
    min-height:128px!important;
    padding:12px 12px!important;
    resize:vertical!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field.calendar-only .cv-calendar-picker-shell{
    display:block!important;
    width:100%!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field.calendar-only .cv-date-main-picker{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    color:#0f172a!important;
}
#cvBuilderModal .cv-modal-field.has-textarea-combo .cv-textarea-combo-wrap{
    position:relative!important;
    display:block!important;
    width:100%!important;
    overflow:visible!important;
}
#cvBuilderModal .cv-modal-field.has-textarea-combo .cv-textarea-combo-input{
    padding-right:54px!important;
}
#cvBuilderModal .cv-modal-field.has-textarea-combo .cv-textarea-combo-trigger{
    top:12px!important;
    right:12px!important;
    transform:none!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:12px!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger{
    background:#fefce8!important;
    border-color:#fde68a!important;
    color:#a16207!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger:hover{
    background:#fef3c7!important;
    border-color:#facc15!important;
}
#cvBuilderModal.is-organization-modal .cv-modal-field.has-combo-datalist .cv-combo-suggestion-panel{
    border-color:#facc15!important;
}
#cvBuilderModal.is-organization-modal .cv-combo-option:hover,
#cvBuilderModal.is-organization-modal .cv-combo-option:focus{
    background:#fefce8!important;
    color:#a16207!important;
}
#cvBuilderModal.is-general-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger{
    background:#f5f3ff!important;
    border-color:#c4b5fd!important;
    color:#6d28d9!important;
}
#cvBuilderModal.is-general-modal .cv-modal-field.has-combo-datalist .cv-combo-trigger:hover{
    background:#ede9fe!important;
    border-color:#8b5cf6!important;
}
#cvBuilderModal.is-general-modal .cv-modal-field.has-combo-datalist .cv-combo-suggestion-panel{
    border-color:#c4b5fd!important;
}
#cvBuilderModal.is-general-modal .cv-combo-option:hover,
#cvBuilderModal.is-general-modal .cv-combo-option:focus{
    background:#f5f3ff!important;
    color:#6d28d9!important;
}


/* v21.54 - Edit Ringkasan Profesional dibuat lebih ringkas; pilihan bantuan hanya muncul setelah kolom diklik. */
#cvBuilderModal.is-summary-modal .cv-modal-card{
    width:min(500px, calc(100vw - 24px))!important;
    max-width:500px!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:82vh!important;
    overflow:visible!important;
    border-radius:22px!important;
    border:1px solid #dbeafe!important;
    box-shadow:0 22px 46px rgba(15,23,42,.24)!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-head{
    min-height:0!important;
    padding:14px 16px!important;
    gap:12px!important;
    background:#ffffff!important;
    border-bottom:1px solid #dbeafe!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-badge{
    min-height:22px!important;
    padding:0 9px!important;
    font-size:10px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-head h2{
    margin:7px 0 3px!important;
    font-size:18px!important;
    line-height:1.2!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-head p{
    font-size:12px!important;
    line-height:1.35!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-close{
    width:38px!important;
    height:38px!important;
    font-size:24px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-body{
    padding:14px 16px 12px!important;
    gap:8px!important;
    background:#ffffff!important;
    overflow:visible!important;
    max-height:none!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field{
    gap:7px!important;
    font-size:12px!important;
    font-weight:700!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field > span{
    font-size:12px!important;
    line-height:1.25!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field textarea[name="summary"]{
    min-height:150px!important;
    max-height:210px!important;
    padding:12px 46px 12px 12px!important;
    border-radius:12px!important;
    border:1px solid #cbd5e1!important;
    font-size:13px!important;
    line-height:1.42!important;
    resize:vertical!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field .cv-field-help{
    display:none!important;
}
#cvBuilderModal.is-summary-modal .cv-combo-suggestion-panel{
    max-height:184px!important;
    border-radius:12px!important;
    box-shadow:0 16px 32px rgba(15,23,42,.20)!important;
}
#cvBuilderModal.is-summary-modal .cv-combo-option{
    font-size:12px!important;
    line-height:1.3!important;
    padding:8px 9px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-foot{
    position:static!important;
    padding:12px 16px 14px!important;
    gap:8px!important;
    background:#ffffff!important;
    border-top:1px solid #dbeafe!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-foot .btn{
    min-height:40px!important;
    padding:0 14px!important;
    border-radius:12px!important;
    font-size:14px!important;
}
@media (max-width: 560px){
    #cvBuilderModal.is-summary-modal .cv-modal-card{
        width:100%!important;
        max-width:none!important;
        border-radius:0!important;
    }
}

/* v21.55 - Edit Ringkasan Profesional benar-benar compact: tidak ada ruang kosong besar di antara label dan kolom. */
#cvBuilderModal.is-summary-modal{
    align-items:flex-start!important;
    justify-content:flex-start!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-card{
    display:flex!important;
    flex-direction:column!important;
    width:min(468px, calc(100vw - 24px))!important;
    max-width:468px!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100vh - 28px)!important;
    margin:14px 0 14px 14px!important;
    overflow:visible!important;
    border-radius:0 20px 20px 0!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-head{
    flex:0 0 auto!important;
    min-height:0!important;
    padding:12px 14px 10px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-head h2{
    margin:5px 0 2px!important;
    font-size:17px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-head p{
    font-size:11.5px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-close{
    width:36px!important;
    height:36px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-body{
    flex:0 0 auto!important;
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:10px 14px 8px!important;
    background:#ffffff!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field,
#cvBuilderModal.is-summary-modal .cv-modal-field.has-combo-datalist,
#cvBuilderModal.is-summary-modal .cv-modal-field.has-textarea-combo{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field > span{
    display:block!important;
    margin:0 0 6px!important;
    padding:0!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field .cv-combo-wrap,
#cvBuilderModal.is-summary-modal .cv-modal-field.has-combo-datalist .cv-combo-wrap,
#cvBuilderModal.is-summary-modal .cv-modal-field.has-textarea-combo .cv-textarea-combo-wrap{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field textarea[name="summary"],
#cvBuilderModal.is-summary-modal .cv-modal-field.has-textarea-combo .cv-textarea-combo-input[name="summary"]{
    height:128px!important;
    min-height:128px!important;
    max-height:150px!important;
    margin:0!important;
    padding:10px 46px 10px 10px!important;
    box-sizing:border-box!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-field .cv-field-help{
    display:none!important;
}
#cvBuilderModal.is-summary-modal .cv-combo-suggestion-panel{
    top:calc(100% + 6px)!important;
    max-height:170px!important;
}
#cvBuilderModal.is-summary-modal .cv-modal-foot{
    flex:0 0 auto!important;
    position:static!important;
    padding:10px 14px 12px!important;
}
@media (max-width: 560px){
    #cvBuilderModal.is-summary-modal .cv-modal-card{
        width:calc(100vw - 16px)!important;
        max-width:none!important;
        margin:8px!important;
        border-radius:16px!important;
    }
}


/* v21.59: anti-salah approve pembayaran */
.traffic-verify-check,
.traffic-react-verify-check{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    font-size:12px;
    color:#374151;
    line-height:1.4;
}
.traffic-verify-check input,
.traffic-react-verify-check input{
    width:auto;
    min-width:16px;
    height:16px;
    margin:0;
}

/* v21.59 - Mode HP Buat CV/Buat Surat: tab Input | Preview supaya UI tidak berantakan di layar kecil. */
.mobile-document-switch{
    display:none;
}
@media (max-width:900px){
    .mobile-document-switch{
        display:grid!important;
        grid-template-columns:1fr 1fr;
        gap:8px;
        position:sticky;
        top:0;
        z-index:220;
        padding:10px;
        background:#f8fafc;
        border-bottom:1px solid #cbd5e1;
        box-shadow:0 8px 18px rgba(15,23,42,.08);
    }
    .mobile-document-switch button{
        min-height:44px;
        border:1px solid #cbd5e1;
        border-radius:14px;
        background:#ffffff;
        color:#334155;
        font-weight:900;
        font-size:14px;
        cursor:pointer;
    }
    .mobile-document-switch button.is-active{
        background:#2563eb;
        border-color:#2563eb;
        color:#ffffff;
        box-shadow:0 10px 22px rgba(37,99,235,.22);
    }
    body.cv-builder-body .cv-builder-python-shell > .mobile-document-switch{
        grid-column:1 / -1;
    }
    body.cv-builder-body .cv-builder-python-shell[data-mobile-doc-view="input"] .cv-builder-preview-wrap{
        display:none!important;
    }
    body.cv-builder-body .cv-builder-python-shell[data-mobile-doc-view="preview"] > form{
        display:none!important;
    }
    body.cv-builder-body .cv-builder-python-shell[data-mobile-doc-view="preview"] .cv-builder-preview-wrap{
        display:grid!important;
        min-height:calc(100vh - 154px)!important;
    }
    body.cv-builder-body .cv-builder-python-shell[data-mobile-doc-view="preview"] .cv-preview-viewport{
        min-height:calc(100vh - 230px)!important;
        padding:12px 10px 80px!important;
        overflow:auto!important;
    }
    body.cv-builder-body .cv-builder-python-shell[data-mobile-doc-view="preview"] .cv-preview-stage{
        margin:0 auto!important;
        transform-origin:top center!important;
    }
    body.cv-builder-body .cv-builder-python-shell[data-mobile-doc-view="input"] > form{
        display:block!important;
        height:auto!important;
        min-height:calc(100vh - 154px)!important;
        overflow:visible!important;
        border-right:0!important;
    }
    body.cv-builder-body .cv-builder-python-shell[data-mobile-doc-view="input"] .cv-builder-left{
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        padding-bottom:96px!important;
    }
}
@media (max-width:560px){
    .mobile-document-switch{
        padding:8px;
        gap:6px;
    }
    .mobile-document-switch button{
        min-height:42px;
        border-radius:12px;
        font-size:13px;
    }
}


/* v21.60 - Mobile login/dashboard navigation: hamburger + drawer, tanpa membuat menu turun berantakan */
.app-mobile-nav-toggle,
.app-mobile-nav-overlay,
.app-mobile-drawer__head{
    display:none;
}
.app-mobile-drawer{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 auto;
    min-width:0;
}
@media (max-width: 980px){
    .app-header.navbar{
        position:sticky !important;
        top:0 !important;
        z-index:10080 !important;
        overflow:visible !important;
    }
    .app-header .app-header__inner.container-fluid,
    .app-header--user .app-header__inner.container-fluid,
    .app-header--admin .app-header__inner.container-fluid{
        min-height:66px !important;
        padding:9px 13px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
        flex-wrap:nowrap !important;
        overflow:visible !important;
    }
    .app-header .app-brand.navbar-brand,
    .app-header--user .app-brand.navbar-brand,
    .app-header--admin .app-brand.navbar-brand{
        flex:1 1 auto !important;
        width:auto !important;
        max-width:calc(100% - 116px) !important;
        min-width:0 !important;
        margin:0 !important;
        gap:9px !important;
    }
    .app-header .app-brand__mark,
    .app-header--user .app-brand__mark,
    .app-header--admin .app-brand__mark{
        width:42px !important;
        height:42px !important;
        flex:0 0 42px !important;
    }
    .app-header .app-brand__text,
    .app-header--user .app-brand__text,
    .app-header--admin .app-brand__text{
        min-width:0 !important;
        overflow:hidden !important;
    }
    .app-header .app-brand__text strong,
    .app-header--user .app-brand__text strong,
    .app-header--admin .app-brand__text strong{
        display:block !important;
        max-width:100% !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
        font-size:19px !important;
    }
    .app-mobile-nav-toggle{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        flex:0 0 auto !important;
        min-width:86px !important;
        min-height:42px !important;
        margin-left:auto !important;
        padding:0 13px !important;
        border-radius:999px !important;
        border:1px solid rgba(37,99,235,.2) !important;
        background:linear-gradient(135deg,#eff6ff,#ffffff) !important;
        color:#1d4ed8 !important;
        font-size:13px !important;
        font-weight:950 !important;
        cursor:pointer !important;
        box-shadow:0 12px 28px rgba(37,99,235,.13) !important;
    }
    .app-mobile-nav-toggle__bars{
        width:18px !important;
        display:grid !important;
        gap:4px !important;
    }
    .app-mobile-nav-toggle__bars i{
        display:block !important;
        width:100% !important;
        height:2px !important;
        border-radius:999px !important;
        background:currentColor !important;
        transition:transform .18s ease, opacity .18s ease !important;
    }
    .app-mobile-nav-toggle.is-open .app-mobile-nav-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg) !important;}
    .app-mobile-nav-toggle.is-open .app-mobile-nav-toggle__bars i:nth-child(2){opacity:0 !important;}
    .app-mobile-nav-toggle.is-open .app-mobile-nav-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg) !important;}
    .app-mobile-nav-overlay{
        display:block !important;
        position:fixed !important;
        inset:0 !important;
        z-index:10070 !important;
        background:rgba(15,23,42,.48) !important;
        backdrop-filter:blur(3px) !important;
        -webkit-backdrop-filter:blur(3px) !important;
        opacity:0 !important;
        pointer-events:none !important;
        transition:opacity .22s ease !important;
    }
    .app-mobile-drawer,
    .app-header--user .app-mobile-drawer,
    .app-header--admin .app-mobile-drawer{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        z-index:10090 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:14px !important;
        width:min(392px, calc(100vw - 32px)) !important;
        max-width:100% !important;
        min-width:0 !important;
        height:100dvh !important;
        padding:18px !important;
        margin:0 !important;
        border-left:1px solid #e2e8f0 !important;
        border-radius:24px 0 0 24px !important;
        background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
        box-shadow:-32px 0 70px rgba(15,23,42,.26) !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        transform:translateX(110%) !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:transform .26s cubic-bezier(.22,.9,.28,1), visibility .26s ease !important;
    }
    .app-mobile-drawer__head{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
        padding:4px 2px 12px !important;
        border-bottom:1px solid #e2e8f0 !important;
    }
    .app-mobile-drawer__head strong{
        display:block !important;
        color:#0f172a !important;
        font-size:16px !important;
        line-height:1.15 !important;
        font-weight:950 !important;
    }
    .app-mobile-drawer__head small{
        display:block !important;
        margin-top:4px !important;
        color:#64748b !important;
        font-size:12px !important;
        font-weight:850 !important;
        line-height:1.25 !important;
    }
    .app-mobile-drawer__close{
        width:42px !important;
        height:42px !important;
        flex:0 0 42px !important;
        border:0 !important;
        border-radius:15px !important;
        background:#fee2e2 !important;
        color:#b91c1c !important;
        font-size:27px !important;
        line-height:1 !important;
        font-weight:900 !important;
        cursor:pointer !important;
    }
    body.app-mobile-nav-open{
        overflow:hidden !important;
        touch-action:none !important;
    }
    body.app-mobile-nav-open .app-mobile-nav-overlay{
        opacity:1 !important;
        pointer-events:auto !important;
    }
    body.app-mobile-nav-open .app-mobile-drawer{
        transform:translateX(0) !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }
    .app-mobile-drawer .app-nav,
    .app-mobile-drawer .app-nav.navbar-nav,
    .app-header--user .app-mobile-drawer .app-nav.navbar-nav,
    .app-header--admin .app-mobile-drawer .app-nav.navbar-nav{
        order:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        flex:0 0 auto !important;
        width:100% !important;
        max-width:100% !important;
        gap:8px !important;
        margin:0 !important;
        padding:0 !important;
        overflow:visible !important;
    }
    .app-mobile-drawer .app-nav > a.nav-link,
    .app-mobile-drawer .app-nav > .app-nav__dropdown > button.nav-link,
    .app-header--user .app-mobile-drawer .app-nav > a.nav-link,
    .app-header--user .app-mobile-drawer .app-nav > .app-nav__dropdown > button.nav-link,
    .app-header--admin .app-mobile-drawer .app-nav > a.nav-link,
    .app-header--admin .app-mobile-drawer .app-nav > .app-nav__dropdown > button.nav-link{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        padding:0 15px !important;
        border-radius:16px !important;
        border:1px solid #e2e8f0 !important;
        background:#ffffff !important;
        color:#334155 !important;
        box-shadow:0 10px 24px rgba(15,23,42,.045) !important;
        font-size:14px !important;
        font-weight:900 !important;
        line-height:1.1 !important;
        text-align:left !important;
        white-space:normal !important;
    }
    .app-mobile-drawer .app-nav > a.nav-link.active,
    .app-mobile-drawer .app-nav > .app-nav__dropdown > button.nav-link.active,
    .app-mobile-drawer .app-nav > a.nav-link:hover,
    .app-mobile-drawer .app-nav > .app-nav__dropdown > button.nav-link:hover{
        border-color:#bfdbfe !important;
        background:linear-gradient(135deg,#eff6ff,#ffffff) !important;
        color:#1d4ed8 !important;
    }
    .app-mobile-drawer .app-nav__dropdown,
    .app-header--user .app-mobile-drawer .app-nav__dropdown,
    .app-header--admin .app-mobile-drawer .app-nav__dropdown{
        width:100% !important;
        position:relative !important;
        overflow:visible !important;
    }
    .app-mobile-drawer .app-nav__dropdown::after,
    .app-mobile-drawer .app-nav__menu::before{
        display:none !important;
        content:none !important;
    }
    .app-mobile-drawer .app-nav__dropdown .app-nav__menu,
    .app-header--user .app-mobile-drawer .app-nav__dropdown .app-nav__menu,
    .app-header--admin .app-mobile-drawer .app-nav__dropdown .app-nav__menu{
        position:static !important;
        display:none !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
        transform:none !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:8px 0 0 !important;
        padding:8px !important;
        border-radius:16px !important;
        border:1px solid #e2e8f0 !important;
        background:#f8fafc !important;
        box-shadow:none !important;
        gap:6px !important;
        z-index:auto !important;
    }
    .app-mobile-drawer .app-nav__dropdown:hover .app-nav__menu,
    .app-mobile-drawer .app-nav__dropdown:focus-within .app-nav__menu,
    .app-mobile-drawer .app-nav__dropdown.is-open .app-nav__menu{
        display:grid !important;
    }
    .app-mobile-drawer .app-nav__menu a,
    .app-header--user .app-mobile-drawer .app-nav__menu a,
    .app-header--admin .app-mobile-drawer .app-nav__menu a{
        min-height:42px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
        padding:0 12px !important;
        border-radius:12px !important;
        background:#ffffff !important;
        color:#334155 !important;
        font-size:12.5px !important;
        font-weight:850 !important;
        text-decoration:none !important;
        white-space:normal !important;
    }
    .app-mobile-drawer .app-header__actions,
    .app-header--user .app-mobile-drawer .app-header__actions,
    .app-header--admin .app-mobile-drawer .app-header__actions{
        order:2 !important;
        width:100% !important;
        max-width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:10px !important;
        margin:4px 0 0 !important;
        padding-top:12px !important;
        border-top:1px solid #e2e8f0 !important;
    }
    .app-mobile-drawer .user-pill,
    .app-mobile-drawer .user-pill.badge,
    .app-header--user .app-mobile-drawer .user-pill,
    .app-header--user .app-mobile-drawer .user-pill.badge,
    .app-header--admin .app-mobile-drawer .user-pill,
    .app-header--admin .app-mobile-drawer .user-pill.badge{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        min-height:44px !important;
        height:auto !important;
        justify-content:center !important;
        padding:10px 12px !important;
        text-align:center !important;
        white-space:normal !important;
    }
    .app-mobile-drawer .app-header__actions .btn.small,
    .app-mobile-drawer .app-header__actions .btn-danger,
    .app-header--user .app-mobile-drawer .app-header__actions .btn.small,
    .app-header--user .app-mobile-drawer .app-header__actions .btn-danger,
    .app-header--admin .app-mobile-drawer .app-header__actions .btn.small,
    .app-header--admin .app-mobile-drawer .app-header__actions .btn-danger{
        width:100% !important;
        min-height:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:16px !important;
        font-size:14px !important;
        font-weight:950 !important;
    }
    .app-body.with-navbar{
        padding-top:16px !important;
    }
}
@media (max-width: 390px){
    .app-mobile-nav-toggle{
        min-width:76px !important;
        padding:0 10px !important;
    }
    .app-mobile-nav-toggle__text{
        font-size:12px !important;
    }
    .app-mobile-drawer,
    .app-header--user .app-mobile-drawer,
    .app-header--admin .app-mobile-drawer{
        width:calc(100vw - 18px) !important;
        padding:15px !important;
        border-radius:20px 0 0 20px !important;
    }
}

/* v21.61 SEO landing pages: keyword pages for CV ATS and surat lamaran. */
.seo-landing-page {
    padding: clamp(18px, 4vw, 44px);
}
.seo-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr);
    gap: clamp(18px, 3vw, 32px);
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto 24px;
}
.seo-hero-card__content,
.seo-hero-card__summary,
.seo-content-section {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(226,232,240,.95);
    border-radius: 28px;
    box-shadow: 0 22px 52px rgba(15,23,42,.08);
}
.seo-hero-card__content {
    padding: clamp(24px, 4vw, 46px);
}
.seo-hero-card__content h1 {
    font-size: clamp(2rem, 4.2vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 12px 0 16px;
    color: #0f172a;
}
.seo-hero-card__content p {
    max-width: 760px;
    color: #475569;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.75;
}
.seo-hero-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
.seo-hero-card__summary {
    padding: 24px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.seo-hero-card__summary strong {
    color: #0f172a;
    font-size: 1.05rem;
    margin-bottom: 12px;
}
.seo-keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.seo-keyword-list span {
    padding: 9px 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 800;
    font-size: .85rem;
}
.seo-content-section {
    max-width: 1180px;
    margin: 18px auto;
    padding: clamp(20px, 3vw, 32px);
}
.seo-card-grid .seo-info-card h3,
.seo-faq-list h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.05rem;
}
.seo-steps-box {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: start;
}
.seo-steps-box ol {
    margin: 0;
    padding-left: 20px;
    color: #334155;
    line-height: 1.8;
    font-weight: 700;
}
.seo-sample-box pre {
    white-space: pre-wrap;
    background: #0f172a;
    color: #e5e7eb;
    padding: 18px;
    border-radius: 18px;
    line-height: 1.7;
    font-family: "Arial", sans-serif;
    margin: 12px 0 0;
}
.seo-faq-list {
    display: grid;
    gap: 14px;
}
.seo-faq-list article {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #f8fafc;
}
.seo-faq-list p,
.seo-related-grid small {
    color: #64748b;
    margin: 0;
}
.seo-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.seo-related-grid a {
    text-decoration: none;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    display: grid;
    gap: 8px;
}
.seo-related-grid span {
    color: #2563eb;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.seo-related-grid strong {
    line-height: 1.35;
}
@media (max-width: 860px) {
    .seo-hero-card,
    .seo-steps-box,
    .seo-related-grid {
        grid-template-columns: 1fr;
    }
    .seo-hero-card__content h1 {
        letter-spacing: -.035em;
    }
    .seo-hero-card__actions .ats-btn {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .seo-landing-page {
        padding: 14px;
    }
    .seo-hero-card__content,
    .seo-hero-card__summary,
    .seo-content-section {
        border-radius: 22px;
    }
}


/* v21.64 KarirRapi trust/SEO/lead/accessibility polish */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(37,99,235,.55);outline-offset:3px;border-radius:12px}
button,.ats-btn,.profile-action-link,.public-template-card a{min-height:44px}
input,select,textarea{font-size:16px}
.form-error,.flash-error,.alert-danger{border-left:4px solid #dc2626;background:#fef2f2;color:#7f1d1d}
.seo-content-section,.landing-feature-card,.public-template-card,.trust-info-card,.blog-article-block{content-visibility:auto;contain-intrinsic-size:1px 420px}
.trust-page,.blog-page,.blog-detail-page,.cv-score-page{max-width:1180px;margin:0 auto;padding:28px clamp(14px,3vw,32px)}
.trust-hero-card{background:linear-gradient(135deg,#eff6ff,#fff7ed)}
.trust-info-card h2,.blog-article-block h2{font-size:1.1rem;margin:0 0 8px;color:#111827}.trust-info-card p,.blog-article-block p{margin:0;color:#4b5563;line-height:1.7}
.public-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.public-template-card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:12px}.public-template-card span{font-size:.78rem;font-weight:800;text-transform:uppercase;color:#1d4ed8;letter-spacing:.08em}.public-template-card h2{font-size:1.2rem;margin:0;color:#111827}.public-template-card p{color:#4b5563;line-height:1.65;margin:0;flex:1}
.lead-magnet-strip{display:flex;align-items:center;gap:16px;justify-content:space-between;background:#0f172a;color:#fff;border-radius:22px;padding:18px 20px;margin:18px 0;box-shadow:0 20px 40px rgba(15,23,42,.18)}.lead-magnet-strip span{color:#dbeafe}.lead-magnet-strip .ats-btn{white-space:nowrap}.lead-magnet-strip--pricing{margin-bottom:24px}
.pricing-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:28px}.pricing-tier-grid article{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:22px;box-shadow:0 16px 40px rgba(15,23,42,.08)}.pricing-tier-grid article.is-featured{border-color:#2563eb;box-shadow:0 22px 60px rgba(37,99,235,.18)}.pricing-tier-grid span{display:inline-flex;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:6px 10px;font-weight:800;font-size:.76rem}.pricing-tier-grid h3{margin:12px 0 6px}.pricing-tier-grid p,.pricing-tier-grid li{color:#4b5563;line-height:1.6}.pricing-tier-grid ul{padding-left:18px;margin:10px 0 0}
.blog-article-body{max-width:860px;margin-left:auto;margin-right:auto}.blog-article-block{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:22px;margin-bottom:16px;box-shadow:0 12px 32px rgba(15,23,42,.06)}
.score-tool-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:20px;align-items:start}.score-form-card,.score-result-card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(15,23,42,.08)}.score-form-card{display:flex;flex-direction:column;gap:12px}.score-form-card textarea{width:100%;border:1px solid #d1d5db;border-radius:18px;padding:16px;line-height:1.6;resize:vertical}.score-form-card small{color:#6b7280}.score-circle{width:132px;height:132px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#111827);color:#fff;margin-bottom:18px}.score-circle strong{font-size:2.7rem;line-height:1}.score-bars p{display:flex;justify-content:space-between;border-bottom:1px solid #eef2f7;padding:10px 0;margin:0}.score-result-card ul{padding-left:18px;color:#4b5563;line-height:1.7}
@media(max-width:900px){.public-template-grid,.pricing-tier-grid,.score-tool-grid{grid-template-columns:1fr}.lead-magnet-strip{align-items:flex-start;flex-direction:column}.lead-magnet-strip .ats-btn{width:100%;justify-content:center}.trust-page,.blog-page,.blog-detail-page,.cv-score-page{padding:18px 12px}.public-main-nav{max-height:70vh;overflow:auto}.public-main-nav .nav-link{min-height:44px;display:flex;align-items:center}.seo-hero-card__actions{display:grid;grid-template-columns:1fr;gap:10px}.score-circle{margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* v21.65 - KarirRapi Assistant jurusan/profesi: AI-guided CV + surat bundle */
.assistant-choice-grid--three{grid-template-columns:repeat(3,minmax(0,1fr));}
.assistant-choice-card--ai{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 62%,#f59e0b 160%)!important;color:#fff!important;border-color:rgba(255,255,255,.22)!important;box-shadow:0 28px 70px rgba(15,23,42,.22)!important;}
.assistant-choice-card--ai p,.assistant-choice-card--ai em{color:rgba(255,255,255,.86)!important;}
.assistant-major-form{display:grid;gap:20px;margin-top:18px;}
.assistant-major-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.assistant-major-card{position:relative;display:grid;gap:10px;padding:18px;border:1px solid #dbeafe;border-radius:22px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.06);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;min-height:158px;}
.assistant-major-card:hover,.assistant-major-card:focus-within{transform:translateY(-2px);border-color:#2563eb;box-shadow:0 24px 55px rgba(37,99,235,.13);}
.assistant-major-card input{position:absolute;inset:16px 16px auto auto;width:20px;height:20px;accent-color:#2563eb;}
.assistant-major-card span{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#eff6ff;color:#1d4ed8;}
.assistant-major-card span svg{width:20px;height:20px;}
.assistant-major-card strong{font-size:16px;line-height:1.35;color:#0f172a;padding-right:28px;}
.assistant-major-card small{color:#64748b;line-height:1.55;font-weight:700;}
.assistant-major-card:has(input:checked),.assistant-major-card.is-selected{border-color:#1d4ed8;background:linear-gradient(180deg,#eff6ff 0%,#fff 70%);box-shadow:0 22px 62px rgba(37,99,235,.16);}
.assistant-ai-flow-note{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid #fde68a;background:#fffbeb;color:#78350f;border-radius:18px;padding:14px 16px;font-size:13px;font-weight:800;}
.assistant-ai-flow-note span{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(245,158,11,.25);}
.assistant-ai-start-btn{justify-self:start;min-height:48px;border-radius:16px;padding-inline:22px!important;}
.assistant-editor-steps{margin:10px 0 12px;padding-left:18px;color:#475569;font-size:13px;line-height:1.55;font-weight:700;}
.assistant-editor-steps li+li{margin-top:4px;}
.assistant-editor-guide .btn.small{margin-top:4px;}
@media(max-width:920px){.assistant-choice-grid--three{grid-template-columns:1fr}.assistant-major-grid{grid-template-columns:1fr}.assistant-ai-start-btn{width:100%;justify-content:center}.assistant-ai-flow-note{display:grid}.assistant-ai-flow-note span{border-radius:14px}}

/* v21.73 - KarirRapi Assistant focus tour: panel tetap terbaca, hanya kolom aktif yang disorot. */
.karirrapi-focus-tour {
    position: fixed;
    inset: 0;
    z-index: 37000;
    pointer-events: none;
    display: none;
}
.karirrapi-focus-tour.is-visible { display: block; }
.karirrapi-focus-tour__scrim {
    position: absolute;
    inset: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
}
.karirrapi-focus-tour__target-clone {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.55);
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    z-index: 36004;
    pointer-events: none;
}
.karirrapi-focus-tour__target-clone[hidden] {
    display: none !important;
}

.karirrapi-focus-tour--token-check .karirrapi-focus-tour__scrim {
    background: rgba(15, 23, 42, 0.36);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.karirrapi-focus-tour--token-check .karirrapi-focus-tour__ring {
    box-shadow: 0 0 0 9999px rgba(7, 16, 36, 0.42), 0 20px 54px rgba(0, 0, 0, 0.26), 0 0 0 8px rgba(246, 200, 96, 0.26);
}
body.karirrapi-focus-tour-token-check [data-assistant-token-badge].karirrapi-step-target-active,
body.karirrapi-focus-tour-token-check .user-pill.karirrapi-step-target-active {
    z-index: 38005 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    filter: none !important;
}
.karirrapi-focus-tour__ring {
    position: fixed;
    border: 3px solid #f6c860;
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(7, 16, 36, 0.16), 0 20px 54px rgba(0, 0, 0, 0.22), 0 0 0 8px rgba(246, 200, 96, 0.22);
    transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
    pointer-events: none;
    z-index: 36001;
}
.karirrapi-focus-tour__card {
    position: fixed;
    background: #ffffff;
    border: 1px solid rgba(30, 64, 175, 0.16);
    border-radius: 22px;
    box-shadow: 0 26px 70px rgba(10, 21, 48, 0.32);
    padding: 18px;
    color: #0f172a;
    pointer-events: auto;
    z-index: 36005;
}
.karirrapi-focus-tour__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #f8fafc;
    color: #1e293b;
    cursor: pointer;
    font-size: 19px;
}
.karirrapi-focus-tour__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 5px 9px;
    margin-bottom: 10px;
}
.karirrapi-focus-tour__card h3 {
    margin: 0 34px 8px 0;
    font-size: 18px;
    line-height: 1.25;
    color: #0f172a;
}
.karirrapi-focus-tour__card p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
}
.karirrapi-focus-tour__warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412 !important;
    border-radius: 12px;
    padding: 9px 11px;
    font-weight: 700;
}
.karirrapi-focus-tour__progress {
    display: grid;
    grid-template-rows: auto 8px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    align-items: center;
    margin: 12px 0 16px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    color: #64748b;
}
.karirrapi-focus-tour__progress span {
    display: block;
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    white-space: nowrap;
}
.karirrapi-focus-tour__progress::after {
    content: '';
    display: block;
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
}
.karirrapi-focus-tour__progress b {
    display: block;
    grid-row: 2;
    grid-column: 1;
    width: 0;
    height: 8px;
    margin: 0;
    background: linear-gradient(90deg, #2563eb, #f59e0b);
    border-radius: 999px;
    transition: width .18s ease;
    z-index: 1;
}
.karirrapi-focus-tour__actions,
.karirrapi-focus-tour__final {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.karirrapi-focus-tour__actions .btn,
.karirrapi-focus-tour__final .btn {
    min-height: 40px;
    border-radius: 12px;
}
.karirrapi-focus-tour__actions .btn.is-disabled,
.karirrapi-focus-tour__actions .btn:disabled {
    opacity: .48;
    cursor: not-allowed;
}
.karirrapi-step-target-active {
    position: relative !important;
    z-index: 36004 !important;
    outline: 3px solid rgba(246, 200, 96, 0.92) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 8px rgba(246, 200, 96, 0.22), 0 14px 38px rgba(0, 0, 0, 0.18) !important;
    border-radius: 12px !important;
    filter: none !important;
    opacity: 1 !important;
}
input.karirrapi-step-target-active,
textarea.karirrapi-step-target-active,
select.karirrapi-step-target-active {
    background-color: #ffffff !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
}
body.karirrapi-focus-tour-active .cv-modal-overlay.is-open,
body.karirrapi-focus-tour-active .letter-input-floating-modal.is-open {
    z-index: 36002 !important;
}
body.karirrapi-focus-tour-active .cv-modal-card,
body.karirrapi-focus-tour-active .letter-input-floating-modal__card,
body.karirrapi-focus-tour-active .layout-floating-modal__card {
    position: relative;
    z-index: 36002 !important;
    filter: none !important;
}
body.karirrapi-focus-tour-active .cv-combo-suggestion-panel.is-open,
body.karirrapi-focus-tour-active .letter-input-help-menu:not([hidden]) {
    z-index: 36010 !important;
}
@media (max-width: 760px) {
    .karirrapi-focus-tour__card {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px;
        width: auto !important;
        max-height: 46vh;
        overflow: auto;
        padding: 15px;
        border-radius: 18px;
    }
    .karirrapi-focus-tour__card h3 { font-size: 16px; }
    .karirrapi-focus-tour__card p { font-size: 13px; }
    .karirrapi-focus-tour__actions .btn,
    .karirrapi-focus-tour__final .btn {
        flex: 1 1 120px;
        min-height: 44px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .karirrapi-focus-tour__ring,
    .karirrapi-focus-tour__progress b { transition: none; }
}


/* v21.91 - Import CV Lama dipisah menjadi section sendiri di panel kiri Buat CV. */

.cv-import-old-section .cv-section-head{
    background:linear-gradient(135deg,#f8fbff 0%,#ffffff 68%);
}
.cv-import-old-section .cv-section-body{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.cv-import-old-btn{
    position:relative;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center !important;
    justify-items:start !important;
    gap:8px 12px;
    min-height:82px !important;
    padding:14px 16px !important;
    border:2px dashed #2563eb !important;
    background:linear-gradient(135deg,#eff6ff 0%,#ffffff 64%) !important;
    color:#0f172a !important;
    text-align:left !important;
}
.cv-import-old-btn:hover{
    background:linear-gradient(135deg,#dbeafe 0%,#ffffff 70%) !important;
    border-color:#1d4ed8 !important;
    color:#1d4ed8 !important;
}
.cv-import-old-btn__icon{
    grid-row:1 / span 2;
    width:42px;
    height:42px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:24px;
    font-weight:900;
}
.cv-import-old-btn span:not(.cv-import-old-btn__icon){
    font-size:18px;
    font-weight:900;
    line-height:1.2;
}
.cv-import-old-btn small{
    display:block;
    font-size:12px;
    line-height:1.35;
    color:#64748b;
    font-weight:700;
}
.cv-import-old-note{
    border:1px solid #dbeafe;
    border-radius:14px;
    background:#f8fbff;
    padding:10px 12px;
    font-size:13px !important;
}
.cv-import-old-modal{
    position:fixed;
    inset:0;
    z-index:10040;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
}
.cv-import-old-modal.is-open{display:flex;}
.cv-import-old-modal__backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(3px);
    cursor:pointer;
}
.cv-import-old-modal__card{
    position:relative;
    z-index:1;
    width:min(760px, calc(100vw - 32px));
    max-height:min(86vh, 760px);
    overflow:auto;
    border-radius:26px;
    background:#fff;
    box-shadow:0 28px 90px rgba(15,23,42,.28);
    border:1px solid rgba(148,163,184,.32);
}
.cv-import-old-modal__head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:24px 26px 18px;
    border-bottom:1px solid #e5e7eb;
}
.cv-import-old-modal__badge{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 12px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.cv-import-old-modal__head h2{
    margin:10px 0 6px;
    font-size:28px;
    line-height:1.1;
    color:#0f172a;
}
.cv-import-old-modal__head p{
    margin:0;
    max-width:560px;
    color:#475569;
    line-height:1.55;
    font-size:14px;
}
.cv-import-old-modal__close{
    flex:0 0 auto;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid #dbeafe;
    background:#f8fbff;
    color:#0f172a;
    font-size:24px;
    cursor:pointer;
}
.cv-import-old-modal__body{padding:22px 26px 8px;}
.cv-import-old-upload{
    display:grid;
    gap:9px;
    padding:16px;
    border:1px solid #dbeafe;
    background:#f8fbff;
    border-radius:20px;
}
.cv-import-old-upload span,
.cv-import-old-options label{
    color:#0f172a;
    font-weight:900;
    font-size:14px;
}
.cv-import-old-upload input{
    width:100%;
    min-height:46px;
    border:1px solid #cbd5e1;
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
}
.cv-import-old-upload small{color:#64748b;font-weight:700;line-height:1.45;}
.cv-import-old-flow{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:16px 0;
}
.cv-import-old-flow article{
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:14px;
    background:#fff;
    box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.cv-import-old-flow b{
    display:inline-flex;
    width:30px;
    height:30px;
    border-radius:12px;
    align-items:center;
    justify-content:center;
    background:#facc15;
    color:#713f12;
    margin-bottom:9px;
}
.cv-import-old-flow strong,
.cv-import-old-flow span{display:block;}
.cv-import-old-flow strong{color:#0f172a;font-size:14px;margin-bottom:5px;}
.cv-import-old-flow span{color:#64748b;font-size:12px;line-height:1.42;}
.cv-import-old-options{
    display:grid;
    gap:8px;
    margin-bottom:16px;
}
.cv-import-old-options select{
    width:100%;
    min-height:48px;
    border:1px solid #cbd5e1;
    border-radius:14px;
    padding:0 14px;
    background:#fff;
    font-weight:800;
    color:#0f172a;
}
.cv-import-old-preview{
    border:1px dashed #cbd5e1;
    border-radius:20px;
    padding:16px;
    background:#f8fafc;
    opacity:.75;
}
.cv-import-old-modal.has-demo .cv-import-old-preview{
    border-color:#93c5fd;
    background:#eff6ff;
    opacity:1;
}
.cv-import-old-preview strong{display:block;color:#0f172a;margin-bottom:10px;}
.cv-import-old-preview ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.cv-import-old-preview li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    padding:10px 12px;
}
.cv-import-old-preview li span{font-weight:900;color:#0f172a;}
.cv-import-old-preview li em{font-style:normal;color:#64748b;font-size:12px;font-weight:800;text-align:right;}
.cv-import-old-modal__foot{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:18px 26px 24px;
    border-top:1px solid #e5e7eb;
}
body.cv-import-old-modal-open{overflow:hidden;}
@media (max-width:760px){
    .cv-import-old-flow{grid-template-columns:1fr 1fr;}
    .cv-import-old-modal__head{padding:20px 18px 16px;}
    .cv-import-old-modal__body{padding:18px 18px 8px;}
    .cv-import-old-modal__foot{padding:16px 18px 20px;flex-direction:column;}
    .cv-import-old-modal__foot .btn{width:100%;justify-content:center;}
}
@media (max-width:520px){.cv-import-old-flow{grid-template-columns:1fr;}}

/* v21.85 - Import CV Lama aktif: status, hasil baca, raw text, dan tombol masuk panel. */
.cv-import-old-status{
    margin:0 0 14px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid #cbd5e1;
    background:#f8fafc;
    color:#334155;
    font-size:13px;
    font-weight:800;
    line-height:1.45;
}
.cv-import-old-status.is-ok{
    border-color:#bbf7d0;
    background:#f0fdf4;
    color:#166534;
}
.cv-import-old-status.is-error{
    border-color:#fecaca;
    background:#fff1f2;
    color:#be123c;
}
.cv-import-old-empty{
    margin:10px 0 0;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
    font-weight:700;
}
.cv-import-old-result-row{
    align-items:flex-start !important;
    gap:12px;
}
.cv-import-old-result-row span{
    display:grid;
    gap:4px;
    min-width:0;
}
.cv-import-old-result-row span b{
    color:#0f172a;
    font-size:14px;
}
.cv-import-old-result-row span small{
    display:block;
    max-width:100%;
    color:#475569;
    font-size:12px;
    line-height:1.45;
    font-weight:700;
    white-space:pre-line;
    word-break:break-word;
}
.cv-import-old-result-row em{
    flex:0 0 auto;
    max-width:210px;
    text-align:right;
}
.cv-import-old-raw{
    margin-top:12px;
    border:1px dashed #93c5fd;
    border-radius:16px;
    background:#f8fbff;
    padding:10px 12px;
}
.cv-import-old-raw summary{
    cursor:pointer;
    font-weight:900;
    color:#1d4ed8;
}
.cv-import-old-raw textarea{
    width:100%;
    min-height:170px;
    margin-top:10px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:10px 12px;
    resize:vertical;
    font-size:12px;
    line-height:1.45;
    color:#0f172a;
    background:#fff;
}
.cv-import-old-modal.is-reading .cv-import-old-preview{
    opacity:.72;
}
.cv-import-old-modal__foot [hidden]{
    display:none !important;
}
@media (max-width: 720px){
    .cv-import-old-result-row{
        display:grid !important;
    }
    .cv-import-old-result-row em{
        max-width:none;
        text-align:left;
    }
}

/* v21.88 - Import CV Lama: filter hasil PDF rusak dan parser ToUnicode agar text mentah tidak tampil sebagai simbol. */

/* v21.88 - Import CV Lama: hasil PDF yang terbaca sebagai kode font/simbol diblokir agar tidak masuk panel. */

/* v21.90 - Loading khas KarirRapi saat Import CV Lama membaca multi engine. */
.cv-import-old-reader{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(37,99,235,.22);
    border-radius:22px;
    padding:16px;
    margin:0 0 16px;
    background:
        radial-gradient(circle at 16% 12%, rgba(250,204,21,.28), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(37,99,235,.18), transparent 32%),
        linear-gradient(135deg,#ffffff 0%,#eff6ff 100%);
    box-shadow:0 18px 46px rgba(37,99,235,.12);
}
.cv-import-old-reader[hidden]{display:none !important;}
.cv-import-old-reader__brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.cv-import-old-reader__brand strong{
    display:block;
    color:#0f172a;
    font-size:15px;
    font-weight:1000;
}
.cv-import-old-reader__brand small{
    display:block;
    color:#475569;
    font-size:12px;
    font-weight:800;
    margin-top:3px;
}
.cv-import-old-reader__orb{
    position:relative;
    width:46px;
    height:46px;
    border-radius:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#facc15,#2563eb);
    box-shadow:0 12px 26px rgba(37,99,235,.24);
}
.cv-import-old-reader__orb::before,
.cv-import-old-reader__orb::after{
    content:"";
    position:absolute;
    inset:7px;
    border-radius:14px;
    border:2px solid rgba(255,255,255,.78);
    animation:cvImportReaderPulse 1.35s ease-in-out infinite;
}
.cv-import-old-reader__orb::after{
    inset:13px;
    animation-delay:.25s;
}
.cv-import-old-reader__orb i{
    position:relative;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 5px rgba(255,255,255,.22);
}
.cv-import-old-reader__scan{
    position:relative;
    height:9px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(148,163,184,.22);
    margin-bottom:14px;
}
.cv-import-old-reader__scan span{
    position:absolute;
    inset:0 auto 0 0;
    width:42%;
    border-radius:inherit;
    background:linear-gradient(90deg,#facc15,#2563eb,#38bdf8);
    animation:cvImportReaderScan 1.2s cubic-bezier(.5,0,.2,1) infinite;
}
.cv-import-old-reader__steps{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
}
.cv-import-old-reader__steps li{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:8px 10px;
    border:1px solid rgba(148,163,184,.26);
    border-radius:14px;
    background:rgba(255,255,255,.72);
    color:#64748b;
    font-size:12px;
    font-weight:900;
    transition:.18s ease;
}
.cv-import-old-reader__steps li b{
    width:24px;
    height:24px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#e2e8f0;
    color:#334155;
    flex:0 0 auto;
}
.cv-import-old-reader__steps li.is-active{
    border-color:#2563eb;
    background:#ffffff;
    color:#1d4ed8;
    transform:translateX(3px);
    box-shadow:0 10px 24px rgba(37,99,235,.12);
}
.cv-import-old-reader__steps li.is-active b{
    background:#2563eb;
    color:#fff;
}
.cv-import-old-reader__steps li.is-done{
    color:#166534;
    border-color:#bbf7d0;
    background:#f0fdf4;
}
.cv-import-old-reader__steps li.is-done b{
    background:#22c55e;
    color:#fff;
}
@keyframes cvImportReaderPulse{
    0%,100%{transform:scale(.94);opacity:.82;}
    50%{transform:scale(1.08);opacity:1;}
}
@keyframes cvImportReaderScan{
    0%{transform:translateX(-115%);}
    100%{transform:translateX(260%);}
}

/* v21.93: Profil - Minta Admin Buatkan CV */
.profile-action-link--admin-cv{
    border:0;
    text-align:left;
    cursor:pointer;
    font:inherit;
    background:linear-gradient(135deg,#f8fafc,#eef6ff);
}
.profile-action-link--admin-cv span{
    background:#fef3c7;
    color:#b45309;
}
.admin-cv-request-open{
    overflow:hidden;
}
.admin-cv-request-modal[hidden]{
    display:none!important;
}
.admin-cv-request-modal{
    position:fixed;
    inset:0;
    z-index:99990;
    display:grid;
    place-items:center;
    padding:22px;
}
.admin-cv-request-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.admin-cv-request-modal__card{
    position:relative;
    z-index:1;
    width:min(940px,100%);
    max-height:min(88vh,860px);
    overflow:auto;
    border-radius:28px;
    background:#fff;
    border:1px solid rgba(226,232,240,.95);
    box-shadow:0 34px 90px rgba(15,23,42,.28);
    padding:22px;
}
.admin-cv-request-modal__close{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid #dbeafe;
    background:#f8fafc;
    color:#0f172a;
    font-size:24px;
    font-weight:850;
    cursor:pointer;
}
.admin-cv-request-modal__head{
    padding:4px 48px 18px 2px;
}
.admin-cv-request-modal__head span{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-size:11px;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.admin-cv-request-modal__head h2{
    margin:10px 0 8px;
    color:#0f172a;
    font-size:28px;
}
.admin-cv-request-modal__head p{
    margin:0;
    color:#475569;
    line-height:1.55;
    font-weight:650;
}
.admin-cv-request-step{
    display:none;
}
.admin-cv-request-step.is-active{
    display:block;
}
.admin-cv-request-upload,
.admin-cv-request-field{
    display:grid;
    gap:8px;
    margin-bottom:14px;
    color:#0f172a;
    font-weight:850;
}
.admin-cv-request-upload input,
.admin-cv-request-field input,
.admin-cv-request-field textarea{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:16px;
    padding:12px 14px;
    background:#fff;
    color:#0f172a;
    font-weight:650;
}
.admin-cv-request-field textarea{
    resize:vertical;
}
.admin-cv-request-upload small,
.admin-cv-choice-box p,
.admin-cv-mini-catalog__head small{
    color:#64748b;
    font-weight:650;
    line-height:1.5;
}
.admin-cv-choice-box{
    padding:18px;
    border-radius:22px;
    border:1px solid #dbeafe;
    background:linear-gradient(180deg,#f8fbff,#ffffff);
    margin-bottom:14px;
}
.admin-cv-choice-box h3{
    margin:0 0 8px;
    color:#0f172a;
    font-size:21px;
}
.admin-cv-choice-actions,
.admin-cv-request-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:12px;
}
.admin-cv-choice-box--quick-channel{
    margin-bottom:0;
}
.admin-cv-quick-channel-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:14px;
}
.admin-cv-quick-channel-card{
    border:1px solid #dbeafe;
    border-radius:20px;
    padding:16px;
    min-height:142px;
    background:#fff;
    color:#0f172a;
    text-decoration:none;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"icon title" "icon desc";
    gap:5px 12px;
    align-items:center;
    text-align:left;
    cursor:pointer;
    font:inherit;
    box-shadow:0 14px 32px rgba(15,23,42,.07);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.admin-cv-quick-channel-card:hover{
    transform:translateY(-2px);
    border-color:#2563eb;
    color:#0f172a;
    box-shadow:0 22px 42px rgba(37,99,235,.16);
}
.admin-cv-quick-channel-card span{
    grid-area:icon;
    width:46px;
    height:46px;
    border-radius:16px;
    background:#eff6ff;
    color:#2563eb;
    display:grid;
    place-items:center;
    font-size:22px;
}
.admin-cv-quick-channel-card b{
    grid-area:title;
    font-size:18px;
    font-weight:950;
}
.admin-cv-quick-channel-card small{
    grid-area:desc;
    color:#64748b;
    font-weight:750;
    line-height:1.45;
}
.admin-cv-quick-channel-card--wa span{
    background:#ecfdf5;
    color:#059669;
}
.admin-cv-selected-template{
    margin-top:12px;
    padding:10px 12px;
    border-radius:14px;
    background:#f1f5f9;
    color:#334155;
    font-weight:800;
}
.admin-cv-mini-catalog{
    padding:16px;
    border-radius:22px;
    border:1px dashed #93c5fd;
    background:#f8fbff;
    margin-bottom:14px;
}
.admin-cv-mini-catalog[hidden]{display:none!important;}
.admin-cv-mini-catalog__head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-end;
    margin-bottom:12px;
}
.admin-cv-mini-catalog__head strong{
    color:#0f172a;
    font-size:18px;
}
.admin-cv-mini-catalog__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    max-height:340px;
    overflow:auto;
    padding-right:4px;
}
.admin-cv-template-card{
    text-align:left;
    border:1px solid #e2e8f0;
    background:#fff;
    border-radius:18px;
    padding:12px;
    color:#0f172a;
    cursor:pointer;
    display:grid;
    gap:7px;
    box-shadow:0 10px 22px rgba(15,23,42,.05);
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.admin-cv-template-card:hover,
.admin-cv-template-card.is-selected{
    transform:translateY(-2px);
    border-color:var(--admin-cv-template-accent,#2563eb);
    box-shadow:0 18px 32px rgba(37,99,235,.13);
}
.admin-cv-template-card__preview{
    display:grid;
    gap:4px;
    width:64px;
    padding:8px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--admin-cv-template-accent,#2563eb),#0f172a);
}
.admin-cv-template-card__preview i{
    display:block;
    height:5px;
    border-radius:999px;
    background:rgba(255,255,255,.86);
}
.admin-cv-template-card strong{
    font-size:15px;
    line-height:1.2;
}
.admin-cv-template-card em{
    font-style:normal;
    color:#2563eb;
    font-weight:850;
    font-size:12px;
}
.admin-cv-template-card small{
    color:#64748b;
    line-height:1.45;
    font-weight:650;
}
.admin-cv-empty-template{
    margin:0;
    color:#64748b;
    font-weight:750;
}
.admin-cv-request-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:12px 0;
}
.admin-cv-request-summary span{
    display:grid;
    gap:4px;
    padding:12px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}
.admin-cv-request-summary b{
    color:#64748b;
    font-size:12px;
}
.admin-cv-request-summary em{
    font-style:normal;
    color:#0f172a;
    font-weight:850;
    word-break:break-word;
}
.admin-cv-request-status{
    min-height:22px;
    margin-top:12px;
    color:#475569;
    font-weight:800;
}
.admin-cv-request-status.is-error{color:#b91c1c;}
.admin-cv-request-status.is-success{color:#047857;}
.admin-cv-request-status.is-loading{color:#2563eb;}
@media(max-width:760px){
    .admin-cv-request-modal{padding:10px;align-items:end;}
    .admin-cv-request-modal__card{max-height:94vh;border-radius:24px 24px 0 0;}
    .admin-cv-mini-catalog__grid{grid-template-columns:1fr;}
    .admin-cv-request-summary{grid-template-columns:1fr;}
    .admin-cv-quick-channel-grid{grid-template-columns:1fr;}
    .admin-cv-quick-channel-card{min-height:118px;}
}



/* v21.119: landing ad hero hanya Chat Admin */
.landing-hero-admin-cv {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    max-width: 760px;
    margin-top: 26px;
    padding: 16px;
    border-radius: 28px;
    border: 1px solid rgba(37, 99, 235, .18);
    background:
        radial-gradient(circle at 8% 0%, rgba(250, 204, 21, .24), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .9));
    box-shadow: 0 18px 46px rgba(15, 23, 42, .1);
    overflow: hidden;
}
.landing-hero-admin-cv::after {
    content: '';
    position: absolute;
    inset: auto -74px -96px auto;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .1);
    pointer-events: none;
}
.landing-hero-admin-cv__text,
.landing-hero-admin-cv__actions {
    position: relative;
    z-index: 1;
}
.landing-hero-admin-cv__text {
    display: grid;
    gap: 8px;
}
.landing-hero-admin-cv__text strong {
    color: #0f172a;
    font-size: clamp(1.18rem, 1.9vw, 1.58rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.landing-hero-admin-cv__text small {
    display: block;
    max-width: 540px;
    color: #475569;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.55;
}
.landing-hero-admin-cv__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.landing-hero-admin-cv__actions .ats-btn {
    min-height: 42px;
    white-space: nowrap;
}
@media (max-width: 960px) {
    .landing-hero-admin-cv {
        grid-template-columns: 1fr;
    }
    .landing-hero-admin-cv__actions {
        justify-content: flex-start;
    }
}
@media (max-width: 560px) {
    .landing-hero-admin-cv {
        padding: 14px;
        border-radius: 22px;
    }
    .landing-hero-admin-cv__actions .ats-btn {
        width: 100%;
        justify-content: center;
    }
}

/* v21.94: landing page SEO ad - bantuan admin buat CV dari CV lama */
.landing-admin-cv-ad {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    gap: 22px;
    align-items: stretch;
    width: min(1180px, calc(100% - 32px));
    margin: -12px auto 58px;
    padding: 22px;
    border-radius: 32px;
    border: 1px solid rgba(37, 99, 235, .18);
    background:
        radial-gradient(circle at 10% 0%, rgba(250, 204, 21, .26), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .94));
    box-shadow: 0 26px 70px rgba(15, 23, 42, .14);
    overflow: hidden;
}
.landing-admin-cv-ad::before {
    content: '';
    position: absolute;
    inset: auto -80px -120px auto;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .12);
    pointer-events: none;
}
.landing-admin-cv-ad__content,
.landing-admin-cv-ad__steps {
    position: relative;
    z-index: 1;
}
.landing-admin-cv-ad__content {
    padding: 12px 6px 12px 10px;
}
.landing-admin-cv-ad__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .1);
    color: #1d4ed8;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.landing-admin-cv-ad__badge::before {
    content: '✦';
    color: #f59e0b;
}
.landing-admin-cv-ad h2 {
    max-width: 760px;
    margin: 14px 0 12px;
    color: #0f172a;
    font-size: clamp(1.7rem, 3.2vw, 3rem);
    line-height: 1.04;
    letter-spacing: -.055em;
}
.landing-admin-cv-ad p {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-size: 1.02rem;
    line-height: 1.7;
}
.landing-admin-cv-ad__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.landing-admin-cv-ad__steps {
    display: grid;
    gap: 12px;
    align-content: center;
}
.landing-admin-cv-ad__steps article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    padding: 15px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(148, 163, 184, .24);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
}
.landing-admin-cv-ad__steps strong {
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 950;
    box-shadow: 0 12px 22px rgba(37, 99, 235, .28);
}
.landing-admin-cv-ad__steps span {
    color: #0f172a;
    font-weight: 900;
}
.landing-admin-cv-ad__steps small {
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 860px) {
    .landing-admin-cv-ad {
        grid-template-columns: 1fr;
        margin-top: 8px;
        padding: 18px;
        border-radius: 26px;
    }
    .landing-admin-cv-ad__content {
        padding: 4px 0;
    }
    .landing-admin-cv-ad__actions .ats-btn {
        width: 100%;
        justify-content: center;
    }
}


/* v21.96: Chat Admin Real-Time + request CV admin template catalog full slider */
button.floating-support-btn{
    border:0;
    font:inherit;
    cursor:pointer;
}

.landing-floating-support{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:70;
    display:grid;
    justify-items:end;
    gap:10px;
}
@keyframes floatingChatMeGlow {
    0%,100%{
        box-shadow:0 14px 28px rgba(37,99,235,.20),0 0 0 1px rgba(255,255,255,.70),0 0 10px rgba(125,211,252,.22);
        filter:drop-shadow(0 0 3px rgba(37,99,235,.18));
    }
    50%{
        box-shadow:0 16px 34px rgba(20,184,166,.24),0 0 0 1px rgba(255,255,255,.92),0 0 18px rgba(125,211,252,.55);
        filter:drop-shadow(0 0 10px rgba(125,211,252,.55));
    }
}
.floating-support-chat-bubble{
    border:1px solid rgba(191,219,254,.96);
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 55%,#ecfeff 100%);
    color:#1d4ed8;
    border-radius:999px 999px 999px 14px;
    min-height:38px;
    padding:8px 16px;
    font:inherit;
    font-size:15px;
    font-weight:950;
    letter-spacing:.01em;
    line-height:1;
    cursor:pointer;
    position:relative;
    pointer-events:auto;
    animation:floatingChatMeGlow 1.4s ease-in-out infinite;
}
.floating-support-chat-bubble::after{
    content:'';
    position:absolute;
    right:16px;
    bottom:-7px;
    width:14px;
    height:14px;
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 75%,#ecfeff 100%);
    border-right:1px solid rgba(191,219,254,.96);
    border-bottom:1px solid rgba(191,219,254,.96);
    transform:rotate(45deg);
    border-bottom-right-radius:3px;
}
.floating-support-chat-bubble:hover{
    transform:translateY(-1px);
}
.floating-support-btn--contact{
    width:64px;
    height:64px;
    min-width:64px;
    min-height:64px;
    padding:0;
    border-radius:999px;
    border:1px solid rgba(125,211,252,.45);
    background:linear-gradient(135deg,#2563eb 0%,#0891b2 100%);
    box-shadow:0 18px 36px rgba(15,23,42,.22), 0 10px 20px rgba(37,99,235,.22);
    display:grid;
    place-items:center;
    color:#ffffff;
    position:relative;
}
.floating-support-btn--contact:hover{
    transform:translateY(-1px);
    box-shadow:0 24px 44px rgba(15,23,42,.24), 0 12px 24px rgba(14,165,164,.22);
}
.floating-support-btn--contact .floating-support-btn__label{
    position:absolute;
    right:52px;
    top:50%;
    transform:translateY(-50%);
    min-width:max-content;
    padding:9px 14px;
    border-radius:999px 999px 8px 999px;
    background:#0f172a;
    color:#ffffff;
    box-shadow:0 12px 26px rgba(15,23,42,.26);
    font-size:16px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
}
.landing-floating-support .floating-support-btn--contact .floating-support-btn__label{
    display:none;
}
.floating-support-btn--contact .floating-support-btn__label::after{
    content:'';
    position:absolute;
    right:-6px;
    bottom:5px;
    width:14px;
    height:14px;
    background:#0f172a;
    transform:rotate(45deg);
    border-radius:2px;
}
.floating-support-btn__icon--person-call{
    width:38px;
    height:38px;
    border-radius:0;
    flex:0 0 38px;
    background:transparent;
    box-shadow:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 12h34c7 0 12 5 12 12v10c0 7-5 12-12 12H31L15 55l4-9h-7C5 46 0 41 0 34V24c0-7 5-12 12-12z' transform='translate(3 0)' fill='%23ffffff'/%3E%3Cpath d='M17 27h28M17 36h18' stroke='%232563eb' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
.floating-support-choice{
    position:absolute;
    z-index:5;
    right:0;
    bottom:calc(100% + 14px);
    width:min(360px,calc(100vw - 26px));
    display:grid;
    gap:12px;
    padding:16px;
    border-radius:24px;
    border:1px solid rgba(147,197,253,.82);
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 60%,#fff7ed 100%);
    box-shadow:0 26px 60px rgba(15,23,42,.24);
}
.floating-support-choice[hidden]{display:none!important;}
.floating-support-choice__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.floating-support-choice__head strong{
    color:#0f172a;
    font-size:18px;
    font-weight:950;
}
.floating-support-choice__close{
    width:34px;
    height:34px;
    border:1px solid #dbeafe;
    border-radius:999px;
    background:#fff;
    color:#1d4ed8;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}
.floating-support-choice p{
    margin:0;
    color:#475569;
    font-size:13px;
    font-weight:750;
    line-height:1.55;
}
.floating-support-choice__actions{
    display:grid;
    gap:10px;
}
.floating-support-choice__action{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:4px 10px;
    align-items:center;
    padding:13px 14px;
    border-radius:18px;
    border:1px solid #dbeafe;
    background:#fff;
    text-decoration:none;
    color:#0f172a;
    box-shadow:0 10px 22px rgba(15,23,42,.06);
    cursor:pointer;
}
.floating-support-choice__action span{
    grid-row:1/3;
    width:40px;
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:22px;
    background:#eff6ff;
}
.floating-support-choice__action b{
    font-size:15px;
    font-weight:950;
}
.floating-support-choice__action small{
    color:#64748b;
    font-size:12px;
    font-weight:750;
    line-height:1.45;
}
.floating-support-choice__action.is-chat{
    border-color:#bfdbfe;
}
.floating-support-choice__action.is-chat span{
    background:linear-gradient(135deg,#dbeafe,#eff6ff);
    color:#1d4ed8;
}
.floating-support-choice__action.is-wa{
    border-color:#bbf7d0;
}
.floating-support-choice__action.is-wa span{
    background:linear-gradient(135deg,#dcfce7,#f0fdf4);
    color:#15803d;
}
@media (max-width:640px){
    .landing-floating-support{
        right:16px;
        bottom:16px;
    }
    .floating-support-chat-bubble{
        min-height:34px;
        padding:7px 13px;
        font-size:13px;
    }
    .floating-support-chat-bubble::after{
        right:12px;
        bottom:-6px;
        width:12px;
        height:12px;
    }
    .floating-support-btn--contact{
        width:58px;
        height:58px;
        min-width:58px;
        min-height:58px;
    }
    .floating-support-btn--contact .floating-support-btn__label{
        right:48px;
        font-size:14px;
        padding:8px 12px;
    }
    .floating-support-btn__icon--person-call{
        width:34px;
        height:34px;
    }
    .floating-support-choice{
        right:-4px;
        width:min(330px,calc(100vw - 26px));
        bottom:calc(100% + 12px);
    }
    .floating-support-choice__action{
        grid-template-columns:38px minmax(0,1fr);
    }
}

.admin-cv-mini-catalog{
    position:fixed;
    inset:18px;
    z-index:100002;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    padding:22px;
    border-radius:30px;
    border:1px solid rgba(147,197,253,.75);
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 58%,#fff7ed 100%);
    box-shadow:0 34px 90px rgba(15,23,42,.34);
    overflow:hidden;
}
.admin-cv-mini-catalog[hidden]{display:none!important;}
.admin-cv-mini-catalog::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 15% 0%, rgba(250,204,21,.22), transparent 30%), radial-gradient(circle at 90% 10%, rgba(37,99,235,.16), transparent 34%);
    pointer-events:none;
}
.admin-cv-mini-catalog__head,
.admin-cv-mini-catalog__grid{
    position:relative;
    z-index:1;
}
.admin-cv-mini-catalog__head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 14px;
    align-items:center;
    padding:0 0 14px;
    margin:0;
}
.admin-cv-mini-catalog__head strong{
    font-size:26px;
    font-weight:950;
    color:#0f172a;
}
.admin-cv-mini-catalog__head small{
    grid-column:1/2;
    color:#475569;
    font-weight:750;
}
.admin-cv-mini-catalog__close{
    grid-column:2/3;
    grid-row:1/3;
    align-self:start;
    border:1px solid #dbeafe;
    border-radius:999px;
    background:#fff;
    color:#1d4ed8;
    padding:10px 16px;
    font-weight:950;
    cursor:pointer;
}
.admin-cv-mini-catalog__grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    padding:10px 6px 20px;
    max-height:none;
}
.admin-cv-mini-catalog__grid::-webkit-scrollbar{height:10px;}
.admin-cv-mini-catalog__grid::-webkit-scrollbar-thumb{background:#93c5fd;border-radius:999px;}
.admin-cv-template-card{
    position:relative;
    flex:0 0 min(280px,78vw);
    min-height:310px;
    scroll-snap-align:start;
    align-content:start;
    border-radius:24px;
    padding:16px;
}
.admin-cv-template-card__badge{
    width:max-content;
    border-radius:999px;
    background:#dcfce7;
    color:#047857;
    font-size:11px;
    font-weight:950;
    padding:5px 9px;
}
.admin-cv-template-card.is-premium .admin-cv-template-card__badge{
    background:#fffbeb;
    color:#b45309;
}
.admin-cv-template-card.is-locked{
    opacity:.72;
}
.admin-cv-template-card.is-locked::after{
    content:'🔒 KarirRapi Plus';
    position:absolute;
    top:14px;
    right:14px;
    border-radius:999px;
    background:#0f172a;
    color:#fff;
    padding:5px 9px;
    font-size:10px;
    font-weight:950;
    box-shadow:0 10px 22px rgba(15,23,42,.20);
}
.admin-cv-template-card__preview{
    width:100%;
    min-height:118px;
    align-content:center;
    gap:8px;
}
.admin-cv-template-card__preview i{height:8px;}
.helpdesk-chat-open{overflow:hidden;}
.helpdesk-chat-modal[hidden]{display:none!important;}
.helpdesk-chat-modal{
    position:fixed;
    inset:0;
    z-index:100010;
    display:grid;
    place-items:center;
    padding:18px;
}
.helpdesk-chat-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.helpdesk-chat-modal__card{
    position:relative;
    z-index:1;
    width:min(760px,100%);
    max-height:min(90vh,780px);
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    gap:12px;
    overflow:hidden;
    border-radius:28px;
    background:#fff;
    border:1px solid #dbeafe;
    box-shadow:0 34px 90px rgba(15,23,42,.30);
    padding:20px;
}
.helpdesk-chat-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid #dbeafe;
    background:#f8fafc;
    color:#0f172a;
    font-size:24px;
    font-weight:900;
    cursor:pointer;
}
.helpdesk-chat-modal__head{padding-right:48px;}
.helpdesk-chat-modal__head span{
    display:inline-flex;
    width:max-content;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    padding:6px 10px;
    font-size:11px;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.helpdesk-chat-modal__head h2{margin:10px 0 6px;color:#0f172a;font-size:28px;}
.helpdesk-chat-modal__head p{margin:0;color:#475569;font-weight:700;line-height:1.5;}
.helpdesk-chat-start{display:grid;gap:12px;}
.helpdesk-chat-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.helpdesk-chat-fields label,.helpdesk-chat-message-label{display:grid;gap:7px;color:#0f172a;font-weight:900;}
.helpdesk-chat-fields input,.helpdesk-chat-fields select,.helpdesk-chat-message-label textarea,.helpdesk-chat-form textarea{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:15px;
    padding:11px 12px;
    background:#fff;
    color:#0f172a;
    font:inherit;
    font-weight:700;
}
.helpdesk-chat-message-label textarea,.helpdesk-chat-form textarea{resize:vertical;}
.helpdesk-chat-room{display:grid;grid-template-rows:auto minmax(220px,1fr) auto;gap:10px;min-height:0;}
.helpdesk-chat-room[hidden]{display:none!important;}
.helpdesk-chat-room__status{
    border:1px solid #dbeafe;
    border-radius:16px;
    background:#eff6ff;
    color:#1d4ed8;
    padding:10px 12px;
    font-weight:850;
}
.helpdesk-chat-room__status.is-error{border-color:#fecaca;background:#fef2f2;color:#b91c1c;}
.helpdesk-chat-messages{
    display:grid;
    gap:10px;
    align-content:start;
    overflow:auto;
    padding:12px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}
.helpdesk-chat-bubble{
    width:min(82%,520px);
    display:grid;
    gap:4px;
    padding:10px 12px;
    border-radius:16px;
    background:#fff;
    color:#0f172a;
    border:1px solid #e2e8f0;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.helpdesk-chat-bubble.is-admin{justify-self:start;background:#eff6ff;border-color:#bfdbfe;}
.helpdesk-chat-bubble.is-user{justify-self:end;background:#0f172a;color:#fff;border-color:#0f172a;}
.helpdesk-chat-bubble.is-system{justify-self:center;background:#fffbeb;border-color:#fde68a;color:#92400e;}
.helpdesk-chat-bubble b{font-size:12px;font-weight:950;}
.helpdesk-chat-bubble p{margin:0;white-space:pre-wrap;line-height:1.45;font-weight:700;}
.helpdesk-chat-bubble small{opacity:.72;font-size:11px;font-weight:750;}
.helpdesk-chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;}
.traffic-helpdesk-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.traffic-helpdesk-thread{display:grid;gap:10px;border:1px solid #dbeafe;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fbff);padding:14px;}
.traffic-helpdesk-thread__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.traffic-helpdesk-thread__head span{color:#2563eb;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.06em;}
.traffic-helpdesk-thread__head h3{margin:3px 0;color:#0f172a;font-size:18px;}
.traffic-helpdesk-thread__head small{color:#64748b;font-weight:750;}
.traffic-helpdesk-thread__head b{border-radius:999px;background:#dcfce7;color:#047857;padding:6px 9px;font-size:11px;}
.traffic-helpdesk-messages{display:grid;gap:7px;max-height:180px;overflow:auto;}
.traffic-helpdesk-messages p{display:grid;gap:3px;margin:0;padding:9px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;}
.traffic-helpdesk-messages p.is-admin{background:#eff6ff;border-color:#bfdbfe;}
.traffic-helpdesk-messages strong{font-size:12px;color:#334155;}
.traffic-helpdesk-messages span{color:#0f172a;font-weight:700;line-height:1.35;}
.traffic-helpdesk-reply{display:grid;gap:8px;}
.traffic-helpdesk-reply textarea{width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:10px;font:inherit;resize:vertical;}
@media(max-width:780px){
    .helpdesk-chat-modal{padding:10px;align-items:end;}
    .helpdesk-chat-modal__card{max-height:94vh;border-radius:24px 24px 0 0;}
    .helpdesk-chat-fields,.traffic-helpdesk-list{grid-template-columns:1fr;}
    .helpdesk-chat-form{grid-template-columns:1fr;}
    .admin-cv-mini-catalog{inset:8px;border-radius:24px;padding:16px;}
}


/* v21.101: Chat Admin window dibuat kecil seperti widget CS umum. */
body.helpdesk-chat-open{overflow:auto;}
.helpdesk-chat-modal{
    inset:auto 18px 96px auto;
    width:min(390px,calc(100vw - 28px));
    height:auto;
    display:block;
    padding:0;
    pointer-events:none;
}
.helpdesk-chat-modal__backdrop{
    display:none;
}
.helpdesk-chat-modal__card{
    width:100%;
    max-height:min(72vh,620px);
    min-height:0;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    gap:10px;
    border-radius:26px;
    padding:16px;
    pointer-events:auto;
    box-shadow:0 26px 70px rgba(15,23,42,.28);
}
.helpdesk-chat-modal__close{
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    font-size:20px;
}
.helpdesk-chat-modal__head{padding-right:42px;}
.helpdesk-chat-modal__head span{font-size:10px;padding:5px 9px;}
.helpdesk-chat-modal__head h2{font-size:22px;margin:8px 0 5px;}
.helpdesk-chat-modal__head p{font-size:13px;line-height:1.45;}
.helpdesk-chat-fields{grid-template-columns:1fr;gap:8px;}
.helpdesk-chat-fields input,.helpdesk-chat-fields select,.helpdesk-chat-message-label textarea,.helpdesk-chat-form textarea{border-radius:13px;padding:10px 11px;font-size:13px;}
.helpdesk-chat-start{gap:10px;}
.helpdesk-chat-room{grid-template-rows:auto minmax(220px,42vh) auto;}
.helpdesk-chat-room__status{font-size:12px;border-radius:13px;padding:8px 10px;}
.helpdesk-chat-messages{border-radius:16px;padding:10px;}
.helpdesk-chat-bubble{width:min(88%,300px);font-size:13px;}
.helpdesk-chat-form{grid-template-columns:minmax(0,1fr) auto;gap:8px;}
.helpdesk-chat-attach{min-height:40px;}
@media(max-width:640px){
    .helpdesk-chat-modal{
        inset:auto 10px 86px 10px;
        width:auto;
    }
    .helpdesk-chat-modal__card{
        max-height:76vh;
        border-radius:24px;
    }
}

/* v21.97: Help Desk always-on chat + attachments */
.global-helpdesk-floating{position:fixed;right:22px;bottom:22px;z-index:1040;display:grid;gap:8px;pointer-events:none;justify-items:end;}
.global-helpdesk-floating__bubble{
    pointer-events:auto;
    justify-self:end;
    position:relative;
    border:1px solid rgba(191,219,254,.96);
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 58%,#ecfeff 100%);
    color:#1d4ed8;
    border-radius:999px 999px 999px 14px;
    min-height:36px;
    padding:8px 16px;
    font:inherit;
    font-size:14px;
    font-weight:950;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    animation:floatingChatMeGlow 1.4s ease-in-out infinite;
}
.global-helpdesk-floating__bubble::after{
    content:'';
    position:absolute;
    right:16px;
    bottom:-7px;
    width:14px;
    height:14px;
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 75%,#ecfeff 100%);
    border-right:1px solid rgba(191,219,254,.96);
    border-bottom:1px solid rgba(191,219,254,.96);
    transform:rotate(45deg);
    border-bottom-right-radius:3px;
}
.global-helpdesk-floating__bubble:hover{transform:translateY(-1px);color:#1d4ed8;}
.global-helpdesk-floating__btn{pointer-events:auto;border:0;border-radius:24px;padding:10px 14px;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#2563eb,#0f172a);color:#fff;text-decoration:none;box-shadow:0 22px 50px rgba(15,23,42,.28);font-weight:950;min-width:156px;cursor:pointer;}
.global-helpdesk-floating__btn:hover{transform:translateY(-1px);color:#fff;box-shadow:0 26px 60px rgba(37,99,235,.34);}
.global-helpdesk-floating__btn span{width:36px;height:36px;border-radius:14px;background:#fff;color:#2563eb;display:grid;place-items:center;font-size:13px;font-weight:950;letter-spacing:.04em;}
.global-helpdesk-floating__btn b{display:block;font-size:14px;line-height:1.1;}
.global-helpdesk-floating__btn small{display:block;font-size:10px;opacity:.82;font-weight:850;}
.global-helpdesk-floating.is-admin .global-helpdesk-floating__btn{background:linear-gradient(135deg,#7c3aed,#111827);}

.helpdesk-chat-lock-note{
    margin:8px 0 0!important;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(20,184,166,.24);
    border-radius:999px;
    background:linear-gradient(135deg,#ecfeff,#eff6ff);
    color:#0f766e!important;
    padding:7px 10px;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1.25!important;
}
.helpdesk-chat-lock-note::before{content:'✓';font-weight:950;color:#16a34a;}

.helpdesk-chat-history{border:1px solid #dbeafe;background:#f8fbff;border-radius:18px;padding:12px;display:grid;gap:9px;margin-bottom:10px;}
.helpdesk-chat-history[hidden]{display:none!important;}
.helpdesk-chat-history strong{color:#0f172a;font-size:13px;font-weight:950;}
.helpdesk-chat-history div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.helpdesk-chat-history button{text-align:left;border:1px solid #dbeafe;background:#fff;border-radius:14px;padding:9px;display:grid;gap:3px;cursor:pointer;}
.helpdesk-chat-history button:hover{border-color:#2563eb;box-shadow:0 10px 26px rgba(37,99,235,.12);}
.helpdesk-chat-history b{font-size:12px;color:#1d4ed8;}
.helpdesk-chat-history span{font-size:12px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;}
.helpdesk-chat-history small{font-size:10px;color:#64748b;font-weight:700;}
.helpdesk-chat-file{display:grid;gap:7px;color:#0f172a;font-weight:900;}
.helpdesk-chat-file input{border:1px dashed #93c5fd;border-radius:14px;background:#f8fbff;padding:11px;font:inherit;}
.helpdesk-chat-file small{color:#64748b;font-size:12px;line-height:1.35;}
.helpdesk-chat-form{grid-template-columns:minmax(0,1fr) auto auto;}
.helpdesk-chat-attach{align-self:stretch;border:1px dashed #93c5fd;border-radius:14px;background:#f8fbff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;padding:0 12px;cursor:pointer;min-height:46px;}
.helpdesk-chat-attach input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.helpdesk-chat-attachments{display:grid;gap:6px;margin-top:2px;}
.helpdesk-chat-attachments a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon name" "icon meta";gap:1px 7px;align-items:center;text-decoration:none;border-radius:12px;padding:8px;background:rgba(255,255,255,.78);border:1px solid rgba(148,163,184,.35);color:inherit;}
.helpdesk-chat-attachments a span{grid-area:icon;font-size:18px;}
.helpdesk-chat-attachments a b{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;}
.helpdesk-chat-attachments a small{grid-area:meta;font-size:10px;opacity:.75;}
.traffic-helpdesk-file{display:grid;gap:5px;font-weight:900;color:#0f172a;}
.traffic-helpdesk-file input{border:1px dashed #93c5fd;border-radius:12px;padding:9px;background:#f8fbff;}
.traffic-helpdesk-file small{font-size:11px;color:#64748b;font-weight:700;}
.traffic-helpdesk-attachments{display:grid!important;gap:5px;margin-top:5px;}
.traffic-helpdesk-attachments a{display:inline-flex;align-items:center;gap:6px;border:1px solid #bfdbfe;border-radius:999px;background:#fff;color:#1d4ed8!important;padding:5px 8px;text-decoration:none;font-style:normal;font-weight:850;font-size:12px;max-width:100%;}
.traffic-helpdesk-quick-note{font-size:11px;line-height:1.35;color:#475569;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:8px;font-weight:750;}
@media (max-width:720px){.global-helpdesk-floating{right:12px;bottom:12px}.global-helpdesk-floating__bubble{min-height:34px;padding:7px 13px;font-size:13px}.global-helpdesk-floating__bubble::after{right:12px;bottom:-6px;width:12px;height:12px}.global-helpdesk-floating__btn{min-width:auto;border-radius:18px}.global-helpdesk-floating__btn b,.global-helpdesk-floating__btn small{display:none}.helpdesk-chat-history div{grid-template-columns:1fr}.helpdesk-chat-form{grid-template-columns:1fr}.helpdesk-chat-attach{min-height:42px}}

/* v21.101: Chat Admin bubble kecil ala widget support, pilihan WhatsApp digabung, dan chat window compact */
.admin-cv-mini-catalog{
    inset:clamp(10px,2.2vw,22px);
    padding:clamp(14px,2vw,22px);
    border-radius:clamp(20px,2.2vw,30px);
}
.admin-cv-mini-catalog__head strong{
    font-size:clamp(18px,2.2vw,25px);
}
.admin-cv-mini-catalog__head small{
    max-width:860px;
}
.admin-cv-mini-catalog__grid{
    align-items:flex-start;
    gap:clamp(10px,1.2vw,14px);
    padding:8px 4px 18px;
    overscroll-behavior-x:contain;
}
.admin-cv-template-card{
    flex:0 0 clamp(188px,18vw,228px);
    min-height:0!important;
    height:auto!important;
    align-self:flex-start;
    align-content:start;
    display:grid;
    grid-template-rows:auto auto auto auto auto;
    gap:8px;
    padding:12px;
    border-radius:22px;
}
.admin-cv-template-thumb{
    display:grid;
    place-items:center;
    height:clamp(150px,16vw,190px);
    width:100%;
    border-radius:17px;
    overflow:hidden;
    background:linear-gradient(135deg,#f8fafc,#eff6ff);
    border:1px solid #e2e8f0;
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.55);
}
.admin-cv-template-thumb .cv-showcase-thumb,
.admin-cv-template-thumb .polos-thumb,
.admin-cv-template-thumb .canva-thumb{
    width:100%;
    height:100%;
    min-height:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    transform:none;
}
.admin-cv-template-thumb .cv-showcase-paper{
    transform:scale(.57);
    transform-origin:center;
}
.admin-cv-template-thumb .polos-thumb{
    --paper-scale:.47;
}
.admin-cv-template-thumb .canva-paper{
    transform:scale(.88);
    transform-origin:center;
}
.admin-cv-template-card strong{
    font-size:14px;
    line-height:1.18;
}
.admin-cv-template-card em{
    font-size:11px;
}
.admin-cv-template-card small{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:11px;
    line-height:1.38;
}
.admin-cv-template-card__photo-note{
    width:max-content;
    border-radius:999px;
    background:#eef2ff;
    color:#4338ca;
    padding:4px 8px;
    font-size:10px;
    font-weight:950;
}
.admin-cv-template-card.is-locked::after{
    top:10px;
    right:10px;
}
.admin-cv-template-card.is-locked .admin-cv-template-thumb{
    filter:saturate(.75);
}
@media(max-width:780px){
    .admin-cv-mini-catalog{
        inset:0;
        border-radius:0;
        padding:14px 12px calc(18px + env(safe-area-inset-bottom));
    }
    .admin-cv-mini-catalog__head{
        grid-template-columns:1fr;
        gap:8px;
    }
    .admin-cv-mini-catalog__close{
        grid-column:1;
        grid-row:auto;
        justify-self:start;
        padding:9px 13px;
    }
    .admin-cv-mini-catalog__grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        overflow:auto;
        scroll-snap-type:none;
        padding:8px 2px 28px;
    }
    .admin-cv-template-card{
        flex:none;
        width:auto;
        border-radius:18px;
        padding:10px;
    }
    .admin-cv-template-thumb{
        height:132px;
        border-radius:14px;
    }
    .admin-cv-template-thumb .cv-showcase-paper{transform:scale(.48);}
    .admin-cv-template-thumb .polos-thumb{--paper-scale:.39;}
    .admin-cv-template-thumb .canva-paper{transform:scale(.74);}
    .admin-cv-template-card small{
        -webkit-line-clamp:2;
    }
}
@media(max-width:430px){
    .admin-cv-mini-catalog__grid{
        grid-template-columns:1fr;
    }
    .admin-cv-template-thumb{
        height:178px;
    }
    .admin-cv-template-thumb .cv-showcase-paper{transform:scale(.56);}
    .admin-cv-template-thumb .polos-thumb{--paper-scale:.46;}
    .admin-cv-template-thumb .canva-paper{transform:scale(.86);}
}


/* v21.107: Helpdesk catalog gunakan thumbnail template asli + badge premium lock */
@keyframes karirrapiChatBorderGlow{
    0%{box-shadow:0 0 0 1px rgba(37,99,235,.40),0 18px 48px rgba(37,99,235,.20),0 0 0 rgba(20,184,166,0);}
    50%{box-shadow:0 0 0 2px rgba(20,184,166,.70),0 22px 58px rgba(20,184,166,.24),0 0 22px rgba(37,99,235,.22);}
    100%{box-shadow:0 0 0 1px rgba(37,99,235,.40),0 18px 48px rgba(37,99,235,.20),0 0 0 rgba(20,184,166,0);}
}
@keyframes karirrapiChatBorderSpin{
    to{transform:rotate(360deg);}
}
.helpdesk-chat-modal__card{
    position:relative;
    border:0!important;
    overflow:hidden;
    background:linear-gradient(#ffffff,#ffffff) padding-box,linear-gradient(135deg,#2563eb,#14b8a6,#7dd3fc,#2563eb) border-box;
    border:2px solid transparent!important;
    animation:karirrapiChatBorderGlow 2.4s ease-in-out infinite;
}
.helpdesk-chat-modal__card::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    padding:2px;
    background:conic-gradient(from 0deg,#2563eb,#14b8a6,#bfdbfe,#2563eb);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:karirrapiChatBorderSpin 4.5s linear infinite;
    pointer-events:none;
}
.helpdesk-chat-modal{
    inset:auto 18px 92px auto;
    width:min(360px,calc(100vw - 24px));
}
.helpdesk-chat-modal__card{
    max-height:min(78vh,560px);
    padding:14px;
    border-radius:22px;
    grid-template-rows:auto auto minmax(0,1fr);
}
.helpdesk-chat-modal__close{
    top:10px;right:10px;width:32px;height:32px;font-size:18px;
}
.helpdesk-chat-modal__head{padding-right:40px;}
.helpdesk-chat-modal__head span{font-size:9px;padding:4px 8px;}
.helpdesk-chat-modal__head h2{font-size:20px;margin:6px 0 4px;line-height:1.15;}
.helpdesk-chat-modal__head p{font-size:12px;line-height:1.4;}
.helpdesk-chat-start{gap:8px;min-height:0;overflow:auto;padding-right:3px;}
.helpdesk-chat-fields{grid-template-columns:1fr!important;gap:7px;}
.helpdesk-chat-fields label,.helpdesk-chat-message-label,.helpdesk-chat-file{gap:5px;font-size:12px;}
.helpdesk-chat-fields input,.helpdesk-chat-fields select,.helpdesk-chat-message-label textarea,.helpdesk-chat-form textarea{
    min-height:40px;
    border-radius:12px;
    padding:9px 10px;
    font-size:12.5px;
}
.helpdesk-chat-message-label textarea{min-height:78px;}
.helpdesk-chat-file em{font-style:normal;color:#64748b;font-weight:800;}
.helpdesk-chat-file input{padding:9px;border-radius:12px;}
.helpdesk-chat-file small{font-size:11px;line-height:1.3;}
.helpdesk-chat-start>.btn.primary{min-height:40px;border-radius:13px;}
.helpdesk-chat-room{grid-template-rows:auto minmax(190px,36vh) auto;}
.helpdesk-chat-messages{max-height:36vh;}
@media(max-width:640px){
    .helpdesk-chat-modal{inset:auto 10px 84px 10px;width:auto;}
    .helpdesk-chat-modal__card{max-height:74vh;border-radius:21px;padding:13px;}
}

.traffic-helpdesk-template-box{
    display:grid;
    gap:8px;
    border:1px solid #bfdbfe;
    border-radius:14px;
    padding:10px;
    background:linear-gradient(135deg,#eff6ff,#f8fbff);
}
.traffic-helpdesk-template-box>span{
    color:#1d4ed8;
    font-size:12px;
    font-weight:950;
}
.traffic-helpdesk-template-box>div{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
.traffic-helpdesk-template-box button{
    border:1px solid #dbeafe;
    border-radius:999px;
    background:#fff;
    color:#0f172a;
    padding:7px 10px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}
.traffic-helpdesk-template-box button:hover{
    border-color:#14b8a6;
    color:#0f766e;
    box-shadow:0 8px 18px rgba(20,184,166,.12);
}

/* v21.104: Chat Admin action templates tanpa garis muter, katalog template user, dan QR pembayaran klik */
.helpdesk-chat-modal__card::before{
    content:none!important;
    display:none!important;
    animation:none!important;
}
.helpdesk-chat-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:8px 0 2px;
}
.helpdesk-chat-action-link{
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#2563eb,#14b8a6);
    color:#fff;
    padding:7px 11px;
    font-size:11px;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(37,99,235,.20);
}
.helpdesk-chat-action-link:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(20,184,166,.22);
}
.helpdesk-template-catalog-modal,
.helpdesk-qr-dialog{
    position:absolute;
    inset:10px;
    z-index:6;
    border:1px solid rgba(37,99,235,.18);
    border-radius:20px;
    background:rgba(255,255,255,.97);
    box-shadow:0 24px 70px rgba(15,23,42,.22);
    backdrop-filter:blur(12px);
}
.helpdesk-template-catalog-modal{
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    padding:10px;
    gap:8px;
    inset:8px;
    max-height:calc(100% - 16px);
}
.helpdesk-template-catalog-modal[hidden],
.helpdesk-qr-dialog[hidden]{display:none!important;}
.helpdesk-template-catalog-modal__head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:start;
}
.helpdesk-template-catalog-modal__head strong{
    display:block;
    color:#0f172a;
    font-size:14px;
    font-weight:950;
}
.helpdesk-template-catalog-modal__head small{
    display:block;
    color:#64748b;
    font-size:10.5px;
    font-weight:750;
    line-height:1.28;
    margin-top:2px;
}
.helpdesk-template-catalog-modal__head button,
.helpdesk-qr-dialog__close{
    border:1px solid #dbeafe;
    border-radius:999px;
    background:#fff;
    color:#1d4ed8;
    font-weight:950;
    cursor:pointer;
    padding:7px 10px;
}
.helpdesk-template-catalog-modal__grid{
    overflow:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:0 2px 10px 0;
    align-content:start;
}
.helpdesk-template-card{
    --template-accent:#2563eb;
    position:relative;
    border:1px solid #dbeafe;
    border-radius:18px;
    background:#fff;
    text-align:left;
    padding:8px;
    display:grid;
    align-content:start;
    gap:5px;
    cursor:pointer;
    color:#0f172a;
    min-height:208px;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.helpdesk-template-card:hover{
    border-color:var(--template-accent);
    box-shadow:0 14px 30px rgba(37,99,235,.14);
    transform:translateY(-1px);
}
.helpdesk-template-card.is-premium{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.helpdesk-template-card__thumb{
    position:relative;
    display:block;
}
.helpdesk-template-card__thumb .admin-cv-template-thumb{
    height:102px;
    border-radius:14px;
}
.helpdesk-template-card__thumb .admin-cv-template-thumb .cv-showcase-paper{transform:scale(.39);}
.helpdesk-template-card__thumb .admin-cv-template-thumb .polos-thumb{--paper-scale:.31;}
.helpdesk-template-card__thumb .admin-cv-template-thumb .canva-paper{transform:scale(.60);}
.helpdesk-template-card.is-premium .admin-cv-template-thumb{
    filter:blur(1.8px) saturate(.88) brightness(.97);
}
.helpdesk-template-card__lock{
    position:absolute;
    top:8px;
    right:8px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(15,23,42,.88);
    color:#fff;
    font-size:9.5px;
    font-weight:950;
    letter-spacing:.01em;
    box-shadow:0 8px 18px rgba(15,23,42,.28);
}
.helpdesk-template-card strong{
    font-size:11.5px;
    line-height:1.18;
    font-weight:950;
}
.helpdesk-template-card>small{
    color:#1d4ed8;
    font-size:9.5px;
    font-weight:900;
    line-height:1.2;
}
.helpdesk-template-card p{
    margin:0;
    color:#475569;
    font-size:10px;
    line-height:1.28;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
@media(max-width:560px){
    .helpdesk-template-catalog-modal{inset:6px;border-radius:16px;padding:9px;}
    .helpdesk-template-catalog-modal__head{grid-template-columns:1fr;gap:7px;}
    .helpdesk-template-catalog-modal__head button{justify-self:start;}
    .helpdesk-template-catalog-modal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
    .helpdesk-template-card{min-height:188px;padding:7px;}
    .helpdesk-template-card__thumb .admin-cv-template-thumb{height:88px;}
    .helpdesk-template-card__thumb .admin-cv-template-thumb .cv-showcase-paper{transform:scale(.34);}
    .helpdesk-template-card__thumb .admin-cv-template-thumb .polos-thumb{--paper-scale:.27;}
    .helpdesk-template-card__thumb .admin-cv-template-thumb .canva-paper{transform:scale(.52);}
}
@media(max-width:430px){
    .helpdesk-template-card{
        min-height:182px;
    }
    .helpdesk-template-card__thumb .admin-cv-template-thumb{
        height:82px;
    }
    .helpdesk-template-card__thumb .admin-cv-template-thumb .cv-showcase-paper{transform:scale(.31);}
    .helpdesk-template-card__thumb .admin-cv-template-thumb .polos-thumb{--paper-scale:.24;}
    .helpdesk-template-card__thumb .admin-cv-template-thumb .canva-paper{transform:scale(.48);}
}
.helpdesk-template-catalog-empty{
    grid-column:1/-1;
    border:1px dashed #bfdbfe;
    border-radius:15px;
    padding:16px;
    color:#64748b;
    font-weight:850;
}
.helpdesk-qr-dialog{
    display:grid;
    place-items:center;
    padding:14px;
}
.helpdesk-qr-dialog__card{
    position:relative;
    width:min(100%,300px);
    border:1px solid #dbeafe;
    border-radius:18px;
    background:#fff;
    padding:15px;
    display:grid;
    gap:9px;
    text-align:center;
}
.helpdesk-qr-dialog__close{
    position:absolute;
    top:8px;
    right:8px;
    width:30px;
    height:30px;
    padding:0;
    font-size:18px;
}
.helpdesk-qr-dialog__card strong{
    color:#0f172a;
    font-weight:950;
    padding-right:24px;
}
.helpdesk-qr-dialog__card span{
    color:#475569;
    font-size:11px;
    line-height:1.35;
    font-weight:750;
}
.helpdesk-qr-dialog__image-button{
    justify-self:center;
    border:0;
    background:transparent;
    padding:0;
    cursor:zoom-in;
}
.helpdesk-qr-dialog__card img{
    width:min(100%,235px);
    aspect-ratio:1/1;
    object-fit:contain;
    justify-self:center;
    border-radius:14px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    padding:8px;
    transition:transform .16s ease, box-shadow .16s ease;
}
.helpdesk-qr-dialog__image-button:hover img{
    transform:scale(1.02);
    box-shadow:0 14px 28px rgba(37,99,235,.14);
}
.helpdesk-qr-zoom{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:grid;
    place-items:center;
    padding:18px;
}
.helpdesk-qr-zoom[hidden]{display:none!important;}
.helpdesk-qr-zoom-open{overflow:hidden!important;}
.helpdesk-qr-zoom__backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.64);
    backdrop-filter:blur(11px) saturate(1.15);
    -webkit-backdrop-filter:blur(11px) saturate(1.15);
}
.helpdesk-qr-zoom__card{
    position:relative;
    z-index:1;
    width:min(92vw,460px);
    max-height:min(92dvh,620px);
    overflow:auto;
    border-radius:26px;
    border:1px solid rgba(191,219,254,.98);
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    box-shadow:0 34px 90px rgba(15,23,42,.42),0 0 0 1px rgba(255,255,255,.50) inset;
    padding:18px;
    display:grid;
    gap:10px;
    text-align:center;
    animation:helpdeskQrZoomIn .18s ease-out;
}
@keyframes helpdeskQrZoomIn{
    from{opacity:0;transform:translateY(10px) scale(.96);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
.helpdesk-qr-zoom__card strong{
    color:#0f172a;
    font-size:18px;
    font-weight:950;
    padding:0 34px;
}
.helpdesk-qr-zoom__card span{
    color:#475569;
    font-size:12px;
    line-height:1.45;
    font-weight:800;
}
.helpdesk-qr-zoom__card img{
    width:min(100%,400px);
    aspect-ratio:1/1;
    object-fit:contain;
    justify-self:center;
    border-radius:18px;
    border:1px solid #dbeafe;
    background:#f8fafc;
    padding:10px;
    box-shadow:0 16px 38px rgba(15,23,42,.10);
}
.helpdesk-qr-zoom__close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:1px solid #dbeafe;
    border-radius:999px;
    background:#fff;
    color:#1d4ed8;
    font-size:22px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(37,99,235,.12);
}
@media(max-width:430px){
    .helpdesk-qr-zoom{padding:12px;}
    .helpdesk-qr-zoom__card{width:min(94vw,420px);padding:14px;border-radius:22px;}
    .helpdesk-qr-zoom__card img{width:min(100%,340px);}
}
.helpdesk-chat-attach span{
    white-space:nowrap;
}

/* v21.109: QR zoom fixed keluar dari chat + background blur */
@keyframes karirrapiChatElectricPulse{
    0%,100%{
        background-position:0% 50%;
        box-shadow:0 0 0 1px rgba(37,99,235,.55),0 0 10px rgba(37,99,235,.26),0 18px 44px rgba(15,23,42,.20);
        filter:drop-shadow(0 0 4px rgba(37,99,235,.30));
    }
    48%{
        background-position:100% 50%;
        box-shadow:0 0 0 2px rgba(20,184,166,.82),0 0 18px rgba(20,184,166,.48),0 20px 48px rgba(15,23,42,.22);
        filter:drop-shadow(0 0 8px rgba(20,184,166,.50));
    }
    54%{
        box-shadow:0 0 0 2px rgba(125,211,252,.95),0 0 24px rgba(37,99,235,.55),0 20px 48px rgba(15,23,42,.22);
        filter:drop-shadow(0 0 11px rgba(125,211,252,.58));
    }
}
@keyframes karirrapiChatElectricSpark{
    0%,100%{opacity:.28;filter:drop-shadow(0 0 4px rgba(37,99,235,.30));}
    50%{opacity:.95;filter:drop-shadow(0 0 10px rgba(20,184,166,.72));}
}
.helpdesk-chat-modal{
    inset:auto 14px 18px auto;
    width:min(350px,calc(100vw - 20px));
}
.helpdesk-chat-modal__card{
    max-height:min(calc(100dvh - 32px),560px);
    padding:12px;
    gap:7px;
    border-radius:20px;
    background:linear-gradient(#ffffff,#ffffff) padding-box,linear-gradient(120deg,#2563eb,#7dd3fc,#14b8a6,#2563eb) border-box!important;
    background-size:100% 100%,280% 280%!important;
    border:2px solid transparent!important;
    animation:karirrapiChatElectricPulse 1s ease-in-out infinite!important;
}
.helpdesk-chat-modal__card::before{
    content:none!important;
    display:none!important;
    animation:none!important;
}
.helpdesk-chat-modal__card::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:2px;
    background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(125,211,252,.95),rgba(20,184,166,.18),rgba(37,99,235,.80));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    animation:karirrapiChatElectricSpark 1s steps(2,end) infinite;
}
.helpdesk-chat-modal__close{top:9px;right:9px;width:30px;height:30px;font-size:18px;}
.helpdesk-chat-modal__head{padding-right:36px;}
.helpdesk-chat-modal__head span{font-size:8.5px;padding:4px 8px;}
.helpdesk-chat-modal__head h2{font-size:18px!important;line-height:1.12;margin:5px 0 3px!important;}
.helpdesk-chat-modal__head p{font-size:11.5px!important;line-height:1.34!important;font-weight:800!important;}
.helpdesk-chat-lock-note{display:none!important;}
.helpdesk-chat-start{gap:6px;padding-right:2px;}
.helpdesk-chat-fields{gap:6px!important;}
.helpdesk-chat-fields label,.helpdesk-chat-message-label,.helpdesk-chat-file{gap:4px;font-size:11.5px;}
.helpdesk-chat-fields input,.helpdesk-chat-fields select,.helpdesk-chat-message-label textarea,.helpdesk-chat-form textarea{
    min-height:36px;
    padding:8px 9px;
    border-radius:11px;
    font-size:12px;
}
.helpdesk-chat-message-label textarea{min-height:58px!important;}
.helpdesk-chat-file input{padding:7px 8px;border-radius:11px;}
.helpdesk-chat-file small{display:none;}
.helpdesk-chat-start>.btn.primary{min-height:36px;border-radius:12px;padding:8px 12px;}
.helpdesk-chat-history{padding:8px;border-radius:14px;gap:6px;margin-bottom:6px;max-height:94px;overflow:auto;}
.helpdesk-chat-history strong{font-size:12px;}
.helpdesk-chat-history button{border-radius:11px;padding:7px;}
.helpdesk-chat-room{grid-template-rows:auto minmax(125px,30vh) auto;gap:7px;}
.helpdesk-chat-room__status{font-size:11.5px!important;border-radius:11px!important;padding:7px 9px!important;line-height:1.28;}
.helpdesk-chat-messages{max-height:min(30vh,220px);border-radius:14px;padding:8px;gap:8px;}
.helpdesk-chat-bubble{width:min(88%,280px);padding:8px 10px;border-radius:14px;font-size:12px;}
.helpdesk-chat-bubble p{line-height:1.34;}
.helpdesk-chat-form{gap:6px;}
.helpdesk-chat-form textarea{min-height:38px;max-height:74px;}
.helpdesk-chat-attach{min-height:38px!important;border-radius:11px!important;padding:0 10px!important;font-size:11.5px;}
@media(max-width:640px){
    .helpdesk-chat-modal{inset:auto 8px 8px 8px;width:auto;}
    .helpdesk-chat-modal__card{max-height:calc(100dvh - 16px);padding:10px;border-radius:19px;}
    .helpdesk-chat-modal__head h2{font-size:17px!important;}
    .helpdesk-chat-modal__head p{font-size:11px!important;}
    .helpdesk-chat-room{grid-template-rows:auto minmax(116px,28vh) auto;}
    .helpdesk-chat-messages{max-height:min(28vh,196px);}
}

/* v21.112: Chat me bubble dipaksa muncul dari tombol icon yang terlihat */
@keyframes karirrapiChatMeBubbleGlowForced{
    0%,100%{
        box-shadow:0 12px 24px rgba(37,99,235,.20),0 0 0 1px rgba(255,255,255,.90),0 0 10px rgba(125,211,252,.25);
        filter:drop-shadow(0 0 4px rgba(37,99,235,.22));
    }
    50%{
        box-shadow:0 16px 34px rgba(20,184,166,.25),0 0 0 1px rgba(255,255,255,1),0 0 20px rgba(125,211,252,.62);
        filter:drop-shadow(0 0 12px rgba(125,211,252,.58));
    }
}
.floating-support-chat-bubble,
.global-helpdesk-floating__bubble{
    display:none!important;
}
.landing-floating-support .floating-support-btn--contact,
.global-helpdesk-floating .global-helpdesk-floating__btn{
    position:relative!important;
    overflow:visible!important;
}
.landing-floating-support .floating-support-btn--contact::before,
.global-helpdesk-floating .global-helpdesk-floating__btn::before{
    content:'Chat me';
    position:absolute;
    right:4px;
    bottom:calc(100% + 12px);
    min-width:max-content;
    min-height:34px;
    padding:8px 15px;
    border-radius:999px 999px 999px 12px;
    border:1px solid rgba(191,219,254,.98);
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 55%,#ecfeff 100%);
    color:#1d4ed8;
    font-size:14px;
    font-weight:950;
    line-height:1;
    letter-spacing:.01em;
    z-index:5;
    pointer-events:none;
    animation:karirrapiChatMeBubbleGlowForced 1.25s ease-in-out infinite;
}
.landing-floating-support .floating-support-btn--contact::after,
.global-helpdesk-floating .global-helpdesk-floating__btn::after{
    content:'';
    position:absolute;
    right:18px;
    bottom:calc(100% + 6px);
    width:13px;
    height:13px;
    background:linear-gradient(135deg,#ffffff 0%,#eff6ff 75%,#ecfeff 100%);
    border-right:1px solid rgba(191,219,254,.98);
    border-bottom:1px solid rgba(191,219,254,.98);
    transform:rotate(45deg);
    border-bottom-right-radius:3px;
    z-index:4;
    pointer-events:none;
}
@media(max-width:720px){
    .landing-floating-support .floating-support-btn--contact::before,
    .global-helpdesk-floating .global-helpdesk-floating__btn::before{
        right:0;
        bottom:calc(100% + 10px);
        min-height:32px;
        padding:7px 13px;
        font-size:13px;
    }
    .landing-floating-support .floating-support-btn--contact::after,
    .global-helpdesk-floating .global-helpdesk-floating__btn::after{
        right:14px;
        bottom:calc(100% + 5px);
        width:12px;
        height:12px;
    }
}

/* v21.113: Help Desk - pilihan bantuan di space kosong + Kembali ke awal reset riwayat */
.helpdesk-chat-start-choice{
    display:grid;
    gap:6px;
    border:1px solid #dbeafe;
    border-radius:14px;
    background:linear-gradient(135deg,#f8fbff,#ecfeff);
    padding:8px;
}
.helpdesk-chat-start-choice strong{
    color:#0f172a;
    font-size:11.5px;
    font-weight:950;
}
.helpdesk-chat-start-choice div{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
.helpdesk-chat-start-choice button,
.helpdesk-chat-start-choice a{
    min-height:32px;
    border:1px solid #bfdbfe;
    border-radius:999px;
    background:#fff;
    color:#1d4ed8;
    text-decoration:none;
    display:grid;
    place-items:center;
    padding:6px 8px;
    font:inherit;
    font-size:11px;
    font-weight:950;
    cursor:pointer;
}
.helpdesk-chat-start-choice a{
    color:#047857;
    border-color:#bbf7d0;
}
.helpdesk-chat-start-choice small{
    color:#64748b;
    font-size:10px;
    line-height:1.28;
    font-weight:750;
}
.helpdesk-chat-room{
    grid-template-rows:auto minmax(82px,1fr) auto auto!important;
}
.helpdesk-chat-assist{
    border:1px solid #dbeafe;
    border-radius:13px;
    background:linear-gradient(135deg,#ffffff,#f8fbff);
    padding:7px;
    display:grid;
    gap:6px;
}
.helpdesk-chat-assist__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
}
.helpdesk-chat-assist__top b{
    color:#0f172a;
    font-size:11px;
    font-weight:950;
}
.helpdesk-chat-assist__reset{
    border:1px solid #fde68a;
    border-radius:999px;
    background:#fffbeb;
    color:#92400e;
    padding:5px 8px;
    font:inherit;
    font-size:10.5px;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}
.helpdesk-chat-assist__chips{
    display:flex;
    gap:5px;
    overflow-x:auto;
    padding-bottom:1px;
    scrollbar-width:thin;
}
.helpdesk-chat-assist__chips button{
    flex:0 0 auto;
    border:1px solid #bfdbfe;
    border-radius:999px;
    background:#fff;
    color:#1d4ed8;
    padding:5px 8px;
    font:inherit;
    font-size:10.5px;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}
.helpdesk-chat-assist__chips button:hover,
.helpdesk-chat-assist__reset:hover,
.helpdesk-chat-start-choice button:hover,
.helpdesk-chat-start-choice a:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(37,99,235,.12);
}
@media(max-width:430px){
    .helpdesk-chat-start-choice div{grid-template-columns:1fr;}
    .helpdesk-chat-assist{padding:6px;gap:5px;}
    .helpdesk-chat-assist__top b{font-size:10.5px;}
    .helpdesk-chat-assist__reset,.helpdesk-chat-assist__chips button{font-size:10px;padding:5px 7px;}
}

/* v21.115: Kembali ke awal chat kembali ke menu Butuh bantuan, bukan teks pilihan di dalam Zendesk. */
.global-helpdesk-floating[data-support-choice-root]{
    pointer-events:auto;
}
.global-helpdesk-floating .floating-support-choice{
    pointer-events:auto;
    right:0;
    bottom:calc(100% + 14px);
}
.global-helpdesk-floating .floating-support-choice__action{
    text-align:left;
}

/* v21.120: Mobile responsive audit - HP safe layout, chat admin final, assistant compact, hamburger hardening, anti horizontal scroll. */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
}
*,*::before,*::after{
    box-sizing:border-box;
}
img,video,canvas,iframe{
    max-width:100%;
}
input,select,textarea,button{
    max-width:100%;
}
.app-body,
.bootstrap-layout-main,
.ats-homepage,
.home-blank,
.cv-builder-python-shell,
.cv-builder-left,
.cv-builder-preview-wrap,
.letter-builder-python-shell,
.public-site-main,
main{
    max-width:100%;
    min-width:0;
}
.app-body,
.bootstrap-layout-main,
.public-site-main{
    overflow-x:clip;
}
@supports not (overflow-x: clip){
    .app-body,
    .bootstrap-layout-main,
    .public-site-main{overflow-x:hidden;}
}
.cv-preview-viewport,
.admin-cv-mini-catalog__grid,
.helpdesk-chat-assist__chips,
.template-picker-grid,
.cv-template-scroll,
.public-main-nav{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
}

@media(max-width:980px){
    .app-header.navbar,
    .app-header--user,
    .app-header--admin{
        width:100%!important;
        max-width:100%!important;
        left:0!important;
        right:0!important;
    }
    .app-header .app-header__inner.container-fluid,
    .app-header--user .app-header__inner.container-fluid,
    .app-header--admin .app-header__inner.container-fluid{
        width:100%!important;
        max-width:100%!important;
    }
    .app-mobile-drawer,
    .app-header--user .app-mobile-drawer,
    .app-header--admin .app-mobile-drawer{
        height:100dvh!important;
        max-height:100dvh!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        padding-bottom:max(18px,env(safe-area-inset-bottom))!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .app-mobile-drawer .app-nav__dropdown.is-open .app-nav__menu{
        display:grid!important;
    }
    .app-mobile-drawer .app-nav__dropdown:not(.is-open) .app-nav__menu{
        display:none!important;
    }
    .app-mobile-drawer .app-nav > a.nav-link,
    .app-mobile-drawer .app-nav > .app-nav__dropdown > button.nav-link{
        min-height:46px!important;
        touch-action:manipulation;
    }
}
@media(max-width:430px){
    .app-header .app-header__inner.container-fluid,
    .app-header--user .app-header__inner.container-fluid,
    .app-header--admin .app-header__inner.container-fluid{
        min-height:60px!important;
        padding:8px 10px!important;
    }
    .app-header .app-brand__mark,
    .app-header--user .app-brand__mark,
    .app-header--admin .app-brand__mark{
        width:38px!important;
        height:38px!important;
        flex-basis:38px!important;
    }
    .app-header .app-brand__text strong,
    .app-header--user .app-brand__text strong,
    .app-header--admin .app-brand__text strong{
        font-size:17px!important;
    }
}

/* Chat Admin mobile final */
@media(max-width:640px){
    .global-helpdesk-floating{
        right:12px!important;
        bottom:max(12px,env(safe-area-inset-bottom))!important;
        z-index:100040!important;
    }
    .global-helpdesk-floating .global-helpdesk-floating__btn{
        min-width:58px!important;
        width:58px!important;
        height:58px!important;
        padding:0!important;
        border-radius:22px!important;
        justify-content:center!important;
    }
    .global-helpdesk-floating .global-helpdesk-floating__btn span{
        width:38px!important;
        height:38px!important;
        border-radius:15px!important;
    }
    .global-helpdesk-floating.is-open .floating-support-choice,
    .global-helpdesk-floating .floating-support-choice{
        position:fixed!important;
        left:12px!important;
        right:12px!important;
        bottom:max(82px,calc(70px + env(safe-area-inset-bottom)))!important;
        width:auto!important;
        max-width:none!important;
        max-height:calc(100dvh - 104px)!important;
        overflow:auto!important;
        padding:14px!important;
        border-radius:22px!important;
        z-index:100050!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .floating-support-choice__head strong{font-size:18px!important;}
    .floating-support-choice p{font-size:13px!important;line-height:1.45!important;}
    .floating-support-choice__actions{gap:10px!important;}
    .floating-support-choice__action{
        min-height:74px!important;
        grid-template-columns:42px minmax(0,1fr)!important;
        padding:12px!important;
        border-radius:18px!important;
    }
    .floating-support-choice__action span{
        width:42px!important;
        height:42px!important;
        border-radius:15px!important;
    }
    .helpdesk-chat-open .global-helpdesk-floating{
        visibility:hidden!important;
        pointer-events:none!important;
    }
    .helpdesk-chat-modal{
        position:fixed!important;
        inset:auto 0 0 0!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        height:auto!important;
        z-index:100060!important;
        display:block!important;
        padding:0!important;
        pointer-events:none!important;
    }
    .helpdesk-chat-modal__card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        height:auto!important;
        min-height:min(620px,calc(100dvh - 10px))!important;
        max-height:calc(100dvh - 10px)!important;
        display:grid!important;
        grid-template-rows:auto auto minmax(0,1fr)!important;
        gap:8px!important;
        padding:11px 10px max(10px,env(safe-area-inset-bottom))!important;
        border-radius:22px 22px 0 0!important;
        overflow:hidden!important;
        pointer-events:auto!important;
    }
    .helpdesk-chat-modal__head{
        min-width:0!important;
        padding-right:38px!important;
    }
    .helpdesk-chat-modal__head span{font-size:8px!important;padding:4px 8px!important;}
    .helpdesk-chat-modal__head h2{font-size:17px!important;line-height:1.12!important;margin:5px 0 2px!important;}
    .helpdesk-chat-modal__head p{font-size:11px!important;line-height:1.32!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
    .helpdesk-chat-modal__close{
        top:8px!important;
        right:8px!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
    }
    .helpdesk-chat-history{
        max-height:86px!important;
        overflow:auto!important;
        margin:0!important;
        padding:8px!important;
        border-radius:14px!important;
    }
    .helpdesk-chat-start{
        min-height:0!important;
        overflow:auto!important;
        gap:8px!important;
        padding:0 2px 4px!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .helpdesk-chat-fields{grid-template-columns:1fr!important;gap:7px!important;}
    .helpdesk-chat-fields label,
    .helpdesk-chat-message-label,
    .helpdesk-chat-file{font-size:11.5px!important;gap:4px!important;}
    .helpdesk-chat-fields input,
    .helpdesk-chat-fields select,
    .helpdesk-chat-message-label textarea,
    .helpdesk-chat-form textarea{
        min-height:40px!important;
        padding:8px 9px!important;
        font-size:12.5px!important;
        border-radius:12px!important;
    }
    .helpdesk-chat-message-label textarea{min-height:62px!important;}
    .helpdesk-chat-start>.btn.primary{min-height:42px!important;border-radius:13px!important;}
    .helpdesk-chat-room{
        height:100%!important;
        min-height:0!important;
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto auto!important;
        gap:7px!important;
        overflow:hidden!important;
    }
    .helpdesk-chat-room__status{
        min-height:0!important;
        padding:7px 9px!important;
        font-size:11px!important;
        line-height:1.28!important;
        border-radius:12px!important;
    }
    .helpdesk-chat-messages{
        min-height:0!important;
        max-height:none!important;
        height:auto!important;
        overflow:auto!important;
        padding:8px!important;
        gap:7px!important;
        border-radius:14px!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .helpdesk-chat-bubble{
        width:min(88%,280px)!important;
        max-width:100%!important;
        padding:8px 10px!important;
        font-size:12px!important;
        border-radius:14px!important;
    }
    .helpdesk-chat-bubble p{line-height:1.34!important;}
    .helpdesk-chat-assist{
        min-width:0!important;
        padding:6px!important;
        gap:5px!important;
        border-radius:13px!important;
    }
    .helpdesk-chat-assist__top{
        gap:6px!important;
        align-items:center!important;
    }
    .helpdesk-chat-assist__top b{
        font-size:10.5px!important;
        white-space:nowrap!important;
    }
    .helpdesk-chat-assist__reset{
        min-height:34px!important;
        padding:6px 10px!important;
        font-size:10px!important;
        white-space:nowrap!important;
    }
    .helpdesk-chat-assist__chips{
        gap:6px!important;
        padding-bottom:2px!important;
        overflow-x:auto!important;
        max-width:100%!important;
    }
    .helpdesk-chat-assist__chips button{
        min-height:32px!important;
        padding:6px 9px!important;
        font-size:10.5px!important;
    }
    .helpdesk-chat-form{
        min-width:0!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        gap:7px!important;
        align-items:stretch!important;
    }
    .helpdesk-chat-form textarea{
        grid-column:1/-1!important;
        min-height:42px!important;
        max-height:84px!important;
        resize:none!important;
    }
    .helpdesk-chat-attach{
        min-height:42px!important;
        min-width:0!important;
        padding:0 10px!important;
        border-radius:12px!important;
        font-size:11px!important;
    }
    .helpdesk-chat-attach span{white-space:nowrap!important;}
    .helpdesk-chat-form .btn.primary,
    .helpdesk-chat-form button[type="submit"]{
        min-height:42px!important;
        min-width:92px!important;
        border-radius:12px!important;
        padding:0 14px!important;
        font-size:13px!important;
    }
}
@media(max-width:380px){
    .helpdesk-chat-assist__top{
        display:grid!important;
        grid-template-columns:1fr!important;
    }
    .helpdesk-chat-assist__reset{
        width:100%!important;
        justify-content:center!important;
    }
    .helpdesk-chat-form .btn.primary,
    .helpdesk-chat-form button[type="submit"]{min-width:82px!important;padding:0 10px!important;}
}

/* Assistant compact mode mobile */
@media(max-width:760px){
    .karirrapi-focus-tour{
        z-index:100070!important;
    }
    .karirrapi-focus-tour__ring{
        border-width:2px!important;
        border-radius:12px!important;
        box-shadow:0 0 0 9999px rgba(7,16,36,.10),0 12px 34px rgba(0,0,0,.18),0 0 0 5px rgba(246,200,96,.18)!important;
    }
    .karirrapi-focus-tour__target-clone{
        display:none!important;
    }
    .karirrapi-step-target-active{
        outline-width:2px!important;
        outline-offset:2px!important;
        box-shadow:0 0 0 4px rgba(246,200,96,.20),0 8px 20px rgba(0,0,0,.14)!important;
    }
    .karirrapi-focus-tour__card{
        left:10px!important;
        right:10px!important;
        top:auto!important;
        bottom:max(8px,env(safe-area-inset-bottom))!important;
        width:auto!important;
        max-width:none!important;
        max-height:38dvh!important;
        overflow:auto!important;
        padding:11px!important;
        border-radius:17px!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .karirrapi-focus-tour__close{
        width:30px!important;
        height:30px!important;
        top:8px!important;
        right:8px!important;
        font-size:17px!important;
    }
    .karirrapi-focus-tour__badge{
        font-size:9px!important;
        padding:4px 8px!important;
        margin-bottom:7px!important;
    }
    .karirrapi-focus-tour__card h3{
        margin:0 30px 6px 0!important;
        font-size:14.5px!important;
        line-height:1.22!important;
    }
    .karirrapi-focus-tour__card p{
        font-size:12px!important;
        line-height:1.38!important;
        margin-bottom:8px!important;
    }
    .karirrapi-focus-tour__warning{
        padding:7px 8px!important;
        border-radius:10px!important;
        font-size:11.5px!important;
        margin-bottom:7px!important;
    }
    .karirrapi-focus-tour__progress{
        grid-template-rows:auto 6px!important;
        row-gap:5px!important;
        margin:8px 0 10px!important;
        font-size:10.5px!important;
    }
    .karirrapi-focus-tour__progress::after,
    .karirrapi-focus-tour__progress b{
        height:6px!important;
    }
    .karirrapi-focus-tour__actions,
    .karirrapi-focus-tour__final{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:7px!important;
    }
    .karirrapi-focus-tour__actions .btn,
    .karirrapi-focus-tour__final .btn{
        min-height:40px!important;
        border-radius:12px!important;
        padding:8px 9px!important;
        font-size:12px!important;
        line-height:1.2!important;
    }
    .karirrapi-focus-tour__actions [data-tour-next]{
        grid-column:1/-1!important;
        order:-1!important;
    }
    body.karirrapi-focus-tour-active .cv-modal-card,
    body.karirrapi-focus-tour-active .letter-input-floating-modal__card,
    body.karirrapi-focus-tour-active .layout-floating-modal__card{
        max-height:calc(100dvh - 44px)!important;
        overflow:auto!important;
    }
}
@media(max-width:420px){
    .karirrapi-focus-tour__card{
        left:8px!important;
        right:8px!important;
        max-height:34dvh!important;
        padding:10px!important;
    }
    .karirrapi-focus-tour__card p{
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
        overflow:hidden!important;
    }
    .karirrapi-focus-tour__actions .btn,
    .karirrapi-focus-tour__final .btn{
        min-height:38px!important;
        font-size:11.5px!important;
    }
}

/* Landing + workspace extra HP hardening */
@media(max-width:640px){
    .ats-homepage,
    .landing-page,
    .home-landing,
    .landing-root{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }
    .ats-homepage section,
    .ats-homepage .container,
    .ats-homepage .container-fluid{
        max-width:100%!important;
    }
    .landing-hero,
    .landing-hero__grid,
    .landing-section,
    .landing-admin-cv-card{
        max-width:100%!important;
        min-width:0!important;
    }
    .btn,
    .ats-btn,
    .landing-cta a,
    .landing-cta button{
        touch-action:manipulation;
    }
}


/* v21.122 - Admin header bell-only notification badge */
.admin-notify{
    position:relative;
    display:inline-flex;
    align-items:center;
    z-index:120;
}
.admin-notify__trigger{
    position:relative;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    width:42px;
    padding:0;
    border:1px solid rgba(226,232,240,.95);
    border-radius:999px;
    background:#ffffff;
    color:#0f172a!important;
    text-decoration:none!important;
    font-size:12px;
    font-weight:950;
    line-height:1;
    box-shadow:0 10px 22px rgba(15,23,42,.08);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.admin-notify__trigger:hover,
.admin-notify:focus-within .admin-notify__trigger{
    transform:translateY(-1px);
    border-color:#bfdbfe;
    background:#f8fbff;
    box-shadow:0 16px 30px rgba(37,99,235,.16);
}
.admin-notify.has-alerts .admin-notify__trigger{
    background:linear-gradient(135deg,#fff7ed,#ffffff 58%,#eff6ff);
    border-color:#fed7aa;
    color:#7c2d12!important;
}
.admin-notify.is-clear .admin-notify__trigger{
    background:#ffffff;
}
.admin-notify__icon{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#eff6ff;
    font-size:13px;
}
.admin-notify.has-alerts .admin-notify__icon{
    background:#ffedd5;
    animation:adminNotifyBellPulse 1.8s ease-in-out infinite;
}
.admin-notify__trigger b{
    position:absolute;
    top:-7px;
    right:-5px;
    min-width:21px;
    height:21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    border:2px solid #fff;
    font-size:10px;
    font-weight:1000;
    line-height:1;
    box-shadow:0 8px 18px rgba(239,68,68,.30);
}
.admin-notify__panel{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:340px;
    max-width:calc(100vw - 28px);
    display:none;
    border:1px solid #dbeafe;
    border-radius:22px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 55px rgba(15,23,42,.18);
    padding:12px;
    backdrop-filter:blur(16px);
}
.admin-notify__panel::before{
    content:"";
    position:absolute;
    top:-7px;
    right:28px;
    width:14px;
    height:14px;
    transform:rotate(45deg);
    background:#fff;
    border-left:1px solid #dbeafe;
    border-top:1px solid #dbeafe;
}
.admin-notify:hover .admin-notify__panel,
.admin-notify:focus-within .admin-notify__panel{
    display:block;
}
.admin-notify__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:4px 4px 10px;
    border-bottom:1px solid #e2e8f0;
    margin-bottom:8px;
}
.admin-notify__head strong{
    font-size:14px;
    font-weight:1000;
    color:#0f172a;
}
.admin-notify__head small{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 8px;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
    font-size:10.5px;
    font-weight:950;
}
.admin-notify.has-alerts .admin-notify__head small{
    background:#fee2e2;
    color:#991b1b;
}
.admin-notify__list{
    display:grid;
    gap:7px;
}
.admin-notify__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border:1px solid #e2e8f0;
    border-radius:15px;
    background:#f8fafc;
    color:#0f172a!important;
    text-decoration:none!important;
}
.admin-notify__row:hover{
    border-color:#bfdbfe;
    background:#eff6ff;
}
.admin-notify__row span{
    min-width:0;
}
.admin-notify__row b{
    display:block;
    color:#0f172a;
    font-size:12px;
    font-weight:1000;
}
.admin-notify__row small{
    display:block;
    margin-top:2px;
    color:#64748b;
    font-size:10.5px;
    font-weight:800;
    line-height:1.35;
}
.admin-notify__row em{
    min-width:32px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#e2e8f0;
    color:#334155;
    font-style:normal;
    font-size:12px;
    font-weight:1000;
}
.admin-notify__row.has-count{
    background:#fff;
    border-color:#bfdbfe;
}
.admin-notify__row.has-count em{
    background:#2563eb;
    color:#fff;
    box-shadow:0 9px 18px rgba(37,99,235,.20);
}
@keyframes adminNotifyBellPulse{
    0%,100%{transform:rotate(0deg) scale(1)}
    20%{transform:rotate(-8deg) scale(1.03)}
    40%{transform:rotate(8deg) scale(1.03)}
    60%{transform:rotate(0deg) scale(1)}
}
@media(max-width:900px){
    .admin-notify__trigger{width:42px;padding:0;}
    .admin-notify__panel{position:fixed;top:76px;left:12px;right:12px;width:auto;max-width:none;}
    .admin-notify__panel::before{right:96px;}
}
@media(max-width:520px){
    .app-header__actions{gap:7px!important;}
    .admin-notify__trigger{width:40px;min-height:38px;}
    .admin-notify__panel{top:68px;left:10px;right:10px;border-radius:18px;}
    .admin-notify__row{padding:9px;}
    .admin-notify__row small{font-size:10px;}
}

/* v21.126 - Real Visitor Analytics Cleanup + Unique Visitor Counter + Bot/Internal IP Filter */

/* v21.126 - Real Visitor Analytics Cleanup + unique visitor + bot/internal filter */
.traffic-visitor-cleanup-card {
    border-color: rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
}
.traffic-cleanup-grid,
.traffic-react-cleanup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.traffic-cleanup-grid article {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.05);
    padding: 14px 16px;
}
.traffic-cleanup-grid span {
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.traffic-cleanup-grid strong {
    display: block;
    margin-top: 6px;
    color: #0f172a;
    font-size: 26px;
    line-height: 1;
}
.traffic-cleanup-grid small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-weight: 700;
}
.traffic-filtered-breakdown {
    margin-top: 16px;
    border: 1px dashed rgba(100, 116, 139, 0.35);
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(248, 250, 252, 0.9);
}
.traffic-filtered-breakdown summary {
    cursor: pointer;
    font-weight: 900;
    color: #334155;
}
@media (max-width: 720px) {
    .traffic-cleanup-grid,
    .traffic-react-cleanup-grid {
        grid-template-columns: 1fr;
    }
}