@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* AZhai NAV User Light UI */
:root {
    --azhai-pink: #e98ca8;
    --azhai-pink-soft: #fff1f5;
    --azhai-bg: #f8f8f9;
    --azhai-text: #29272b;
    --azhai-muted: #858189;
    --azhai-line: #ebe9ec;
}
html,body { background: #f8f8f9 !important; color: var(--azhai-text) !important; }
body { background: #f8f8f9 !important; }
.user-shell,.user-main,.user-content,.user-card,.profile-card,.settings-card,.site-card,.panel,.card {
    background: #fff !important;
    border-color: var(--azhai-line) !important;
}
.user-card,.profile-card,.settings-card,.site-card,.panel,.card { box-shadow: 0 10px 30px rgba(42,35,40,.055) !important; }
.user-sidebar,.user-nav,.sidebar {
    background: #fff !important;
    border-color: var(--azhai-line) !important;
    box-shadow: 4px 0 20px rgba(42,35,40,.035) !important;
}
.user-nav a.active,.user-sidebar a.active {
    background: var(--azhai-pink-soft) !important;
    color: #b9637d !important;
}
button,.button,.btn,.primary,.submit-button { background: var(--azhai-pink) !important; color: #fff !important; border-radius: 10px !important; box-shadow: 0 7px 18px rgba(233,140,168,.16) !important; }
input,select,textarea { background: #fff !important; border-color: #e5e2e5 !important; border-radius: 10px !important; }
input:focus,select:focus,textarea:focus { border-color: #efb5c5 !important; box-shadow: 0 0 0 4px rgba(233,140,168,.08) !important; outline: none !important; }
a:hover { color: #b9637d; }


/* Unified account-facing pages with the AZhai NAV admin visual language */
:root { --azhai-pink-deep:#b95c7a; --azhai-pink-line:#f0dce4; --azhai-card-shadow:0 8px 24px rgba(69,42,54,.045); }
.user-header { background:rgba(255,255,255,.94) !important; border-bottom-color:#eee4e9 !important; box-shadow:0 4px 18px rgba(69,42,54,.025); }
.brand-mark { background:linear-gradient(145deg,#e98ca8,#d97896) !important; color:#fff !important; border-radius:12px !important; box-shadow:0 5px 12px rgba(217,120,150,.18); }
.brand strong { color:#302a30; letter-spacing:-.2px; }
.brand span { color:#9a8d95 !important; }
.header-right { color:#8b7d86 !important; }
.header-right a { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 11px; border:1px solid #eee4e9; border-radius:9px; background:#fff; color:#746671; transition:all .16s ease; }
.header-right a:hover { border-color:#e7b4c4; background:#fff4f7; color:#b95c7a !important; }
.user-container,.form-container { padding-top:42px !important; }
.welcome { padding:25px 28px; border:1px solid #f0dce4; border-radius:19px; background:linear-gradient(120deg,#fff 0%,#fff7fa 100%); box-shadow:var(--azhai-card-shadow); }
.kicker { color:#c27691 !important; letter-spacing:1.8px; }
.welcome h1,.page-title h1 { color:#302a30; font-weight:780; letter-spacing:-.8px; }
.welcome p,.page-title p { color:#948791 !important; line-height:1.7; }
.stats { gap:14px !important; }
.stats > * { border-color:#eee4e9 !important; border-radius:16px !important; box-shadow:var(--azhai-card-shadow); transition:transform .16s ease,border-color .16s ease; }
.stats > a:hover { transform:translateY(-2px); border-color:#e7b4c4 !important; }
.stats strong { color:#302a30; font-weight:780; }
.stats span { color:#988b94 !important; }
.user-grid { gap:14px !important; }
.user-grid .user-card { min-height:190px; padding:23px !important; border-color:#eee4e9 !important; border-radius:17px !important; box-shadow:var(--azhai-card-shadow); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.user-grid .user-card:hover { transform:translateY(-3px); border-color:#e7b4c4 !important; box-shadow:0 13px 28px rgba(69,42,54,.07) !important; }
.user-grid .user-card.primary { background:linear-gradient(135deg,#fff0f4,#ffe7ee) !important; border-color:#f0d2dd !important; color:#704256 !important; }
.user-grid .user-card.primary p { color:#987383 !important; }
.card-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:20px !important; border:1px solid #f0dce4; border-radius:14px; background:#fff1f5; color:#bd6c88; font-size:19px !important; }
.user-card h2 { color:#352d33; font-size:15px !important; font-weight:750; }
.user-card p { color:#988b94 !important; font-size:12px !important; line-height:1.8 !important; }
.button,.button.secondary,.header-add,.danger-button { min-height:39px; padding:0 15px !important; border-radius:10px !important; font-weight:700 !important; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.button,.header-add { background:#d97896 !important; color:#fff !important; }
.button:hover,.header-add:hover { background:#b95c7a !important; color:#fff !important; }
.button.secondary { border:1px solid #e9e1e6 !important; background:#f8f4f6 !important; color:#756771 !important; }
.button.secondary:hover { background:#fff1f5 !important; color:#a94e70 !important; }
.user-form,.danger-box,.empty,.my-site { border-color:#eee4e9 !important; border-radius:16px !important; box-shadow:var(--azhai-card-shadow); }
.user-form label { color:#5c4f57; }
.user-form input:focus,.user-form select:focus,.user-form textarea:focus { border-color:#dfa0b4 !important; }
.my-site-icon { background:#fff1f5 !important; color:#b95c7a; border-radius:12px !important; }
.my-site { transition:border-color .16s ease,transform .16s ease; }
.my-site:hover { border-color:#e7b4c4 !important; }
.my-site-actions a { border:1px solid #eee4e9; border-radius:9px !important; background:#faf7f9 !important; color:#756771; }
.my-site-actions a:hover { background:#fff1f5 !important; color:#a94e70 !important; }
.my-site-actions .danger { color:#bd6464 !important; }
.error { border:1px solid #f2d8d8; border-radius:10px !important; background:#fff6f6 !important; }
.success { border:1px solid #d8efe1; border-radius:10px !important; background:#f1faf4 !important; }
@media(max-width:700px) { .user-container,.form-container { padding-top:24px !important; } .welcome { padding:20px 17px; border-radius:16px; } .user-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } .user-grid .user-card { min-height:160px; padding:17px !important; } .card-icon { width:38px; height:38px; margin-bottom:15px !important; } .user-card h2 { font-size:13px !important; } .user-card p { font-size:11px !important; } }
@media(max-width:420px) { .user-grid { grid-template-columns:1fr !important; } .user-grid .user-card { min-height:0; } }


/* Favorites page refresh: align with AZhai NAV account pages */
.favorites-page { --fav-pink:#d97896; --fav-deep:#b95c7a; --fav-soft:#fff1f5; --fav-line:#f0dfe6; --fav-muted:#93858e; background:#f8f8fa !important; }
.favorites-header { position:sticky; top:0; z-index:5; height:68px; padding:0 max(22px,calc((100% - 1080px)/2)); gap:18px; }
.favorites-header > strong { margin-left:auto; margin-right:auto; color:#3b3037; font-size:14px; }
.favorites-header .favorites-back { display:inline-flex; align-items:center; gap:8px; color:#796b74; white-space:nowrap; }
.favorites-back span { display:grid; place-items:center; width:27px; height:27px; border:1px solid var(--fav-line); border-radius:9px; color:var(--fav-deep); font-size:23px; line-height:1; }
.favorites-header .favorites-browse { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--fav-line); border-radius:10px; background:#fff; color:var(--fav-deep); font-weight:700; white-space:nowrap; }
.favorites-header .favorites-browse:hover { background:var(--fav-soft); border-color:#e9bdcc; }
.favorites-container { width:min(1080px,calc(100% - 36px)); padding-top:36px !important; }
.favorites-hero { position:relative; display:flex; align-items:center; gap:24px; min-height:205px; margin-bottom:32px; padding:30px 32px; overflow:hidden; border:1px solid #f0dce4; border-radius:22px; background:linear-gradient(112deg,#fff 0%,#fff7fa 64%,#ffedf3 100%); box-shadow:0 10px 28px rgba(69,42,54,.045); }
.favorites-hero-copy { position:relative; z-index:1; flex:1; min-width:0; }
.favorites-kicker { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:#c27691; font-size:10px; font-weight:850; letter-spacing:1.7px; }
.favorites-kicker i { font-size:13px; }
.favorites-hero h1 { color:#342a31; font-size:clamp(28px,4vw,36px); font-weight:820; letter-spacing:-1.2px; }
.favorites-title-dot { color:#dc8ca5; }
.favorites-hero p { max-width:460px; margin:11px 0 0; color:#93838d; font-size:13px; line-height:1.8; }
.favorites-hero-mark { display:grid; place-items:center; width:104px; height:104px; flex-shrink:0; border:1px solid rgba(232,167,188,.42); border-radius:30px; background:rgba(255,255,255,.72); color:#d97896; font-size:42px; transform:rotate(5deg); }
.favorites-total { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:130px; padding-left:24px; border-left:1px solid #efdce3; }
.favorites-total span,.favorites-total small { color:#9c8b95; font-size:11px; }
.favorites-total strong { margin:5px 0 0; color:#4a3540; font-size:34px; line-height:1.2; font-weight:820; letter-spacing:-1px; }
.favorites-section { min-width:0; }
.favorites-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
.favorites-section-head h2 { margin:0; color:#382f35; font-size:18px; font-weight:800; letter-spacing:-.3px; }
.favorites-section-head p { margin:6px 0 0; color:#9a8e96; font-size:12px; }
.favorites-count { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--fav-line); border-radius:999px; background:#fff; color:#a66a80; font-size:11px; font-weight:750; white-space:nowrap; }
.favorites-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.favorites-card { min-width:0; overflow:hidden; border:1px solid #eee4e9; border-radius:17px; background:#fff; box-shadow:0 8px 24px rgba(69,42,54,.035); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.favorites-card:hover { transform:translateY(-3px); border-color:#e8bac9; box-shadow:0 14px 30px rgba(69,42,54,.075); }
.favorites-card-main { display:flex; align-items:flex-start; gap:14px; min-width:0; padding:19px 19px 16px; color:inherit !important; }
.favorites-site-icon { display:grid; place-items:center; flex:0 0 50px; width:50px; height:50px; overflow:hidden; border:1px solid #f1e3e9; border-radius:15px; background:linear-gradient(145deg,#fff3f7,#ffedf3); }
.favorites-site-icon img { width:100%; height:100%; object-fit:contain; padding:7px; }
.favorites-site-fallback { display:grid; place-items:center; width:100%; height:100%; color:#b95c7a; font-size:20px; font-weight:850; }
.favorites-site-copy { min-width:0; flex:1; }
.favorites-site-copy h3 { overflow:hidden; margin:1px 0 6px; color:#3b3037; font-size:15px; font-weight:780; text-overflow:ellipsis; white-space:nowrap; }
.favorites-site-host { display:flex; align-items:center; gap:4px; overflow:hidden; margin:0; color:#b17b8f; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.favorites-site-description { display:-webkit-box; overflow:hidden; margin:9px 0 0; color:#92858d; font-size:11px; line-height:1.7; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.favorites-open-icon { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border:1px solid #f1e3e9; border-radius:9px; background:#fff9fb; color:#b96d87; font-size:13px; transition:all .16s ease; }
.favorites-card:hover .favorites-open-icon { border-color:#e6b4c4; background:#fff0f5; transform:translate(1px,-1px); }
.favorites-card-footer { display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 19px; border-top:1px solid #f5edf1; background:#fffdfd; }
.favorites-category { display:inline-flex; align-items:center; gap:6px; max-width:52%; overflow:hidden; color:#8e8089; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.favorites-status { display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:#988b93; font-size:10px; white-space:nowrap; }
.favorites-status > span { width:6px; height:6px; border-radius:50%; background:#aaa; }
.favorites-status.online { color:#448c68; }.favorites-status.online > span { background:#56b782; }
.favorites-status.offline { color:#c76e75; }.favorites-status.offline > span { background:#dc8589; }
.favorites-status.timeout { color:#ad8b46; }.favorites-status.timeout > span { background:#d7b45f; }
.favorites-star { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; margin-left:2px; border:1px solid #f0dce4; border-radius:9px; background:#fff1f5; color:#c76f8d; font-size:12px; }
.favorites-empty { display:flex; flex-direction:column; align-items:center; padding:56px 24px 60px; border:1px dashed #e8d5de; border-radius:20px; background:linear-gradient(145deg,#fff,#fff9fb); text-align:center; }
.favorites-empty-icon { display:grid; place-items:center; width:70px; height:70px; margin-bottom:17px; border:1px solid #f0dce4; border-radius:22px; background:#fff1f5; color:#c27691; font-size:28px; }
.favorites-empty h2 { margin:0; color:#3b3037; font-size:19px; font-weight:800; }
.favorites-empty p { max-width:380px; margin:10px 0 22px; color:#93858e; font-size:12px; line-height:1.8; }
.favorites-primary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 17px; border-radius:11px; background:#d97896; color:#fff !important; font-size:12px; font-weight:750; box-shadow:0 7px 17px rgba(217,120,150,.2); transition:background .16s ease,transform .16s ease; }
.favorites-primary-button:hover { background:#b95c7a; color:#fff !important; transform:translateY(-1px); }
@media(max-width:760px) { .favorites-header { height:62px; padding:0 16px; gap:10px; }.favorites-header > strong { font-size:13px; }.favorites-container { width:calc(100% - 28px); padding-top:22px !important; }.favorites-hero { min-height:0; gap:15px; margin-bottom:25px; padding:23px 20px; border-radius:18px; }.favorites-hero-mark { width:64px; height:64px; border-radius:20px; font-size:27px; }.favorites-total { min-width:85px; padding-left:14px; }.favorites-total strong { font-size:27px; }.favorites-hero p { font-size:12px; }.favorites-grid { gap:11px; }.favorites-card-main { gap:11px; padding:15px 14px 13px; }.favorites-site-icon { flex-basis:43px; width:43px; height:43px; border-radius:13px; }.favorites-card-footer { padding:9px 14px; } }
@media(max-width:540px) { .favorites-header .favorites-back { font-size:12px; gap:5px; }.favorites-back span { width:24px; height:24px; }.favorites-header .favorites-browse { padding:8px 9px; font-size:11px; }.favorites-hero { align-items:flex-start; flex-wrap:wrap; }.favorites-hero-copy { flex-basis:calc(100% - 82px); }.favorites-hero-mark { width:55px; height:55px; border-radius:17px; font-size:23px; }.favorites-total { flex-direction:row; align-items:baseline; gap:7px; min-width:0; margin-top:4px; padding:11px 0 0; border-left:0; border-top:1px solid #efdce3; width:100%; }.favorites-total strong { font-size:22px; }.favorites-total span,.favorites-total small { font-size:10px; }.favorites-grid { grid-template-columns:1fr; }.favorites-card-main { padding:16px; }.favorites-card-footer { padding:9px 16px; }.favorites-section-head h2 { font-size:16px; }.favorites-section-head p { font-size:11px; }.favorites-count { padding:7px 9px; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .favorites-card,.favorites-open-icon,.favorites-primary-button { transition:none !important; } }