:root{
    --bg:#f4f4f2;
    --bg-soft:#faf9f7;
    --panel:#ffffff;
    --panel-soft:#fcfcfb;
    --line:#ece9e5;
    --line-soft:#f2efeb;

    --text:#161616;
    --text-soft:#7a7a7a;
    --text-faint:#a3a3a3;

    --green-900:#0d4b40;
    --green-800:#126354;
    --green-700:#187663;
    --green-600:#209176;
    --green-500:#2fb58e;
    --green-400:#58caa7;

    --peach-500:#f1a56b;
    --peach-300:#f7c69f;

    --amber-500:#eda33d;
    --amber-300:#ffd49a;

    --violet-500:#8c7cff;
    --violet-300:#c0b7ff;

    --cyan-500:#74c7d8;
    --cyan-300:#b6eaf3;

    --shadow-sm:0 6px 16px rgba(24, 24, 24, 0.04);
    --shadow-md:0 12px 30px rgba(24, 24, 24, 0.06);
    --shadow-lg:0 22px 50px rgba(24, 24, 24, 0.08);

    --radius-xs:12px;
    --radius-sm:16px;
    --radius-md:22px;
    --radius-lg:30px;
}

*{
    box-sizing:border-box;
}

html, body{
    margin:0;
    padding:0;
    font-family:'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(116,199,216,.10), transparent 18%),
        radial-gradient(circle at bottom right, rgba(241,165,107,.10), transparent 18%),
        linear-gradient(180deg, #f5f4f1 0%, #f1f0ec 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    display:block;
    max-width:100%;
}

/* layout */
.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:270px 1fr;
}

.main-content{
    min-width:0;
}

.content-wrap{
    padding:22px;
}

/* sidebar */
.app-sidebar{
    position:sticky;
    top:0;
    min-height:100vh;
    padding:18px 14px;
    background:
        radial-gradient(circle at top right, rgba(88,202,167,.14), transparent 20%),
        linear-gradient(180deg, #0b453c 0%, #0f5d50 48%, #0d4c42 100%);
    color:#eefcf6;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
}

.sidebar-top{
    margin-bottom:18px;
}

.app-brand-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 10px 18px;
}

.brand-logo-wrap{
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px;
}

.brand-logo-img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.brand-title{
    font-size:16px;
    font-weight:800;
    line-height:1.1;
    color:#ffffff;
}

.brand-subtitle{
    margin-top:4px;
    font-size:12px;
    line-height:1.35;
    color:rgba(255,255,255,.72);
}

.app-sidebar-profile{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
}

.app-sidebar-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ecfff7;
    color:var(--green-800);
    font-weight:800;
    flex-shrink:0;
}

.sidebar-name{
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1.2;
}

.sidebar-email{
    margin-top:4px;
    color:rgba(255,255,255,.65);
    font-size:12px;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.nav-label{
    padding:14px 10px 8px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:rgba(255,255,255,.50);
}

.nav-item,
.nav-sub-item,
.nav-dropdown-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    border:none;
    background:transparent;
    text-align:left;
    padding:12px 14px;
    border-radius:16px;
    color:#f0fbf7;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:all .18s ease;
}

.nav-item:hover,
.nav-sub-item:hover,
.nav-dropdown-toggle:hover{
    background:rgba(255,255,255,.09);
}

