:root {
    --cdm-screen-height: 100dvh;
    --cdm-black: #090909;
    --cdm-white: #fff;
    --cdm-ink: #181818;
    --cdm-muted: #7a7a7a;
    --cdm-line: rgba(24,24,24,.12);
    --cdm-shadow: 0 28px 72px rgba(17,17,17,.20);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; user-select:none; -webkit-user-drag:none; }
button, input { font:inherit; }
.cdm-login-app { width:100%; height:var(--cdm-screen-height); overflow:hidden; }
body.is-preview { --cdm-screen-height: calc(100dvh - 42px); }
.cdm-preview-bar { height:42px; min-height:42px; padding:0 14px; background:#111111; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; gap:16px; font-size:10px; font-weight:800; white-space:nowrap; }
.cdm-preview-bar strong { color:#d4d4d4; }
.cdm-preview-bar a { text-decoration:underline; }
.cdm-template-preloader { position:fixed; inset:0; z-index:9999; overflow:hidden; background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.08),transparent 26%),linear-gradient(145deg,#050505,#151515); display:grid; place-items:center; transition:opacity .32s ease, visibility .32s ease; filter:none!important; }
.cdm-template-preloader::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at center,#000,transparent 72%); }
.cdm-template-preloader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.cdm-template-preloader-card { position:relative; z-index:1; width:min(310px,calc(100vw - 36px)); padding:26px 24px; border:1px solid rgba(255,255,255,.11); border-radius:24px; background:rgba(255,255,255,.055); box-shadow:0 30px 90px rgba(0,0,0,.44); backdrop-filter:blur(16px); display:grid; justify-items:center; gap:8px; color:#fff; text-align:center; }
.cdm-template-preloader-ring { width:92px; height:92px; margin-bottom:5px; border:2px solid rgba(255,255,255,.10); border-top-color:#ffffff; border-right-color:#ffffff; border-radius:50%; display:grid; place-items:center; animation:cdmPreloaderSpin 1.15s linear infinite; }
.cdm-template-preloader-icon { width:70px; height:70px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:#fff; box-shadow:0 15px 38px rgba(0,0,0,.38); animation:cdmPreloaderCounterSpin 1.15s linear infinite; }
.cdm-template-preloader-icon img { width:100%; height:100%; object-fit:cover; filter:none!important; }
.cdm-template-preloader-kicker { margin-top:4px; color:#d2d2d2; font-size:8.5px; font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
.cdm-template-preloader-card strong { font-size:14px; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.cdm-template-preloader-card small { color:rgba(255,255,255,.62); font-size:10px; }
.cdm-template-preloader-progress { width:132px; height:3px; margin-top:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.11); }
.cdm-template-preloader-progress i { display:block; width:46%; height:100%; border-radius:inherit; background:#ffffff; animation:cdmPreloaderProgress 1.05s ease-in-out infinite; }
@keyframes cdmPreloaderSpin { to{transform:rotate(360deg)} }
@keyframes cdmPreloaderCounterSpin { to{transform:rotate(-360deg)} }
@keyframes cdmPreloaderProgress { 0%{transform:translateX(-120%)} 100%{transform:translateX(260%)} }
.cdm-alert { margin:0 0 12px; padding:10px 12px; border:1px solid rgba(0,0,0,.18); border-radius:11px; background:#f1f1f1; color:#111111; display:flex; align-items:flex-start; gap:8px; font-size:11px; line-height:1.45; font-weight:750; }
.cdm-alert-icon { width:16px; min-width:16px; margin-top:1px; display:inline-flex; }
.cdm-alert svg { width:16px; height:16px; }
.cdm-reference-form { display:grid; gap:11px; }
.cdm-reference-field { display:grid; gap:6px; }
.cdm-reference-field label { color:var(--cdm-ink); font-size:11px; font-weight:820; }
.cdm-reference-control { min-height:48px; border:1px solid var(--cdm-line); border-radius:11px; background:#fbfbfb; display:flex; align-items:center; transition:border-color .18s,box-shadow .18s,background .18s; }
.cdm-reference-control:focus-within { background:#fff; border-color:#2a2a2a; box-shadow:0 0 0 3px rgba(42,42,42,.08); }
.cdm-reference-control > span { width:44px; min-width:44px; color:#8f8f8f; display:grid; place-items:center; }
.cdm-reference-control svg { width:17px; height:17px; }
.cdm-reference-control input { width:100%; min-width:0; min-height:46px; padding:0 8px 0 0; border:0; outline:0; background:transparent; color:#181818; font-size:13px; font-weight:650; }
.cdm-reference-control input::placeholder { color:#a6a6a6; }
.cdm-reference-eye { width:38px; height:38px; min-width:38px; margin-right:5px; border:0; border-radius:9px; background:transparent; color:#7f7f7f; display:grid; place-items:center; cursor:pointer; }
.cdm-reference-eye:hover { background:rgba(0,0,0,.05); color:#111; }
.cdm-reference-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10.5px; }
.cdm-reference-meta label { color:#6f6f6f; display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.cdm-reference-meta input { width:16px; height:16px; margin:0; accent-color:#171717; }
.cdm-reference-meta a { color:#242424; font-weight:780; white-space:nowrap; }
.cdm-reference-submit { width:100%; min-height:48px; border:0; border-radius:11px; background:#1a1a1a; color:#fff; box-shadow:0 12px 28px rgba(22,22,22,.18); display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:12px; font-weight:900; cursor:pointer; transition:transform .16s,box-shadow .16s; }
.cdm-reference-submit:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 17px 34px rgba(22,22,22,.24); }
.cdm-reference-submit svg { width:17px; height:17px; }
.cdm-reference-submit:disabled { opacity:.65; cursor:wait; }
.cdm-reference-separator { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; color:#a0a0a0; font-size:9px; font-weight:800; }
.cdm-reference-separator::before,.cdm-reference-separator::after { content:""; height:1px; background:rgba(24,24,24,.10); }
.cdm-reference-access { min-height:44px; padding:10px 12px; border:1px solid var(--cdm-line); border-radius:11px; background:#fff; display:flex; align-items:center; justify-content:center; gap:5px; font-size:10.5px; }
.cdm-reference-access span { color:#828282; }
.cdm-reference-access strong { color:#1d1d1d; font-weight:900; }
@media (max-height:620px) {
    .cdm-reference-form { gap:8px; }
    .cdm-reference-control { min-height:43px; }
    .cdm-reference-control input { min-height:41px; }
    .cdm-reference-submit { min-height:43px; }
    .cdm-reference-access { min-height:38px; padding:7px 10px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* =========================================================
   CDMEDIA BLACK / WHITE LOGIN SYSTEM
   ========================================================= */
.cdm-login-app,
.cdm-template-preloader,
.cdm-preview-bar {
    filter: none !important;
}
.cdm-alert {
    border-color: rgba(0,0,0,.18);
    background: #f1f1f1;
    color: #111;
}
.cdm-reference-control:focus-within {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(66,66,66,.10);
}
.cdm-reference-meta input {
    accent-color: #111111;
}
.cdm-reference-submit {
    background: linear-gradient(135deg,#111 0%,#111 66%,#111111 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.20);
}
.cdm-reference-submit:hover {
    background: linear-gradient(135deg,#111111 0%,#111111 100%);
}
.cdm-reference-access strong,
.cdm-reference-meta a {
    color: #111111;
}