:root{
  --sidebar-w: 196px;
  --brand: #6C5CE7;
  --brand-dark: #4834d4;
  --bg: #f4f5fb;
  --grad-1: #6C5CE7;
  --grad-2: #a55eea;
  --grad-3: #fd79a8;
  --grad-4: #00cec9;
  --grad-warm-1: #ff9a56;
  --grad-warm-2: #ff6b6b;
}
*{box-sizing:border-box}
body{background:var(--bg); font-family: 'Segoe UI', Roboto, Arial, sans-serif; margin:0;}

/* Colorful background used on auth / landing pages */
.page-colorful-bg{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(108,92,231,.25), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(253,121,168,.25), transparent 45%),
    radial-gradient(circle at 30% 90%, rgba(0,206,201,.22), transparent 45%),
    linear-gradient(180deg, #f4f5fb, #eef0fb);
}

.btn-gradient{
  background:linear-gradient(135deg, var(--grad-1), var(--grad-2) 55%, var(--grad-3));
  border:none; color:#fff;
}
.btn-gradient:hover{color:#fff; filter:brightness(1.06);}

.navbar-colorful{
  background:linear-gradient(90deg, var(--grad-1), var(--grad-2));
}
.navbar-colorful .navbar-brand, .navbar-colorful a:not(.btn){color:#fff !important;}
.navbar-colorful .btn-outline-primary{background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.7) !important;}
.navbar-colorful .btn-outline-primary:hover{background:rgba(255,255,255,.15) !important;}

/* colorful stat cards on admin dashboard */
.stat-card{border-radius:16px; padding:18px; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.08);}
.stat-card .stat-num{font-size:1.5rem; font-weight:700;}
.stat-card .stat-label{opacity:.9; font-size:.78rem;}
.stat-card.c1{background:linear-gradient(135deg,#6C5CE7,#a55eea);}
.stat-card.c2{background:linear-gradient(135deg,#0984e3,#00cec9);}
.stat-card.c3{background:linear-gradient(135deg,#00b894,#55efc4);}
.stat-card.c4{background:linear-gradient(135deg,#fd9644,#fd79a8);}

/* colorful accent left-border for content cards */
.card-accent-purple{border-left:5px solid #6C5CE7 !important;}
.card-accent-blue{border-left:5px solid #0984e3 !important;}
.card-accent-green{border-left:5px solid #00b894 !important;}
.card-accent-pink{border-left:5px solid #fd79a8 !important;}

html, body{height:100%;}
body{overflow:hidden;}

.app-shell{display:flex; height:100vh;}

.app-sidebar{
  width:var(--sidebar-w); background:var(--sidebar-bg,#1b1b2f); color:var(--sidebar-text,#fff); position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column; transition:transform .25s ease; z-index:1050;
}

/* --- 1) BRAND: sticky di atas, tidak ikut scroll --- */
.sidebar-brand{
  flex-shrink:0; padding:16px 18px; font-weight:700; font-size:12.5px; display:flex; gap:8px; align-items:center;
  color:var(--sidebar-text,#fff);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.sidebar-brand i{color:var(--brand);}

/* --- 2) NAV: satu-satunya bagian sidebar yang scroll --- */
.sidebar-nav{flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 8px;}
.sidebar-link{
  display:flex; align-items:center; gap:10px; padding:5px 12px; border-radius:10px;
  color:var(--sidebar-text-muted,#c9c9e0); text-decoration:none; margin-bottom:1px; font-size:11.5px;
}
.sidebar-link i{width:20px; text-align:center;}
.sidebar-link:hover{background:rgba(0,0,0,.06); color:var(--sidebar-text,#fff);}
.sidebar-link.active{background:var(--sidebar-active-bg,var(--brand)); color:var(--sidebar-active-text,#fff);}

.sidebar-group{margin-top:6px; margin-bottom:1px;}
.sidebar-group-label{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:5px 14px; border-radius:10px; color:var(--sidebar-text-muted,#c7c7db); font-weight:600; font-size:9px;
  text-transform:uppercase; letter-spacing:.04em; user-select:none;
}
.sidebar-group-label::-webkit-details-marker{display:none;}
.sidebar-group-label:hover{background:rgba(0,0,0,.06); color:var(--sidebar-text,#fff);}
.sidebar-group[open] .sidebar-group-caret{transform:rotate(180deg);}
.sidebar-group-caret{transition:transform .15s ease; font-size:.75rem;}
.sidebar-sublink{padding-left:38px !important; font-size:11.5px;}

/* --- 3) FOOT: sticky di bawah, info user + Keluar selalu terlihat --- */
.sidebar-foot{
  flex-shrink:0; border-top:1px solid rgba(0,0,0,.08); padding:12px 14px;
}
.sidebar-foot-user{display:flex; align-items:center; gap:10px; padding:1px 0; margin-bottom:1px;}
.sidebar-foot-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--sidebar-active-bg,rgba(255,255,255,.12));
  color:var(--sidebar-active-text,#fff);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px;
}
.sidebar-foot-name{font-size:11.5px; font-weight:600; color:var(--sidebar-text,#fff); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sidebar-foot-role{font-size:10px; color:var(--sidebar-text-muted,#9a9ab5); line-height:1.3;}
.sidebar-foot-role .badge{font-size:9.5px; padding:.25em .5em;}
.sidebar-foot-links{display:flex; flex-direction:column; gap:0px; margin-bottom:1px;}
.sidebar-foot-links a{
  display:flex; align-items:center; gap:8px; padding:1px 8px; border-radius:8px;
  color:var(--sidebar-text-muted,#c9c9e0); text-decoration:none; font-size:11.5px;
}
.sidebar-foot-links a:hover{background:rgba(0,0,0,.06); color:var(--sidebar-text,#fff);}
.sidebar-foot-links a i{width:18px; text-align:center;}
.sidebar-foot-links a.sidebar-foot-logout{color:#e74c3c;}
.sidebar-foot-links a.sidebar-foot-logout:hover{background:rgba(231,76,60,.1); color:#c0392b;}
.sidebar-foot-meta{font-size:9.5px; color:var(--sidebar-text-muted,#7c7c96); opacity:.7; padding-top:8px; border-top:1px solid rgba(0,0,0,.08);}

.app-main{margin-left:var(--sidebar-w); flex:1 1 auto; display:flex; flex-direction:column; min-width:0; height:100vh;}

/* --- TOPBAR: sticky di atas, tidak ikut scroll --- */
.app-topbar{
  flex-shrink:0; height:60px; background:#fff; display:flex; align-items:center; gap:12px; padding:0 18px;
  box-shadow:0 1px 3px rgba(0,0,0,.06); z-index:900;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--brand), var(--brand-dark)) 1;
}
.btn-burger{display:none; border:none; background:none; font-size:1.4rem; cursor:pointer;}
.topbar-title{font-weight:600; flex:1;}
.topbar-user{display:flex; align-items:center; gap:8px; font-size:.9rem;}

/* --- CONTENT: scroll independen dari sidebar --- */
.app-content{flex:1 1 auto; min-height:0; overflow-y:auto; padding:22px; font-size:14px;}

.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040;}

@media (max-width: 991px){
  .app-sidebar{transform:translateX(-100%);}
  .app-sidebar.open{transform:translateX(0);}
  .app-main{margin-left:0;}
  .btn-burger{display:block;}
  .sidebar-overlay.show{display:block;}
}

/* Bootstrap primary button -> ikut warna tema aplikasi yang dipilih user */
.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  border:none !important;
}
.btn-primary:hover, .btn-primary:focus{filter:brightness(1.08);}
.btn-outline-primary{color:var(--brand); border-color:var(--brand);}
.btn-outline-primary:hover{background:linear-gradient(135deg, var(--brand), var(--brand-dark)); border-color:transparent; color:#fff;}

/* Toggle button group (mis. Slug Acak / Slug Manual) -> state aktif ikut tema juga */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  border-color:var(--brand) !important; color:#fff !important;
}

/* Card */
.card-soft{background:#fff; border:none; border-radius:16px; box-shadow:0 2px 10px rgba(20,20,50,.05);}

/* Public link-in-bio page */
.linkpage{min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:40px 16px; max-width:520px; margin:0 auto;}
.linkpage-avatar{width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 3px 12px rgba(0,0,0,.15);}
.linkpage-btn{
  display:block; width:100%; text-align:center; padding:14px 18px; margin-bottom:14px; border-radius:14px;
  background:#fff; color:#222; text-decoration:none; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .15s ease;
}
.linkpage-btn:hover{transform:translateY(-2px); color:#111;}

/* landing / marketing */
.hero{padding:80px 20px; text-align:center;}
.slug-check-ok{color:#198754;}
.slug-check-bad{color:#dc3545;}

/* About modal - colorful */
.about-modal-content{border-radius:22px; overflow:hidden;}
.about-modal-header{
  position:relative; padding:34px 20px 26px;
  background:linear-gradient(135deg, #6C5CE7 0%, #a55eea 45%, #fd79a8 100%);
}
.about-modal-icon{
  width:64px; height:64px; margin:0 auto; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  border:2px solid rgba(255,255,255,.4);
}
.about-info-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.about-info-icon{
  width:42px; height:42px; min-width:42px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:1.1rem;
}
.bg-icon-purple{background:linear-gradient(135deg,#6C5CE7,#a55eea);}
.bg-icon-blue{background:linear-gradient(135deg,#0984e3,#74b9ff);}

.about-contact-btn{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; margin-bottom:10px;
  text-decoration:none; color:#fff; font-size:1.4rem; transition:transform .15s ease;
}
.about-contact-btn > div{font-size:.95rem;}
.about-contact-btn:hover{transform:translateY(-2px); color:#fff;}
.about-contact-mail{background:linear-gradient(135deg,#0984e3,#00cec9);}
.about-contact-wa{background:linear-gradient(135deg,#00b894,#00cec9);}

/* ---------------------------- LINKTREE-STYLE "Links" DASHBOARD ---------------------------- */
.linktree-card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:14px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.linktree-card-row{display:flex; align-items:center; gap:12px;}
.linktree-card-row .drag-handle{cursor:grab; color:#bbb; font-size:1.1rem;}
.linktree-card-row .min-w-0{min-width:0;}
.linktree-card-toolbar{
  display:flex; align-items:center; gap:16px; margin-top:10px; padding-top:10px;
  border-top:1px solid #f2f2f2; color:#888; font-size:1.05rem;
}
.linktree-card-toolbar i{cursor:pointer;}
.linktree-card-toolbar i:hover{color:#6C5CE7;}
.linktree-card-clicks{font-size:.8rem; color:#888; display:flex; align-items:center; gap:4px; white-space:nowrap;}

.btn-toggle-switch{
  width:42px; height:24px; border-radius:999px; background:#d7d7e0; border:none; position:relative; padding:0; flex-shrink:0;
}
.btn-toggle-switch span{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff;
  transition:left .15s ease; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.btn-toggle-switch.on{background:#198754;}
.btn-toggle-switch.on span{left:20px;}

.linktree-preview-wrap{position:sticky; top:20px; text-align:center;}
.linktree-preview-frame{
  border:10px solid #1b1b2f; border-radius:36px; overflow:hidden; max-width:300px; margin:0 auto;
  aspect-ratio:9/19; box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.linktree-preview-frame iframe{width:100%; height:100%; border:0;}

.theme-swatch-label{cursor:pointer; display:block;}
.theme-swatch{
  width:100%; aspect-ratio:3/4; border-radius:14px; border:3px solid transparent; transition:border-color .15s ease;
}
.theme-swatch.selected{border-color:#6C5CE7;}

.design-row-list{background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eee;}
.design-row{
  display:flex; align-items:center; gap:14px; padding:16px 18px; text-decoration:none; color:#111;
  border-bottom:1px solid #f2f2f2; transition:background .1s ease;
}
.design-row:last-child{border-bottom:none;}
.design-row:hover{background:#faf9ff; color:#111;}
.design-row-icon{width:44px; height:44px; border-radius:12px; flex-shrink:0; overflow:hidden;}

/* ================================================================
 | KESAN 3D / TIMBUL (neumorphic-style) — berlaku global untuk
 | kartu, tombol, menu sidebar, input, dan komponen custom lainnya.
 ================================================================ */

/* Kartu: bayangan lebih tebal + highlight tipis di atas supaya terkesan timbul */
.card-soft, .linktree-card, .design-row-list, #addLinkCard{
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 22px rgba(20,20,60,.10),
    0 2px 4px rgba(20,20,60,.06);
  border:1px solid rgba(20,20,60,.04) !important;
}

.stat-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 10px 24px rgba(0,0,0,.16),
    0 3px 6px rgba(0,0,0,.10);
}

/* Tombol: efek timbul dengan "kaki" bayangan di bawah, dan turun saat ditekan */
.btn{
  box-shadow: 0 3px 0 rgba(0,0,0,.13), 0 6px 14px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .08s ease;
  border-width: 0;
}
.btn:active{
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.08);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-outline-warning{
  border-width: 1px; background:#fff;
}
.btn-link{ box-shadow:none; }
.btn-link:active{ transform:none; box-shadow:none; }

/* Toggle switch: alur cekung di trek, tombol bulat timbul */
.btn-toggle-switch{
  box-shadow: inset 0 2px 4px rgba(0,0,0,.18);
}
.btn-toggle-switch span{
  box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* Menu sidebar: item aktif terkesan "ditekan masuk", item biasa timbul tipis saat hover */
.sidebar-link, .sidebar-group-label{
  transition: box-shadow .1s ease, transform .1s ease;
}
.sidebar-link:hover, .sidebar-group-label:hover{
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.sidebar-link.active{
  box-shadow: inset 0 2px 5px rgba(0,0,0,.25);
}

/* Input & select: efek cekung (recessed) supaya kontras dengan tombol yang timbul */
.form-control, .form-select{
  box-shadow: inset 0 2px 4px rgba(20,20,60,.06);
  border-color: rgba(20,20,60,.10);
}
.form-control:focus, .form-select:focus{
  box-shadow: inset 0 2px 4px rgba(20,20,60,.08), 0 0 0 3px rgba(108,92,231,.15);
}

/* Swatch tema & ikon baris design: timbul juga */
.theme-swatch, .design-row-icon{
  box-shadow: 0 4px 10px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.5) inset;
}

/* Avatar bulat & preview frame HP: sedikit timbul */
.rounded-circle{
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.linktree-preview-frame{
  box-shadow: 0 16px 34px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.15) inset;
}

/* ---------------------------- Kartu pilihan Tema Aplikasi ---------------------------- */
.app-theme-card{cursor:pointer; border:2px solid transparent; border-radius:14px; padding:6px; transition:transform .1s ease, border-color .1s ease;}
.app-theme-card:hover{transform:translateY(-2px);}
.app-theme-card.selected{border-color:var(--brand);}
.app-theme-swatch{
  display:flex; border-radius:10px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 4px 10px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.4) inset;
}
.app-theme-swatch .swatch-main{flex:2;}
.app-theme-swatch .swatch-sidebar{flex:1;}

/* ================================================================
 | KESAN 3D DIPERKUAT — shadow berlapis untuk kartu stat, panel,
 | topbar, dan tombol; efek tertekan saat klik; kartu stat terangkat
 | saat hover.
 ================================================================ */
.stat-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 2px 0 rgba(0,0,0,.10),
    0 8px 10px rgba(0,0,0,.14),
    0 16px 28px rgba(0,0,0,.16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.stat-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 3px 0 rgba(0,0,0,.10),
    0 12px 16px rgba(0,0,0,.16),
    0 22px 36px rgba(0,0,0,.20);
}

.card-soft, .linktree-card, .design-row-list, #addLinkCard, .app-theme-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 0 rgba(20,20,60,.05),
    0 6px 10px rgba(20,20,60,.08),
    0 16px 30px rgba(20,20,60,.10) !important;
}

.app-topbar{
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 2px 4px rgba(0,0,0,.05),
    0 8px 16px rgba(0,0,0,.06) !important;
}

.btn{
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 2px 0 rgba(0,0,0,.10),
    0 5px 0 rgba(0,0,0,.13),
    0 8px 16px rgba(0,0,0,.10);
}
.btn:active{
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.10);
}

/* ---------------------------- Halaman Tema Aplikasi (pill swatches ala referensi) ---------------------------- */
.theme-group-label{font-size:.8rem; font-weight:700; letter-spacing:.05em; color:#8a8aa3; margin-bottom:10px;}
.theme-swatch-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px;}
.theme-pill-card{cursor:pointer; border:2px solid transparent; border-radius:14px; padding:4px; transition:transform .1s ease, border-color .1s ease;}
.theme-pill-card:hover{transform:translateY(-2px);}
.theme-pill-card.selected{border-color:var(--brand);}
.theme-pill-bar{
  position:relative; height:52px; border-radius:10px; overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.3) inset;
}
.theme-pill-accent{position:absolute; top:0; right:0; bottom:0; width:28%;}
.theme-pill-label{font-weight:600; font-size:.92rem; margin-top:8px; padding-left:2px;}

.theme-preview-box{background:#f4f5fb; border-radius:12px; padding:24px;}
.theme-preview-title{font-size:1.4rem; font-weight:700; margin-bottom:12px;}
.theme-preview-btn{display:inline-block; padding:10px 18px; border-radius:10px; color:#1b1b2f; font-weight:600;}