.nav-item.active,
.nav-sub-item.active,
.nav-dropdown-toggle.active{
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.nav-arrow,
.nav-caret{
    color:rgba(255,255,255,.82);
    font-size:16px;
    flex-shrink:0;
}

.nav-submenu{
    display:none;
    padding-left:10px;
}

.nav-submenu.open{
    display:block;
}

.nav-sub-item{
    margin-top:4px;
    font-size:14px;
    font-weight:600;
    color:#eafaf4;
    background:rgba(255,255,255,.04);
}

/* topbar */
.app-topbar{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:16px 20px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(20,20,20,.05);
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.topbar-brand-block{
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar-mini-brand{
    width:40px;
    height:40px;
    border-radius:14px;
    background:#fff;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px;
    box-shadow:var(--shadow-sm);
}

.topbar-mini-logo{
    width:100%;
    height:100%;
    object-fit:contain;
}

.topbar-title{
    margin:0;
    font-size:21px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-0.02em;
}

.topbar-subtitle{
    margin-top:4px;
    color:var(--text-soft);
    font-size:12px;
    line-height:1.4;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.search-shell{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:340px;
    height:46px;
    padding:0 14px;
    border-radius:18px;
    background:rgba(255,255,255,.88);
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.search-shell input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    font-size:14px;
    color:var(--text);
    font-family:inherit;
}

.search-shell input::placeholder{
    color:#9a9a9a;
}

.search-icon{
    color:#8f8f8f;
    font-size:16px;
}

.app-icon-btn{
    width:46px;
    height:46px;
    border:none;
    border-radius:18px;
    background:rgba(255,255,255,.86);
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    cursor:pointer;
    transition:all .18s ease;
}

.app-icon-btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
}

.app-user-chip{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    border-radius:18px;
    background:rgba(255,255,255,.88);
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.app-avatar-circle{
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #effff8, #d8f6eb);
    color:var(--green-800);
    font-weight:800;
}

.user-chip-name{
    font-size:14px;
    font-weight:700;
    line-height:1.2;
}

.user-chip-role{
    margin-top:3px;
    font-size:12px;
    color:var(--text-soft);
}

/* hero */
.soft-hero{
    margin-bottom:18px;
    padding:24px 24px;
    border-radius:28px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 26%),
        radial-gradient(circle at bottom left, rgba(247,198,159,.18), transparent 20%),
        linear-gradient(135deg, #0d5648 0%, #14836d 55%, #50c7a5 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 20px 36px rgba(20, 90, 76, 0.18);
}

.hero-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    margin-bottom:14px;
}

.soft-hero h2{
    margin:0 0 10px;
    font-size:32px;
    line-height:1.08;
    letter-spacing:-0.03em;
    font-weight:800;
}

.soft-hero p{
    margin:0;
    max-width:720px;
    color:rgba(255,255,255,.92);
    font-size:16px;
    line-height:1.7;
}

/* panels/cards */
.panel-card,
.dashboard-panel,
.dashboard-stat-card{
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.70);
    box-shadow:var(--shadow-md);
    transition:all .18s ease;
}

.panel-card:hover,
.dashboard-panel:hover,
.dashboard-stat-card:hover{
    transform:translateY(-2px);
}

.panel-card{
    border-radius:28px;
    padding:18px;
}

.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.panel-head h3{
    margin:0;
    font-size:19px;
    font-weight:800;
    letter-spacing:-0.02em;
}

/* stats */
.dashboard-stats-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    margin-bottom:16px;
}

.dashboard-stat-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 18px;
    border-radius:24px;
}

.stat-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    flex-shrink:0;
}

.stat-teal .stat-icon{
    background:linear-gradient(135deg, var(--green-700), var(--green-500));
}

