/* Link UMP — tema terang bersama (putih, biru logo UMP, aksen emas) */
:root {
    --ump-blue: #0d47a1;
    --ump-blue-bright: #1769e0;
    --ump-blue-soft: #eaf3ff;
    --ump-gold: #ffc20e;
    --ump-green: #2e9e44;
    --ump-ink: #0b2a5b;

    --ink: var(--ump-ink);
    --ink-dim: rgba(11, 42, 91, 0.72);
    --ink-faint: rgba(11, 42, 91, 0.5);
    --accent: var(--ump-blue-bright);
    --accent-soft: rgba(23, 105, 224, 0.14);
    --mint: var(--ump-blue-bright);
    --glass: #ffffff;
    --glass-strong: #f3f8ff;
    --glass-border: rgba(13, 71, 161, 0.12);
    --paper: #ffffff;
    --ink-soft: rgba(11, 42, 91, 0.7);
    --accent-dim: #eaf3ff;
}

html { background: #fff; }

body {
    font-family: 'Manrope', 'Segoe UI', sans-serif !important;
    color: var(--ump-ink) !important;
    background:
        radial-gradient(900px 500px at 12% -10%, #e3efff 0%, transparent 60%),
        radial-gradient(800px 500px at 100% 110%, #fff4cc 0%, transparent 55%),
        #ffffff !important;
}

body::before { display: none !important; }

/* ikon dekoratif melayang */
body::after {
    content: "\f0c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: fixed;
    left: 6%;
    bottom: 10%;
    font-size: 56px;
    color: rgba(23, 105, 224, 0.22);
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 0;
    animation: ump-float 6s ease-in-out infinite alternate;
}

@keyframes ump-float {
    from { transform: translateY(0) rotate(-12deg); }
    to { transform: translateY(-16px) rotate(-4deg); }
}

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

/* kartu */
.main-card, .stat-card, .links-table, .bento-item, .user-chip, .nav-link, .card,
.qr-content, .modal-content, .pagination a, .pagination span, .btn-back {
    background: #fff !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--ump-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 14px 40px rgba(13, 71, 161, 0.08);
}

.main-card, .card { box-shadow: 0 30px 70px rgba(13, 71, 161, 0.14) !important; }

.nav-link:hover, .btn-back:hover, .bento-item:hover, .pagination a:hover {
    background: var(--ump-blue-soft) !important;
}

.nav-link.accent, .pagination .current {
    background: linear-gradient(135deg, #3b8bff, var(--ump-blue)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* judul */
.header h1, h1 {
    font-family: 'Manrope', sans-serif !important;
    font-style: normal !important;
    font-weight: 800 !important;
    color: var(--ump-blue-bright) !important;
    letter-spacing: -0.02em;
}

.header h1 span { color: var(--ump-blue) !important; }
.header h1 i { color: var(--ump-gold) !important; }
.header p, p.sub { color: var(--ink-dim) !important; }

.eyebrow { color: var(--ump-blue) !important; }
.eyebrow::before, .eyebrow::after { background: var(--ump-gold) !important; opacity: 1 !important; height: 2px !important; }

/* input pill biru muda */
.url-input-group input,
.option-group input,
input[type="password"],
.input-group input {
    background: #f1f7ff !important;
    border: 1.5px solid #dcebff !important;
    color: var(--ump-ink) !important;
}

.url-input-group input::placeholder,
.option-group input::placeholder { color: #8db8f5 !important; }

.url-input-group input:focus,
.option-group input:focus,
input[type="password"]:focus,
.input-group input:focus {
    border-color: var(--ump-blue-bright) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(23, 105, 224, 0.15) !important;
}

.option-group input::-webkit-calendar-picker-indicator { filter: none !important; }

/* tombol */
.btn-primary, .btn, button, .btn-google + .x {
    font-family: 'Manrope', sans-serif;
}

.btn-primary, .btn, .btn-close, .container button[type="submit"] {
    background: linear-gradient(135deg, #3b8bff, var(--ump-blue)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 26px rgba(23, 105, 224, 0.35);
}

.btn-primary:hover, .btn:hover { filter: brightness(1.08); background: linear-gradient(135deg, #3b8bff, var(--ump-blue)) !important; }

.btn-action, .btn-icon {
    background: var(--ump-blue-soft) !important;
    color: var(--ump-blue) !important;
    border: 1px solid #cfe3ff !important;
}

.btn-action:hover, .btn-icon:hover { background: #dcebff !important; }

.btn-google {
    background: #fff !important;
    border: 1px solid var(--glass-border);
    color: #1a1a1a !important;
    box-shadow: 0 10px 28px rgba(13, 71, 161, 0.15) !important;
}

.toggle-advanced, .stats-link a, .back, .link a, a { color: var(--ump-blue-bright); }
.stats-link a:hover { color: var(--ump-blue); }
.advanced-options { border-top-color: #e3eefc !important; }
.option-group label, .info-item, .hint, .detail-label, .bento-item p { color: var(--ink-faint) !important; }
.info-item i, .bento-item i { color: var(--ump-blue-bright) !important; }
.bento-item:nth-child(3) i { color: var(--ump-gold) !important; }
.bento-item:nth-child(2) i { color: var(--ump-green) !important; }

/* hasil */
.result-card.success { background: #f1fbf4 !important; border: 1px solid #bfe8cb !important; }
.result-card.error { background: #fff8e1 !important; border: 1px solid #ffe08a !important; }
.success .result-title { color: var(--ump-green) !important; }
.error .result-title { color: #b27c00 !important; }
.shortlink-display { background: #fff !important; border: 1px solid var(--glass-border); }
.shortlink-url { color: var(--ump-blue) !important; font-family: 'Manrope', sans-serif !important; }
.login-nudge { background: #eaf3ff !important; color: var(--ump-ink) !important; border-color: #cfe3ff !important; }
.login-nudge a { color: var(--ump-blue) !important; }

.avatar-fallback { color: #fff !important; background: linear-gradient(135deg, #3b8bff, var(--ump-blue)) !important; }

/* modal & toast */
.qr-modal, .modal { background: rgba(11, 42, 91, 0.45) !important; }
.toast { background: var(--ump-blue) !important; color: #fff !important; }

/* statistik */
.stat-card h3 { color: var(--ink-faint) !important; }
.stat-card .number { color: var(--ump-blue) !important; font-family: 'Manrope', sans-serif !important; font-weight: 800; }
.stat-card:nth-child(2) .number { color: var(--ump-green) !important; }
.stat-card:nth-child(4) .number { color: #d99a00 !important; }

th, td { border-bottom: 1px solid #e8f0fb !important; color: var(--ump-ink); }
th { background: #f1f7ff !important; color: var(--ump-blue) !important; }
tr:hover { background: #f8fbff !important; }

.short-code { background: var(--ump-blue-soft) !important; color: var(--ump-blue) !important; }
.url-cell { color: var(--ink-dim) !important; }
.clicks { color: var(--ump-blue) !important; }

.badge-active { background: #e4f6e9 !important; color: #1e7a33 !important; }
.badge-expired { background: #ffecec !important; color: #c0392b !important; }
.badge-inactive { background: #fff4cc !important; color: #a37300 !important; }
.badge-maxed { background: #efe9ff !important; color: #6b46c1 !important; }

.detail-row { border-bottom-color: #e8f0fb !important; }
.detail-value { color: var(--ump-ink) !important; }
.detail-value a { color: var(--ump-blue-bright) !important; }
.empty-state, .empty-state h2 { color: var(--ink-dim) !important; font-family: 'Manrope', sans-serif !important; }
.empty-state i { color: #b9d4fb !important; }
.btn-close:hover { filter: brightness(1.08); }
.modal-header .btn-close { background: none !important; box-shadow: none !important; color: var(--ink-dim) !important; }

/* login / register / redirect */
.mark, .lock-icon { background: linear-gradient(135deg, #3b8bff, var(--ump-blue)) !important; color: #fff !important; box-shadow: 0 12px 30px rgba(23, 105, 224, 0.35) !important; }
.foot-note, .back { color: var(--ink-faint) !important; }
.error-box, .error { background: #fff4f4 !important; border: 1px solid #ffd2d2 !important; color: #c0392b !important; }
.success { background: #f1fbf4; color: #1e7a33; }
.container .icon { color: var(--ump-blue-bright) !important; }
body > .container h2, body > .container p { color: var(--ump-ink); }

@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* edit link */
.btn-del { color: #c0392b !important; background: #fff1f0 !important; border-color: #ffd6d2 !important; }
.btn-del:hover { background: #ffe0dc !important; }
.edit-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.edit-field label, .check { font-size: 12.5px; font-weight: 700; color: var(--ink-dim); }
.edit-field small { font-size: 11.5px; color: var(--ink-faint); }
.edit-field input[type="text"], .edit-field input[type="url"], .edit-field input[type="password"],
.edit-field input[type="datetime-local"], .edit-field input[type="number"] {
    padding: 12px 14px; background: #f1f7ff; border: 1.5px solid #dcebff; border-radius: 12px;
    font: 500 14px 'Manrope', sans-serif; color: var(--ump-ink); width: 100%;
}
.edit-field input:focus { outline: none; border-color: var(--ump-blue-bright); box-shadow: 0 0 0 4px rgba(23,105,224,.15); }
.code-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-faint); font-weight: 700; }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.edit-error { color: #c0392b; font-size: 13px; font-weight: 700; min-height: 18px; margin-bottom: 10px; }
.btn-save {
    width: 100%; padding: 14px; border: none; border-radius: 14px; cursor: pointer; color: #fff;
    font: 800 15px 'Manrope', sans-serif; background: linear-gradient(135deg, #3b8bff, var(--ump-blue));
    box-shadow: 0 10px 26px rgba(23,105,224,.35);
}

/* panel statistik */
.panel, .kpi { background: #fff; border: 1px solid var(--glass-border); box-shadow: 0 14px 40px rgba(13, 71, 161, 0.08); }
.btn-chart, .btn-share { text-decoration: none; display: inline-flex; align-items: center; }
.btn-share { color: #2e9e44 !important; background: #effaf2 !important; border-color: #cdeed7 !important; }

/* modal ubah link */
.edit-modal { max-width: 540px !important; padding: 0 !important; overflow: hidden; border-radius: 28px !important; animation: editIn .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 40px 90px rgba(13,71,161,.3) !important; }
@keyframes editIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.edit-head { display: flex; align-items: center; gap: 14px; padding: 24px 26px; background: linear-gradient(135deg, #1769e0, #0d47a1); color: #fff; position: relative; overflow: hidden; }
.edit-head::after { content: ''; position: absolute; right: -30px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,194,14,.4); }
.edit-head > * { position: relative; z-index: 1; }
.edit-icon { width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.edit-head h3 { font: 800 19px 'Manrope', sans-serif !important; color: #fff; }
.edit-head p { font-size: 13px; opacity: .8; font-weight: 600; }
.edit-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.2); color: #fff; font-size: 20px; cursor: pointer; }
.edit-x:hover { background: rgba(255,255,255,.35); }
#editForm { padding: 22px 26px 26px; max-height: 70vh; overflow-y: auto; }
.edit-section { background: #f8fbff; border: 1px solid #e3eefc; border-radius: 20px; padding: 18px; margin-bottom: 14px; }
.edit-section .edit-field:last-child { margin-bottom: 0; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .edit-grid { grid-template-columns: 1fr; } }
.edit-field label { display: flex; align-items: center; gap: 7px; }
.edit-field label i { color: var(--ump-blue-bright); width: 15px; }
.code-row { background: #fff; border: 1.5px solid #dcebff; border-radius: 12px; padding-left: 14px; }
.code-row input { border: none !important; background: none !important; box-shadow: none !important; padding-left: 0 !important; color: var(--ump-blue) !important; font-weight: 800 !important; }
.code-row:focus-within { border-color: var(--ump-blue-bright); box-shadow: 0 0 0 4px rgba(23,105,224,.15); }
.edit-field input[type="text"], .edit-field input[type="url"], .edit-field input[type="password"],
.edit-field input[type="datetime-local"], .edit-field input[type="number"] { background: #fff; }
.switch-row { display: flex !important; align-items: center; justify-content: space-between !important; gap: 12px; cursor: pointer; margin-top: 4px; font-size: 13px; }
.switch-card { background: #f8fbff; border: 1px solid #e3eefc; border-radius: 18px; padding: 14px 18px; margin-bottom: 14px; }
.switch-card span b { display: block; font-size: 14px; color: var(--ump-ink); }
.switch-card span small { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
input.switch { appearance: none; -webkit-appearance: none; width: 44px !important; height: 26px; border-radius: 100px; background: #cfdcee; position: relative; cursor: pointer; transition: background .25s; flex-shrink: 0; padding: 0 !important; border: none !important; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .25s; }
input.switch:checked { background: linear-gradient(135deg, #3b8bff, #0d47a1); }
input.switch:checked::after { transform: translateX(18px); }
.edit-actions { display: flex; gap: 10px; }
.btn-cancel { flex: 0 0 auto; padding: 14px 22px; border-radius: 14px; border: 1.5px solid #dcebff; background: #fff; color: var(--ump-blue); font: 800 14.5px 'Manrope', sans-serif; cursor: pointer; }
.btn-cancel:hover { background: var(--ump-blue-soft); }
.edit-actions .btn-save { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-save:hover { filter: brightness(1.08); }