.stat-green .stat-icon{
    background:linear-gradient(135deg, #2d8f7f, #63cf9f);
}

.stat-amber .stat-icon{
    background:linear-gradient(135deg, var(--amber-500), var(--peach-500));
}

.stat-mint .stat-icon{
    background:linear-gradient(135deg, #2fb58e, #74c7d8);
}

.stat-label{
    color:var(--text-soft);
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
}

.stat-value{
    font-size:22px;
    font-weight:800;
    line-height:1;
}

/* dashboard grids */
.dashboard-grid-main{
    display:grid;
    grid-template-columns:1.55fr .95fr;
    gap:16px;
    margin-bottom:16px;
}

.wide-panel{
    min-width:0;
}

.side-panel{
    min-width:0;
}

.chart-panel canvas{
    width:100% !important;
    height:290px !important;
}

/* tables */
.table-wrap{
    width:100%;
    overflow-x:auto;
}

.table-modern{
    width:100%;
    min-width:680px;
    border-collapse:separate;
    border-spacing:0;
}

.table-modern thead th{
    text-align:left;
    padding:14px 14px;
    background:#f7f7f4;
    color:#7a7a7a;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    border-bottom:1px solid var(--line);
}

.table-modern tbody td{
    padding:16px 14px;
    font-size:14px;
    color:var(--text);
    border-bottom:1px solid var(--line-soft);
    background:rgba(255,255,255,.30);
}

.table-modern tbody tr:hover td{
    background:#fcfbf9;
}

/* badges */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.badge-success{
    background:#e9fbf2;
    color:#118257;
}

.badge-warning{
    background:#fff5e8;
    color:#ca7a14;
}

.badge-danger{
    background:#fff0ee;
    color:#cc4637;
}

.badge-secondary{
    background:#f2f2f1;
    color:#737373;
}

.badge-primary{
    background:#eef6ff;
    color:#466ccf;
}

/* action tiles */
.action-tile-list{
    display:grid;
    gap:12px;
}

.action-tile{
    display:block;
    padding:18px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.75);
    box-shadow:var(--shadow-sm);
    transition:all .18s ease;
}

.action-tile:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.action-tile strong{
    display:block;
    font-size:16px;
    font-weight:800;
    color:#1e1e1e;
    margin-bottom:6px;
}

.action-tile span{
    display:block;
    font-size:14px;
    line-height:1.6;
    color:#6f6f6f;
}

.action-tile-peach{
    background:linear-gradient(135deg, #fff6ef, #fffaf6);
}

.action-tile-green{
    background:linear-gradient(135deg, #effaf5, #f8fffc);
}

.action-tile-violet{
    background:linear-gradient(135deg, #f5f2ff, #fbf9ff);
}

.action-tile-cyan{
    background:linear-gradient(135deg, #eefbfd, #f9feff);
}

/* generic forms */
.form-group{
    width:100%;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700;
    color:#3d4650;
    letter-spacing:.01em;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    min-height:50px;
    padding:13px 14px;
    border-radius:16px;
    border:1px solid #dedbd7;
    background:rgba(255,255,255,.88);
    outline:none;
    font-size:14px;
    color:var(--text);
    font-family:inherit;
    transition:all .18s ease;
}

.form-group textarea{
    min-height:120px;
    padding-top:14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#78ceb1;
    box-shadow:0 0 0 4px rgba(47,181,142,.10);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#a1a1a1;
}

.form-grid-2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.full-span{
    grid-column:1 / -1;
}

/* buttons */
.btn,
.quick-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 16px;
    border:none;
    border-radius:16px;
    font-size:14px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    transition:all .18s ease;
}

.btn-primary{
    background:linear-gradient(135deg, var(--green-700), var(--green-500));
    color:#fff;
    box-shadow:0 12px 24px rgba(24,118,99,.18);
}

.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(24,118,99,.24);
}

.quick-btn{
    background:#f7faf8;
    color:var(--green-700);
    border:1px solid #dcebe4;
}

.quick-btn:hover{
    background:#eef8f4;
}

.btn-block{
    width:100%;
}

/* alerts */
.alert{
    border-radius:18px;
    padding:14px 16px;
    margin-bottom:16px;
    font-size:14px;
    font-weight:700;
}

.alert-danger{
    background:#fff1ef;
    color:#c94134;
}

.alert-success{
    background:#edf9f2;
    color:#16845b;
}

.alert-warning{
    background:#fff7ec;
    color:#c97a15;
}

.alert-secondary{
    background:#f5f5f4;
    color:#6d6d6d;
}

/* misc */
.section-stack{
    display:grid;
    gap:18px;
}

.page-intro{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.page-intro h2{
    margin:0 0 6px;
    font-size:28px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-0.03em;
}

.page-intro p{
    margin:0;
    color:var(--text-soft);
    line-height:1.7;
}

.summary-box{
    border-radius:22px;
    padding:16px;
    background:#fcfcfb;
    border:1px solid var(--line);
}

.summary-box span{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--text-faint);
    margin-bottom:8px;
    font-weight:800;
}

.summary-box strong{
    display:block;
    font-size:16px;
    line-height:1.4;
    color:var(--text);
}

.profile-summary-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.sticky-form-actions{
    position:sticky;
    bottom:14px;
    z-index:15;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:14px;
    border-radius:20px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px);
    border:1px solid var(--line);
    box-shadow:var(--shadow-md);
}

.empty-state-box{
    border:2px dashed #e5e2dd;
    background:#fbfaf8;
    border-radius:22px;
    padding:30px 20px;
    text-align:center;
    color:var(--text-soft);
}

.empty-state-box h4{
    margin:0 0 8px;
    color:var(--text);
    font-size:20px;
    font-weight:800;
}

.empty-state-box p{
    margin:0 0 16px;
}

/* map */
#alumniMap{
    width:100%;
    height:520px;
    border-radius:22px;
}

/* alumni card */
.card-preview{
    max-width:560px;
    padding:24px;
    border-radius:28px;
    color:#fff;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg, #0d4b40 0%, #1a7e68 58%, #5ecdad 100%);
    box-shadow:0 24px 44px rgba(16, 92, 76, 0.22);
}

.card-brand{
    font-size:13px;
    letter-spacing:.20em;
    font-weight:800;
    opacity:.95;
}

.card-name{
    margin-top:26px;
    font-size:30px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-0.02em;
}

.card-meta{
    margin-top:16px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.card-meta div{
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.08);
}

.card-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.82;
}

.card-value{
    margin-top:6px;
    font-size:15px;
    font-weight:700;
}

/* payments */
.payment-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:16px;
}

.payment-box{
    padding:20px;
    border-radius:26px;
}

.payment-option{
    padding:16px;
    border-radius:18px;
    border:1px solid var(--line);
    background:#fcfcfb;
    margin-bottom:12px;
}

.payment-option strong{
    display:block;
    margin-bottom:6px;
    font-size:15px;
    font-weight:800;
}

.payment-status-card{
    background:
        linear-gradient(135deg, #fff6ee, #f7fff9);
}

/* directory cards */
.directory-card-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.directory-card-premium{
    padding:18px;
    border-radius:24px;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:var(--shadow-md);
    transition:all .18s ease;
}

.directory-card-premium:hover{
    transform:translateY(-2px);
}

.directory-card-top{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:16px;
}

.directory-avatar-premium{
    width:54px;
    height:54px;
    border-radius:18px;
    background:linear-gradient(135deg, var(--green-700), var(--green-500));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:20px;
    flex-shrink:0;
}

.directory-card-top h4{
    margin:0 0 4px;
    font-size:18px;
    font-weight:800;
    line-height:1.2;
}

.directory-card-top p{
    margin:0;
    font-size:14px;
    color:var(--text-soft);
}

.directory-card-body{
    display:grid;
    gap:10px;
}

.directory-card-body div{
    padding:12px 14px;
    border-radius:14px;
    background:#fafaf8;
    border:1px solid var(--line);
}

.directory-card-body span{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-faint);
    margin-bottom:6px;
    font-weight:800;
}

.directory-card-body strong{
    display:block;
    font-size:14px;
    line-height:1.45;
    color:var(--text);
}

.directory-card-foot{
    margin-top:14px;
}

/* animation */
@keyframes fadeLift{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.hero-panel,
.dashboard-stat-card,
.dashboard-panel,
.directory-card-premium,
.panel-card{
    animation:fadeLift .28s ease both;
}

/* responsive */
@media (max-width:1200px){
    .dashboard-stats-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .dashboard-grid-main{
        grid-template-columns:1fr;
    }

    .profile-summary-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:1100px){
    .search-shell{
        min-width:260px;
    }

    .directory-card-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

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

    .app-sidebar{
        position:fixed;
        left:-290px;
        top:0;
        width:270px;
        z-index:999;
        height:100vh;
        overflow-y:auto;
        transition:.25s ease;
    }

    .app-sidebar.open{
        left:0;
    }

    .app-topbar{
        padding:14px 16px;
        flex-direction:column;
        align-items:stretch;
    }

    .topbar-right{
        justify-content:space-between;
        flex-wrap:wrap;
    }

    .content-wrap{
        padding:16px;
    }
}

@media (max-width:768px){
    .search-shell{
        min-width:100%;
        width:100%;
    }

    .dashboard-stats-grid,
    .profile-summary-grid,
    .payment-grid,
    .directory-card-grid,
    .form-grid-2{
        grid-template-columns:1fr;
    }

    .topbar-right{
        flex-direction:column;
        align-items:stretch;
    }

    .app-user-chip{
        width:100%;
    }

    .soft-hero{
        padding:22px 20px;
    }

    .soft-hero h2{
        font-size:26px;
    }

    .topbar-title{
        font-size:18px;
    }

    .sticky-form-actions{
        flex-direction:column;
    }

    .sticky-form-actions .btn,
    .sticky-form-actions .quick-btn{
        width:100%;
    }

    .card-meta{
        grid-template-columns:1fr;
    }

    #alumniMap{
        height:380px;
    }

    .table-modern{
        min-width:680px;
    }
}

/* icon system */
.ui-icon{
    width:18px;
    height:18px;
    display:block;
    flex-shrink:0;
}

.ui-icon-sm{
    width:16px;
    height:16px;
}

.stat-svg{
    width:24px;
    height:24px;
    display:block;
    color:#ffffff;
}

.search-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8f8f8f;
}

.nav-arrow-icon,
.nav-caret-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.86);
    flex-shrink:0;
}

.app-icon-btn svg,
.nav-caret-icon svg,
.nav-arrow-icon svg{
    pointer-events:none;
}

/* =========================
   AUTH PAGE
========================= */

body.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:
        radial-gradient(circle at top left, rgba(116,199,216,.12), transparent 20%),
        radial-gradient(circle at bottom right, rgba(241,165,107,.14), transparent 20%),
        linear-gradient(180deg, #f6f4f1 0%, #f0efeb 100%);
}

.auth-shell{
    width:100%;
    max-width:1160px;
    min-height:680px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.72);
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(24,24,24,.08);
    backdrop-filter:blur(16px);
}

.auth-visual{
    position:relative;
    padding:36px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at bottom left, rgba(247,198,159,.18), transparent 18%),
        linear-gradient(135deg, #0c4d42 0%, #158269 55%, #63cfac 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.auth-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.auth-brand-logo{
    width:64px;
    height:64px;
    border-radius:18px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
}

.auth-brand-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.auth-brand-text h2{
    margin:0;
    font-size:24px;
    font-weight:800;
    letter-spacing:-0.02em;
}

.auth-brand-text p{
    margin:4px 0 0;
    color:rgba(255,255,255,.80);
    font-size:13px;
}

.auth-copy{
    max-width:520px;
}

.auth-copy h1{
    margin:0 0 16px;
    font-size:58px;
    line-height:1.02;
    letter-spacing:-0.04em;
    font-weight:800;
}

.auth-copy p{
    margin:0;
    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.88);
}

.auth-glass-card{
    margin-top:28px;
    padding:24px;
    border-radius:26px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
}

.auth-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.18);
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    margin-bottom:16px;
}

.auth-glass-card h3{
    margin:0 0 10px;
    font-size:28px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-0.02em;
}

.auth-glass-card p{
    margin:0;
    color:rgba(255,255,255,.90);
    font-size:16px;
    line-height:1.8;
}

.auth-form-panel{
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(14px);
    padding:42px 42px 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.auth-form-head h2{
    margin:0 0 8px;
    font-size:42px;
    line-height:1.06;
    font-weight:800;
    letter-spacing:-0.03em;
}

.auth-form-head p{
    margin:0 0 26px;
    color:var(--text-soft);
    line-height:1.7;
}

.auth-form{
    display:grid;
    gap:18px;
}

.auth-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.auth-link{
    color:var(--green-700);
    font-size:14px;
    font-weight:700;
}

.auth-check{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-soft);
    font-size:14px;
}

.auth-check input{
    width:16px;
    height:16px;
}

.auth-submit{
    min-height:52px;
    border-radius:18px;
}

.auth-footer-note{
    margin-top:22px;
    text-align:center;
    color:var(--text-soft);
    font-size:14px;
}

.auth-footer-note strong{
    color:var(--text);
}

.logout-note{
    max-width:560px;
    margin:0 auto;
    text-align:center;
}

.logout-note h2{
    margin:0 0 10px;
    font-size:34px;
    font-weight:800;
    letter-spacing:-0.03em;
}

.logout-note p{
    margin:0 0 20px;
    color:var(--text-soft);
    line-height:1.8;
}

/* =========================
   SECTION / FILTER / TABLE TOOLS
========================= */

.page-intro{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
}

.page-intro h2{
    margin:0 0 6px;
    font-size:30px;
    line-height:1.08;
    letter-spacing:-0.03em;
    font-weight:800;
}

.page-intro p{
    margin:0;
    color:var(--text-soft);
    line-height:1.7;
    max-width:780px;
}

.section-stack{
    display:grid;
    gap:18px;
}

.section-subtext{
    margin:-4px 0 18px;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.7;
}

.filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:end;
    margin-bottom:16px;
}

.filter-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:14px;
}

.filter-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:#faf9f7;
    border:1px solid var(--line);
    color:#666;
    font-size:13px;
    font-weight:800;
}

.filter-chip.active{
    background:linear-gradient(135deg, var(--green-700), var(--green-500));
    color:#fff;
    border-color:transparent;
    box-shadow:0 10px 20px rgba(24,118,99,.14);
}

.checkbox-field{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:50px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.78);
}

.checkbox-field input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border-radius:6px;
    border:2px solid #a6b7b0;
    background:#fff;
    position:relative;
    cursor:pointer;
    margin:0;
    flex-shrink:0;
}

.checkbox-field input[type="checkbox"]:checked{
    background:linear-gradient(135deg, var(--green-700), var(--green-500));
    border-color:var(--green-700);
}

.checkbox-field input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:4px;
    top:1px;
    width:5px;
    height:9px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.checkbox-field label{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:var(--text);
}

.table-action-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.empty-state-box{
    border:2px dashed #e7e2db;
    background:#fbfaf8;
    border-radius:24px;
    padding:32px 22px;
    text-align:center;
    color:var(--text-soft);
}

.empty-state-box h4{
    margin:0 0 8px;
    color:var(--text);
    font-size:20px;
    font-weight:800;
}

.empty-state-box p{
    margin:0 0 16px;
    line-height:1.7;
}

/* =========================
   MOBILE
========================= */

@media (max-width:1100px){
    .auth-shell{
        grid-template-columns:1fr;
    }

    .auth-visual{
        min-height:420px;
    }
}

@media (max-width:768px){
    body.login-page{
        padding:18px;
    }

    .auth-visual,
    .auth-form-panel{
        padding:26px 22px;
    }

    .auth-copy h1{
        font-size:42px;
    }

    .auth-form-head h2{
        font-size:34px;
    }

    .page-intro{
        flex-direction:column;
    }

    .filter-bar{
        flex-direction:column;
        align-items:stretch;
    }

    .filter-bar .form-group,
    .filter-bar .btn,
    .filter-bar .quick-btn{
        width:100%;
    }
}

/* login */
.new-login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:
        radial-gradient(circle at top left, rgba(116,199,216,.10), transparent 18%),
        radial-gradient(circle at bottom right, rgba(241,165,107,.10), transparent 18%),
        linear-gradient(180deg, #f5f4f1 0%, #f1f0ec 100%);
}

.new-login-shell{
    width:100%;
    max-width:1120px;
    min-height:650px;
    display:grid;
    grid-template-columns:1fr .92fr;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.70);
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(24,24,24,.08);
}

.new-login-left{
    padding:36px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at bottom left, rgba(247,198,159,.18), transparent 20%),
        linear-gradient(135deg, #0d5648 0%, #14836d 55%, #50c7a5 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.login-logo-box{
    width:78px;
    height:78px;
    border-radius:22px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.16);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
}

.login-logo-img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.new-login-left h1{
    margin:0 0 14px;
    font-size:48px;
    line-height:1.06;
    letter-spacing:-0.03em;
    font-weight:800;
}

.new-login-left p{
    margin:0 0 22px;
    max-width:520px;
    color:rgba(255,255,255,.92);
    font-size:17px;
    line-height:1.8;
}

.login-showcase-card{
    max-width:500px;
    padding:24px;
    border-radius:28px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(10px);
}

.login-showcase-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.18);
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    margin-bottom:14px;
}

.login-showcase-card h3{
    margin:0 0 10px;
    font-size:28px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-0.02em;
}

.login-showcase-card p{
    margin:0;
    font-size:15px;
    line-height:1.7;
}

.new-login-card{
    padding:44px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:rgba(255,255,255,.78);
}

.login-foot-note{
    margin-top:18px;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.6;
}

.checkbox-field{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:50px;
    padding:12px 14px;
    border:1px solid #dbe7e2;
    border-radius:16px;
    background:#fbfdfc;
}

.checkbox-field input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border:2px solid #9db9af;
    border-radius:6px;
    background:#fff;
    display:inline-block;
    position:relative;
    cursor:pointer;
    flex-shrink:0;
    margin:0;
}

.checkbox-field input[type="checkbox"]:checked{
    background:linear-gradient(135deg, #187663, #58caa7);
    border-color:#187663;
}

.checkbox-field input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:4px;
    top:1px;
    width:5px;
    height:9px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.checkbox-field label{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:#1f2937;
    cursor:pointer;
}

.table-action-row{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

@media (max-width:980px){
    .new-login-shell{
        grid-template-columns:1fr;
    }

    .new-login-left{
        min-height:380px;
    }
}

@media (max-width:768px){
    .new-login-page{
        padding:16px;
    }

    .new-login-left,
    .new-login-card{
        padding:26px 22px;
    }

    .new-login-left h1{
        font-size:36px;
    }

    .login-showcase-card h3{
        font-size:24px;
    }
}

/* =========================================
   PREMIUM SIDEBAR UPGRADE
========================================= */

.premium-sidebar{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:14px;
    background:
        radial-gradient(circle at top right, rgba(122, 255, 211, 0.14), transparent 18%),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), transparent 22%),
        linear-gradient(180deg, #063d36 0%, #0a5147 42%, #0d6455 100%);
    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.05),
        12px 0 30px rgba(6, 61, 54, 0.08);
}

.sidebar-main{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.premium-brand-box{
    padding:10px 10px 14px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.06);
}

.premium-brand-logo-wrap{
    width:52px;
    height:52px;
    border-radius:16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 8px 18px rgba(0,0,0,.12);
}

.premium-profile-card{
    border-radius:22px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.premium-sidebar-avatar{
    background:linear-gradient(135deg, #f4fff9, #d6fff0);
    color:#0b5a4a;
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.nav-item-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.nav-icon{
    width:34px;
    height:34px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.05);
    color:#effcf7;
    flex-shrink:0;
    transition:all .18s ease;
}

.nav-item:hover .nav-icon,
.nav-dropdown-toggle:hover .nav-icon,
.nav-sub-item:hover .nav-icon{
    background:rgba(255,255,255,.10);
}

.nav-item.active .nav-icon,
.nav-dropdown-toggle.active .nav-icon{
    background:linear-gradient(135deg, rgba(126, 255, 219, .20), rgba(255,255,255,.08));
    color:#ffffff;
    box-shadow:0 6px 14px rgba(0,0,0,.10);
}

.nav-item.active,
.nav-dropdown-toggle.active{
    position:relative;
    background:
        linear-gradient(90deg, rgba(126,255,219,.18), rgba(255,255,255,.04));
    border:1px solid rgba(126,255,219,.12);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 10px 18px rgba(0,0,0,.08);
}

.nav-item.active::before,
.nav-dropdown-toggle.active::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg, #9ffff0, #47d8b1);
    box-shadow:0 0 16px rgba(126,255,219,.40);
}

.premium-submenu{
    position:relative;
    margin-left:10px;
    padding-left:18px;
}

.premium-submenu::before{
    content:"";
    position:absolute;
    left:7px;
    top:6px;
    bottom:6px;
    width:2px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(126,255,219,.24));
}

.nav-sub-item{
    margin-top:6px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
}

.nav-sub-item.active{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(126,255,219,.10);
}

.sidebar-utility-card{
    margin-top:8px;
    padding:18px;
    border-radius:24px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 12px 24px rgba(0,0,0,.10);
}

.sidebar-utility-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.10);
    color:#ffffff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    margin-bottom:12px;
    text-transform:uppercase;
}

.sidebar-utility-card h4{
    margin:0 0 8px;
    color:#ffffff;
    font-size:20px;
    font-weight:800;
    letter-spacing:-0.02em;
}

.sidebar-utility-card p{
    margin:0 0 16px;
    color:rgba(255,255,255,.78);
    font-size:13px;
    line-height:1.7;
}

.sidebar-utility-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:14px;
    background:#f5fff9;
    color:#0c5e4d;
    font-size:13px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(0,0,0,.10);
    transition:all .18s ease;
}

.sidebar-utility-btn:hover{
    transform:translateY(-1px);
    background:#ffffff;
}

.sidebar-bottom{
    margin-top:18px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.06);
}

.sidebar-logout{
    background:rgba(255,255,255,.04);
}

.sidebar-logout:hover{
    background:rgba(255,255,255,.08);
}

/* sidebar responsive */
@media (max-width:980px){
    .premium-sidebar{
        border-top-right-radius:24px;
        border-bottom-right-radius:24px;
    }

    .sidebar-utility-card{
        margin-bottom:16px;
    }
}

/* =========================================
   LUTRA-STYLE SIDEBAR
========================================= */

.sidebar-lutra{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:12px;
    background:
        radial-gradient(circle at top right, rgba(129, 255, 214, 0.14), transparent 18%),
        linear-gradient(180deg, #063d36 0%, #0a5046 44%, #0c6254 100%);
    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.05),
        10px 0 28px rgba(6,61,54,.08);
}

.sidebar-shell{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.sidebar-brand-area{
    display:grid;
    gap:14px;
}

.sidebar-brand-topdots{
    display:flex;
    gap:8px;
    padding:6px 10px 0;
}

.sidebar-brand-topdots span{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
}

.sidebar-brand-topdots span:nth-child(1){ background:#ff6c64; }
.sidebar-brand-topdots span:nth-child(2){ background:#ffcf4f; }
.sidebar-brand-topdots span:nth-child(3){ background:#3fd36b; }

.sidebar-brand-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 10px 6px;
}

.sidebar-brand-logo-wrap{
    width:48px;
    height:48px;
    border-radius:16px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.sidebar-brand-logo{
    width:100%;
    height:100%;
    object-fit:contain;
}

.sidebar-brand-title{
    color:#ffffff;
    font-size:16px;
    font-weight:800;
    line-height:1.1;
}

.sidebar-brand-subtitle{
    margin-top:4px;
    color:rgba(255,255,255,.74);
    font-size:12px;
    line-height:1.35;
}

.sidebar-profile-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.08);
}

.sidebar-profile-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(135deg, #f4fff9, #dbfff0);
    color:#0c5c4c;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    flex-shrink:0;
}

.sidebar-profile-name{
    color:#ffffff;
    font-size:15px;
    font-weight:700;
    line-height:1.2;
}

.sidebar-profile-email{
    margin-top:4px;
    color:rgba(255,255,255,.68);
    font-size:12px;
    line-height:1.35;
}

.sidebar-menu{
    display:grid;
    gap:6px;
}

.sidebar-group-label{
    padding:10px 12px 6px;
    color:rgba(255,255,255,.50);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.sidebar-menu-item,
.sidebar-submenu-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:12px 14px;
    border:none;
    background:transparent;
    color:#f0fbf7;
    font-size:15px;
    font-weight:700;
    text-align:left;
    border-radius:16px;
    cursor:pointer;
    transition:all .18s ease;
}

.sidebar-menu-item:hover,
.sidebar-submenu-item:hover{
    background:rgba(255,255,255,.08);
}

.sidebar-menu-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.sidebar-menu-icon{
    width:32px;
    height:32px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.05);
    color:#eefff8;
    flex-shrink:0;
}

.sidebar-menu-arrow,
.sidebar-menu-plus{
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.82);
    flex-shrink:0;
}

.sidebar-menu-item.active,
.sidebar-menu-toggle.active{
    background:linear-gradient(90deg, #22c786, #27b874);
    color:#ffffff;
    box-shadow:0 10px 24px rgba(20, 173, 111, .26);
}

.sidebar-menu-item.active .sidebar-menu-icon,
.sidebar-menu-toggle.active .sidebar-menu-icon{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.10);
}

.sidebar-submenu{
    display:none;
    position:relative;
    margin-left:18px;
    padding-left:16px;
}

.sidebar-submenu::before{
    content:"";
    position:absolute;
    left:4px;
    top:6px;
    bottom:6px;
    width:2px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(96,255,204,.28));
}

.sidebar-submenu.open{
    display:block;
}

.sidebar-submenu-item{
    margin-top:6px;
    color:#eafaf4;
    font-size:14px;
    font-weight:600;
    background:rgba(255,255,255,.04);
}

.sidebar-submenu-item.active{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(96,255,204,.10);
}

.sidebar-contacts-card{
    margin-top:8px;
    padding:10px 6px 4px;
}

.sidebar-group-label-contact{
    padding-left:8px;
}

.sidebar-contact-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 8px;
    color:#f4fff9;
    font-size:14px;
    font-weight:600;
}

.sidebar-contact-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    flex-shrink:0;
    box-shadow:0 0 0 4px rgba(255,255,255,.06);
}

.sidebar-contact-dot-a{ background:#ff8f7d; }
.sidebar-contact-dot-b{ background:#a3d994; }
.sidebar-contact-dot-c{ background:#b891ff; }

.sidebar-bottom{
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.06);
}

.sidebar-logout-item{
    background:rgba(255,255,255,.04);
}



.sidebar-logout-item:hover{
    background:rgba(255,255,255,.08);
}

.map-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.register-map{
    width:100%;
    height:420px;
    border-radius:22px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

@media (max-width:768px){
    .register-map{
        height:320px;
    }

    .map-toolbar{
        flex-direction:column;
    }

    .map-toolbar .quick-btn{
        width:100%;
    }
}

.map-search-wrap{
    position:relative;
    margin-bottom:14px;
}

.map-search-input-wrap{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.map-search-input-wrap input{
    flex:1 1 320px;
    min-height:48px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:#fff;
    font:inherit;
}

.location-search-results{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    z-index:200;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow-md);
    overflow:hidden;
    max-height:320px;
    overflow-y:auto;
}

.location-result-item{
    display:block;
    width:100%;
    border:none;
    background:transparent;
    text-align:left;
    padding:14px 16px;
    cursor:pointer;
    transition:.16s ease;
    border-bottom:1px solid var(--line-soft);
    font:inherit;
}

.location-result-item:last-child{
    border-bottom:none;
}

.location-result-item:hover{
    background:#f7faf8;
}

.location-result-item strong{
    display:block;
    color:var(--text);
    font-size:14px;
    font-weight:700;
    line-height:1.5;
    margin-bottom:4px;
}

.location-result-item span{
    display:block;
    color:var(--text-soft);
    font-size:12px;
}

.location-result-empty{
    padding:16px;
    color:var(--text-soft);
    font-size:14px;
}

.map-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.register-map{
    width:100%;
    height:420px;
    border-radius:22px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

@media (max-width:768px){
    .register-map{
        height:320px;
    }

    .map-toolbar,
    .map-search-input-wrap{
        flex-direction:column;
    }

    .map-toolbar .quick-btn,
    .map-search-input-wrap .btn{
        width:100%;
    }
}

.edit-mini-map{
    width:100%;
    height:300px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.map-search-wrap{
    position:relative;
}

.map-search-input-wrap{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.map-search-input-wrap input{
    flex:1 1 320px;
    min-height:48px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:#fff;
    font:inherit;
}

.location-search-results{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    z-index:200;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow-md);
    overflow:hidden;
    max-height:320px;
    overflow-y:auto;
}

.location-result-item{
    display:block;
    width:100%;
    border:none;
    background:transparent;
    text-align:left;
    padding:14px 16px;
    cursor:pointer;
    transition:.16s ease;
    border-bottom:1px solid var(--line-soft);
    font:inherit;
}

.location-result-item:last-child{
    border-bottom:none;
}

.location-result-item:hover{
    background:#f7faf8;
}

.location-result-item strong{
    display:block;
    color:var(--text);
    font-size:14px;
    font-weight:700;
    line-height:1.5;
    margin-bottom:4px;
}

.location-result-item span{
    display:block;
    color:var(--text-soft);
    font-size:12px;
}

.location-result-empty{
    padding:16px;
    color:var(--text-soft);
    font-size:14px;
}

.map-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

@media (max-width:768px){
    .edit-mini-map{
        height:260px;
    }

    .map-toolbar,
    .map-search-input-wrap{
        flex-direction:column;
    }

    .map-toolbar .quick-btn,
    .map-search-input-wrap .btn{
        width:100%;
    }
}

.notification-btn{
    position:relative;
    text-decoration:none;
}

.notification-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 10px rgba(239,68,68,.25);
}