@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root{
    --font-sans:"Inter",system-ui,-apple-system,sans-serif;
    --font-display:"Cormorant Garamond",serif;
    --font-mono:"JetBrains Mono",monospace;

    /* Wedding palette — warm rose + deep mauve + champagne */
    --bg:#FAF7F5;
    --bg-tint:#F7F1ED;
    --surface:#FFFFFF;
    --hover:#F5EFEA;
    --border:#EAE0D8;
    --border-strong:#D8C8BD;
    --text:#1F1A18;
    --text-secondary:#5C504A;
    --text-muted:#9C8D85;
    --text-disabled:#D8C8BD;

    /* Primary: deep mauve / burgundy rose */
    --primary:#8E3B5C;
    --primary-hover:#732C49;
    --primary-soft:#FBEEF2;
    --primary-soft-border:#F1D7DF;

    /* Accent: warm gold */
    --accent:#B8895D;
    --accent-hover:#9F7449;
    --accent-soft:#FAF1E6;

    --success:#2F8A6A;
    --success-soft:#E6F4ED;
    --warning:#C77B30;
    --warning-soft:#FBEFDD;
    --danger:#C13E3E;
    --danger-soft:#FBE9E9;
    --info:#3F7AB8;

    /* Gradients */
    --grad-primary:linear-gradient(135deg,#8E3B5C 0%,#B8526F 50%,#C77B30 100%);
    --grad-surface:linear-gradient(180deg,#FFFFFF 0%,#FBF7F4 100%);
    --grad-mauve:linear-gradient(135deg,#8E3B5C 0%,#732C49 100%);
    --grad-gold:linear-gradient(135deg,#C77B30 0%,#B8895D 100%);

    --shadow:0 1px 2px rgba(75,40,55,.06),0 1px 3px rgba(75,40,55,.05);
    --shadow-elevated:0 6px 18px rgba(75,40,55,.10),0 2px 6px rgba(75,40,55,.06);
    --shadow-glow:0 0 0 4px rgba(142,59,92,.10);

    --ease-standard:cubic-bezier(.4,0,.2,1);
    --ease-enter:cubic-bezier(0,0,.2,1);
    --ease-exit:cubic-bezier(.4,0,1,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html{font-size:14px;overflow-x:hidden}
body{
    margin:0;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:400;
    line-height:1.5;
    background-image:
        radial-gradient(circle at 0% 0%,rgba(142,59,92,.04) 0%,transparent 40%),
        radial-gradient(circle at 100% 100%,rgba(199,123,48,.04) 0%,transparent 40%);
    background-attachment:fixed;
}

h1,h2,h3,h4,p{margin-top:0}
h1{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1.15;margin-bottom:12px;letter-spacing:-.01em}
h2{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.25;margin-bottom:8px;letter-spacing:-.005em}
h3{font-size:18px;font-weight:600;line-height:1.4;margin-bottom:8px}
h4{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:8px}
p{font-size:14px;line-height:1.55;color:var(--text-secondary)}

/* ============================ SIDEBAR ============================ */
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:248px;
    min-height:100vh;
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:28px 16px 24px;
    z-index:10;
    transition:width 300ms var(--ease-standard),transform 300ms var(--ease-standard);
}
.sidebar:before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--grad-primary);
    opacity:.85;
}
.brand{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    font-family:var(--font-display);
    font-size:26px;
    font-weight:600;
    margin-bottom:36px;
    color:var(--text);
    min-height:48px;
    line-height:1.1;
    letter-spacing:.01em;
    text-align:center;
}
.brand:after{
    content:"";
    display:block;
    width:36px;
    height:1px;
    background:var(--accent);
    margin-top:8px;
    opacity:.6;
}
.nav-label{
    display:block;
    color:var(--text-muted);
    font-size:10px;
    font-weight:600;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin:24px 12px 8px;
}
.sidebar a{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text-secondary);
    text-decoration:none;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:2px;
    font-size:14px;
    font-weight:500;
    position:relative;
    transition:background 200ms var(--ease-standard),color 200ms var(--ease-standard),transform 200ms var(--ease-standard);
}
.sidebar a:before{
    content:"";
    position:absolute;
    left:-16px;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:0 99px 99px 0;
    background:var(--grad-mauve);
    transform:scaleY(0);
    transition:transform 300ms var(--ease-spring);
}
.sidebar a:hover{background:var(--hover);color:var(--text);transform:translateX(3px)}
.sidebar a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sidebar a.active:before{transform:scaleY(1)}
.nav-icon{display:inline-grid;place-items:center;width:22px;min-width:22px;color:inherit;transition:transform 200ms var(--ease-standard)}
.nav-icon i{font-size:14px}
.sidebar a:hover .nav-icon{transform:scale(1.15) rotate(-4deg)}
.sidebar a.active .nav-icon{color:var(--primary)}
.nav-text,.brand span:last-child,.nav-label{transition:opacity 150ms ease}
.submenu{display:grid;gap:2px}
.submenu a{padding-left:20px}

.app{margin-left:248px;min-height:100vh;transition:margin-left 300ms var(--ease-standard);animation:pageIn 500ms var(--ease-enter) both}
.sidebar-collapsed .sidebar{width:80px;padding-left:14px;padding-right:14px}
.sidebar-collapsed .app{margin-left:80px}
.sidebar-collapsed .brand{font-size:0;justify-content:center;margin-bottom:28px}
.sidebar-collapsed .brand:before{
    content:"A&I";
    font-family:var(--font-display);
    font-size:18px;
    font-weight:600;
    color:var(--primary);
    background:var(--grad-primary);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.sidebar-collapsed .brand:after{display:none}
.sidebar-collapsed .nav-text,
.sidebar-collapsed .nav-label{display:none}
.sidebar-collapsed .sidebar a{justify-content:center;padding-left:0;padding-right:0}
.sidebar-collapsed .submenu a{padding-left:0}
.sidebar-backdrop{display:none}

/* ============================ TOPBAR ============================ */
.topbar{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    background:rgba(255,255,255,.78);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border);
    padding:16px 32px;
    position:sticky;
    top:0;
    z-index:5;
}
.menu-toggle,.icon-button{
    width:40px;
    height:40px;
    padding:0;
    display:inline-grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text-secondary);
    flex:0 0 auto;
    position:relative;
    overflow:hidden;
    transition:background 200ms var(--ease-standard),border-color 200ms var(--ease-standard),color 200ms var(--ease-standard),transform 100ms var(--ease-standard);
}
.menu-toggle:hover,.icon-button:hover{background:var(--hover);border-color:var(--border-strong);color:var(--primary);transform:scale(1.03)}
.menu-toggle:active,.icon-button:active{transform:scale(.97)}
.menu-toggle span{display:block;width:16px;height:2px;background:currentColor;border-radius:99px;grid-column:1;grid-row:1;transition:transform 300ms var(--ease-standard),opacity 150ms var(--ease-standard)}
.menu-toggle span:nth-child(1){transform:translateY(-5px)}
.menu-toggle span:nth-child(3){transform:translateY(5px)}
.sidebar-open .menu-toggle span:nth-child(1){transform:rotate(45deg)}
.sidebar-open .menu-toggle span:nth-child(2){opacity:0}
.sidebar-open .menu-toggle span:nth-child(3){transform:rotate(-45deg)}
.search{
    width:min(520px,100%);
    max-width:520px;
    flex:1 1 320px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:0 14px;
    height:42px;
    background:var(--surface);
    transition:border-color 200ms ease,box-shadow 200ms ease,max-width 250ms ease;
}
.search:focus-within{border-color:var(--primary);box-shadow:var(--shadow-glow);max-width:560px}
.search-icon{font-size:13px;color:var(--text-muted)}
.search:focus-within .search-icon{color:var(--primary)}
.search span{color:var(--text-muted)}
.search input{border:0;padding:0;width:100%;outline:0;background:transparent;color:var(--text);font-size:14px}
.search input::placeholder{color:var(--text-muted)}
.top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.notification-button,.avatar-trigger{
    position:relative;
    width:40px;
    height:40px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--surface);
    color:var(--text-secondary);
}
.notification-button:hover .bell{animation:bellShake 500ms var(--ease-standard)}
.notification-badge{position:absolute;right:-2px;top:-3px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:600;animation:badgeIn 400ms var(--ease-spring) both}
.avatar-menu{position:relative}
.avatar-trigger{background:var(--primary-soft);color:var(--primary);font-weight:600;font-family:var(--font-display);font-size:15px}
.avatar-dropdown{position:absolute;right:0;top:48px;width:200px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-elevated);opacity:0;pointer-events:none;transform:translateY(-4px) scale(.95);transition:opacity 200ms var(--ease-enter),transform 200ms var(--ease-enter);z-index:20}
.avatar-menu.open .avatar-dropdown{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.avatar-dropdown strong,.avatar-dropdown small{display:block}
.avatar-dropdown small{color:var(--text-muted);margin-bottom:8px}
.avatar-dropdown a{display:block;color:var(--text-secondary);text-decoration:none;padding:8px;border-radius:6px;transition:background 150ms var(--ease-standard)}
.avatar-dropdown a:hover{background:var(--hover);color:var(--primary)}
.pro-button{
    background:var(--grad-primary);
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    padding:9px 16px;
    font-weight:600;
    font-size:13px;
    line-height:1.4;
    box-shadow:0 4px 12px rgba(142,59,92,.25);
    transition:transform 150ms ease,box-shadow 200ms ease;
}
.pro-button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(142,59,92,.30)}
.round,.avatar{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary);
    font-weight:600;
    border:1px solid var(--primary-soft-border);
    font-family:var(--font-display);
    font-size:15px;
}
.profile{display:flex;align-items:center;gap:12px}
.profile strong{display:block;font-size:14px;font-weight:600;color:var(--text)}
.profile small{display:block;color:var(--text-muted);font-size:13px}
.page-title{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--text);letter-spacing:.005em}

/* ============================ STAT CARDS ============================ */
.stat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    padding:28px 40px 0;
    margin-top:0;
}
.stat-card{
    background:var(--grad-surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    min-height:116px;
    padding:24px;
    display:flex;
    align-items:center;
    gap:20px;
    position:relative;
    overflow:hidden;
}
.stat-card:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:120px;
    height:120px;
    background:var(--grad-primary);
    opacity:.04;
    border-radius:50%;
    transform:translate(40%,-40%);
    transition:transform 400ms var(--ease-spring),opacity 300ms ease;
}
.panel,.stat-card{transition:transform 250ms var(--ease-standard),box-shadow 250ms var(--ease-standard),border-color 200ms var(--ease-standard)}
.panel:hover,.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-elevated);border-color:var(--border-strong)}
.stat-card:hover:before{transform:translate(30%,-30%) scale(1.1);opacity:.08}
.ring{animation:trendBounce 700ms var(--ease-spring) both;position:relative;z-index:1}
.ring{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:14px;
    font-size:22px;
    font-family:var(--font-display);
    font-weight:600;
    color:#fff;
    flex-shrink:0;
}
.ring.blue{background:var(--grad-mauve);box-shadow:0 4px 12px rgba(142,59,92,.25)}
.ring.teal{background:var(--grad-gold);box-shadow:0 4px 12px rgba(199,123,48,.25)}
.stat-card>div{position:relative;z-index:1}
.stat-card small{display:block;color:var(--text-muted);font-size:12px;line-height:1.5;margin-bottom:6px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.stat-card strong{display:block;font-family:var(--font-display);font-size:32px;font-weight:600;color:var(--text);line-height:1.1}

/* ============================ PANEL & GRID ============================ */
.content-grid,.dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(320px,.9fr);
    gap:24px;
    padding:24px 40px 0;
    align-items:stretch;
}
.dashboard-grid{padding-bottom:40px}
.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:26px;
}
.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.panel h2{margin-bottom:6px}
.panel p{margin:0;color:var(--text-secondary)}

.quick-form,.mini-search,.form-grid{display:grid;gap:16px;align-items:end}
.quick-form{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.mini-search{grid-template-columns:minmax(0,1fr) auto}
.mini-search button{min-width:72px}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wide{grid-column:1/-1}

/* ============================ INPUT & BUTTON ============================ */
input,textarea,select{
    min-width:0;
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 12px;
    font:inherit;
    background:var(--surface);
    color:var(--text);
    transition:border-color 200ms ease,box-shadow 200ms ease,background 200ms ease;
}
input:hover,textarea:hover,select:hover{border-color:var(--border-strong)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--primary);box-shadow:var(--shadow-glow)}
input:invalid:not(:placeholder-shown),select:invalid:not(:focus){animation:shake 300ms var(--ease-standard)}
textarea{resize:vertical;line-height:1.5}
label{font-weight:600;color:var(--text);font-size:13px}
label input,label textarea,label select{margin-top:8px;font-weight:400}
button,.button{
    max-width:100%;
    border:1px solid transparent;
    border-radius:8px;
    background:var(--grad-primary);
    color:#fff;
    padding:9px 14px;
    font:inherit;
    font-size:13px;
    line-height:1.4;
    font-weight:600;
    text-decoration:none;
    display:inline-block;
    cursor:pointer;
    white-space:nowrap;
    position:relative;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(142,59,92,.18);
    transition:transform 150ms var(--ease-standard),box-shadow 200ms var(--ease-standard),filter 200ms ease;
}
button:hover,.button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(142,59,92,.28);filter:brightness(1.04)}
button:active,.button:active{transform:translateY(0) scale(.98)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.ripple{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);animation:ripple 400ms var(--ease-enter);pointer-events:none}
.secondary{background:var(--surface);color:var(--text-secondary);border:1px solid var(--border);box-shadow:none}
.secondary:hover{background:var(--hover);border-color:var(--primary);color:var(--primary);box-shadow:0 2px 6px rgba(75,40,55,.08)}
.danger{background:var(--danger);box-shadow:0 2px 6px rgba(193,62,62,.20)}
.danger:hover{background:#A82F2F;box-shadow:0 6px 16px rgba(193,62,62,.28)}

/* ============================ TABLE ============================ */
.table-card,.settings-panel{margin:24px 40px 40px}
.table-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:26px;
}
.table-wrap{overflow-x:auto}
.table-tools{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:20px}
.filter-form,.import-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filter-form select{max-width:220px}
.import-form input[type=file]{max-width:280px;padding:8px 10px}
.filter-form button,.import-form button,.filter-form .button,.import-form .button{width:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:14px 12px;text-align:left;vertical-align:top}
thead th{border-bottom:1px solid var(--border);background:var(--bg-tint)}
thead tr th:first-child{border-top-left-radius:8px}
thead tr th:last-child{border-top-right-radius:8px}
tbody tr{position:relative}
tbody tr{transition:background 200ms var(--ease-standard),transform 250ms var(--ease-enter),opacity 250ms var(--ease-enter)}
tbody tr:hover{background:var(--hover)}
tbody tr.row-enter{animation:rowIn 280ms var(--ease-enter) both;animation-delay:var(--row-stagger,0ms)}
tbody tr:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border)}
th{font-size:10px;font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.10em;color:var(--text-muted);white-space:nowrap}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--primary)}
th.sortable:after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:currentColor;vertical-align:middle;transition:transform 250ms var(--ease-standard),opacity 150ms var(--ease-standard);opacity:.35}
th.sort-desc:after{transform:rotate(180deg);opacity:1}
th.sort-asc:after{opacity:1}
td{color:var(--text-secondary);font-size:14px}
td strong{display:block;color:var(--text);font-weight:600}
td small{display:block;color:var(--text-muted);font-size:12px;margin-top:4px;word-break:break-all}
td:nth-child(3),td:nth-child(7),.info-list strong,.progress-list strong{font-family:var(--font-mono)}
.sent-time{white-space:nowrap;color:var(--text-muted);font-size:12px}
.summary-table td:nth-child(2),
.summary-table td:nth-child(3){font-family:var(--font-mono);white-space:nowrap}
.stack{display:grid;gap:12px;margin:12px 0}
summary{cursor:pointer;color:var(--primary);font-weight:600}

/* ============================ BADGE & ALERT ============================ */
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;background:var(--primary-soft);color:var(--primary);font-size:10px;font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--primary-soft-border)}
.badge.sent{background:var(--success-soft);color:var(--success);border-color:#C9E6D7}
.badge.failed{background:var(--danger-soft);color:var(--danger);border-color:#F5C9C9}
.badge.pending{background:var(--warning-soft);color:var(--warning);border-color:#F5DCB8}
code{font-family:var(--font-mono);background:var(--hover);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px}

.alert{margin:20px 40px 0;padding:14px 18px;border-radius:10px;background:var(--success-soft);color:var(--success);border:1px solid #C9E6D7;font-weight:500}
.alert.error{margin:14px 0;background:var(--danger-soft);color:var(--danger);border-color:#F5C9C9}
.muted{color:var(--text-muted);font-size:13px}

/* ============================ INFO LIST & DASHBOARD ============================ */
.info-list{display:grid;gap:0}
.info-list div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:16px 0}
.info-list div:first-child{padding-top:0}
.info-list div:last-child{border-bottom:0;padding-bottom:0}
.info-list span{color:var(--text-secondary)}
.info-list strong{font-size:16px;font-weight:600;color:var(--text)}

.dashboard-chart{display:flex;flex-direction:column;align-items:center;justify-content:center}
.dashboard-chart .panel-head{width:100%;margin-bottom:8px}
.donut{
    --wa:0;
    --ig:0;
    width:200px;
    aspect-ratio:1;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:16px auto 24px;
    background:conic-gradient(var(--primary) 0 calc(var(--wa)*1%), var(--accent) 0 100%);
    position:relative;
    box-shadow:0 8px 24px rgba(142,59,92,.15);
}
.donut:before{content:"";position:absolute;inset:32px;background:var(--surface);border-radius:50%;box-shadow:inset 0 2px 8px rgba(75,40,55,.06)}
.donut div{position:relative;text-align:center}
.donut strong{display:block;font-family:var(--font-display);font-size:36px;font-weight:600;color:var(--text);line-height:1}
.donut span{display:block;color:var(--text-muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.chart-legend{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;color:var(--text-secondary);font-weight:500;font-size:13px}
.chart-legend span{display:flex;align-items:center;gap:8px}
.chart-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-wa{background:var(--primary)}
.legend-ig{background:var(--accent)}

.progress-list{display:grid;gap:22px}
.progress-list div div{display:flex;justify-content:space-between;margin-bottom:8px}
.progress-list span{color:var(--text-secondary);font-weight:500}
.progress-list strong{font-size:16px;font-weight:600;color:var(--text)}
.progress-list b{display:block;height:10px;background:var(--hover);border-radius:999px;overflow:hidden}
.progress-list i{display:block;height:100%;background:var(--success);border-radius:999px;animation:progressIn 900ms var(--ease-enter) both;transform-origin:left}
.progress-list i.yellow{background:var(--warning)}
.progress-list i.red{background:var(--danger)}
.check-list{display:grid;gap:12px}
.check-list div{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-tint);transition:transform 200ms ease,border-color 200ms ease}
.check-list div:hover{transform:translateX(4px);border-color:var(--primary-soft-border)}
.check-list span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:600;flex:0 0 auto;font-family:var(--font-display);font-size:14px}
.check-list p{margin:5px 0 0;color:var(--text-secondary)}

.action-panel .panel-head{align-items:center;margin-bottom:0}
.action-panel .panel-head button{min-width:148px}
.mini-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.mini-info div{border:1px solid var(--border);border-radius:10px;padding:18px;background:var(--bg-tint)}
.mini-info span{display:block;color:var(--text-muted);font-size:11px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.mini-info strong{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--text)}
.wa-relation-card{display:flex;flex-direction:column;justify-content:space-between}
.relation-send-form{display:grid;grid-template-columns:minmax(140px,1fr) auto;gap:12px;align-items:center;margin-top:14px}
.relation-send-form button{min-width:140px}

/* ============================ ACTION BUTTONS ============================ */
.action-cell{display:flex;gap:8px;flex-wrap:nowrap;align-items:center}
.action-cell form{margin:0}
.action-cell button,.action-cell .button{width:auto;min-width:0}
.action-cell [data-copy]{min-width:0}
.icon-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:34px;
    padding:7px 11px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    box-shadow:none;
    background:var(--surface);
}
.icon-action span{
    display:inline-grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
    background:rgba(255,255,255,.26);
}
.icon-action.secondary span{background:#fff;border:1px solid var(--border)}
.icon-action.instagram{background:#FDF2F8;color:#BE185D;border-color:#FBCFE8}
.icon-action.instagram:hover{background:#FCE7F3;color:#9D174D;border-color:#F9A8D4;box-shadow:0 2px 6px rgba(190,24,93,.12)}
.icon-action.instagram span{color:#BE185D;background:#fff;border-color:#FBCFE8}
.icon-action.whatsapp{background:var(--success-soft);color:var(--success);border:1px solid #C9E6D7}
.icon-action.whatsapp:hover{background:#D7EEE2;color:#216751;border-color:#A9D6BE;box-shadow:0 2px 6px rgba(47,138,106,.12)}
.icon-action.whatsapp span{color:var(--success);background:#fff;border-color:#C9E6D7}
.icon-action.copy{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-soft-border)}
.icon-action.copy:hover{background:#F5DCE3;color:var(--primary-hover);border-color:#E8C3CD;box-shadow:0 2px 6px rgba(142,59,92,.12)}
.icon-action.copy span{color:var(--primary);background:#fff;border:1px solid var(--primary-soft-border)}
.icon-action.edit{padding:7px 9px}
.icon-action.edit span{color:var(--primary);background:var(--primary-soft);border-color:var(--primary-soft-border)}

/* ============================ MODAL ============================ */
.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(28,18,22,.45);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:9999;
}
.modal-active{overflow:hidden}
.modal-backdrop.open{display:flex;animation:backdropIn 250ms var(--ease-enter) both}
.modal-card{
    width:min(640px,100%);
    max-height:calc(100vh - 48px);
    overflow:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 30px 80px rgba(28,18,22,.24);
    padding:28px;
}
.modal-card::-webkit-scrollbar{width:10px}
.modal-card::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:3px solid var(--surface)}
.modal-backdrop.open .modal-card{animation:modalIn 350ms var(--ease-spring) both}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.modal-head h2{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 4px}
.modal-head p{font-size:13px;margin:0;color:var(--text-secondary)}
.modal-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.modal-form button{grid-column:1/-1}
.modal-form label:first-of-type{grid-column:1/-1}
.modal-form input,.modal-form select{height:42px}
.modal-delete{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.modal-delete button{width:auto}

/* ============================ LOGIN PAGE ============================ */
.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:var(--bg);
    background-image:
        radial-gradient(circle at 20% 30%,rgba(142,59,92,.10) 0%,transparent 50%),
        radial-gradient(circle at 80% 70%,rgba(199,123,48,.10) 0%,transparent 50%),
        radial-gradient(circle at 50% 100%,rgba(184,82,111,.08) 0%,transparent 60%);
    position:relative;
}
.login-page:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle,rgba(142,59,92,.08) 1px,transparent 1px),
        radial-gradient(circle,rgba(199,123,48,.06) 1px,transparent 1px);
    background-size:60px 60px,80px 80px;
    background-position:0 0,30px 30px;
    pointer-events:none;
    opacity:.4;
}
.login-card{
    width:min(440px,100%);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:40px 36px;
    box-shadow:0 20px 60px rgba(75,40,55,.12);
    position:relative;
    overflow:hidden;
    animation:modalIn 500ms var(--ease-spring) both;
}
.login-card:before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    background:var(--grad-primary);
}
.login-brand{
    margin-bottom:8px;
    text-align:center;
    font-family:var(--font-display);
    font-size:32px;
    font-weight:600;
    color:var(--text);
    background:var(--grad-primary);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.login-card .login-brand:after{display:none}
.login-card h1{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.2;margin:0 0 10px;text-align:center}
.login-card>p{font-size:14px;color:var(--text-secondary);margin:0 0 28px;text-align:center}
.login-card label{display:block;margin-bottom:18px}
.login-card button{width:100%;padding:12px;font-size:14px}
.login-card small{display:block;margin-top:14px;color:var(--text-muted);text-align:center;font-size:12px}

/* ============================ CHARTS & MISC ============================ */
.motion-enter{opacity:0;transform:translateY(8px)}
.motion-enter.is-visible{animation:pageIn 500ms var(--ease-enter) both;animation-delay:var(--stagger,0ms)}
.line-chart svg{width:100%;height:auto;display:block}
.chart-grid{stroke:var(--border);stroke-width:1}
.chart-line{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700;animation:drawLine 1200ms var(--ease-enter) forwards}
.chart-point{fill:var(--primary);animation:pulsePoint 1500ms var(--ease-standard) infinite}
.bar-chart{display:grid;gap:18px}
.bar-chart div{display:grid;grid-template-columns:92px minmax(0,1fr) 44px;gap:12px;align-items:center}
.bar-chart span{color:var(--text-secondary);font-weight:500}
.bar-chart strong{font-family:var(--font-mono);font-weight:600;color:var(--text)}
.bar-chart b{height:10px;background:var(--hover);border-radius:999px;overflow:hidden}
.bar-chart i{display:block;height:100%;width:var(--bar);background:var(--success);border-radius:999px;animation:barIn 1100ms var(--ease-enter) both;transform-origin:left}
.bar-chart i.yellow{background:var(--warning)}
.bar-chart i.red{background:var(--danger)}
.activity-feed{display:grid;gap:14px}
.activity-feed div{display:flex;gap:12px;align-items:flex-start;animation:rowIn 280ms var(--ease-enter) both}
.activity-feed div:nth-child(2){animation-delay:60ms}
.activity-feed div:nth-child(3){animation-delay:120ms}
.activity-feed div:nth-child(4){animation-delay:180ms}
.activity-feed span{width:10px;height:10px;border-radius:50%;background:var(--primary);margin-top:6px;box-shadow:0 0 0 6px var(--primary-soft)}
.activity-feed p{margin:0}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:18px;color:var(--text-secondary)}
.pagination button{width:auto}
.toast-stack{position:fixed;right:20px;top:20px;z-index:50;display:grid;gap:12px}
.toast{min-width:280px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--success);border-radius:10px;box-shadow:var(--shadow-elevated);padding:14px 16px;animation:toastIn 320ms var(--ease-spring) both;overflow:hidden;position:relative;font-weight:500}
.toast.danger{border-left-color:var(--danger)}
.toast.leaving{animation:toastOut 200ms var(--ease-exit) forwards}
.toast b{display:block;position:absolute;left:0;bottom:0;height:3px;background:var(--success);animation:toastProgress 3200ms linear forwards}
.toast.danger b{background:var(--danger)}
.copied{animation:copyPop 450ms var(--ease-spring)}

/* ============================ KEYFRAMES ============================ */
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translate(12px,-8px) scale(.96)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translate(12px,-8px) scale(.96)}}
@keyframes toastProgress{from{width:100%}to{width:0}}
@keyframes progressIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes pulsePoint{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(18);opacity:0}}
@keyframes bellShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
@keyframes badgeIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes trendBounce{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes copyPop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1180px){
    .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .content-grid,.dashboard-grid{grid-template-columns:1fr}
    .quick-form,.guest-form{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mini-search,.relation-form,.key-form,.relation-send-form{grid-template-columns:1fr}
    .mini-search button,.relation-form button,.key-form button,.relation-send-form button{width:100%;min-width:0}
    .action-cell{flex-wrap:wrap}
}

/* ============== TABLET / MOBILE LANDSCAPE ============== */
@media(max-width:900px){
    .sidebar{
        position:fixed;
        width:min(290px,82vw);
        transform:translateX(-105%);
        box-shadow:0 24px 70px rgba(28,18,22,.20);
        overflow-y:auto;
        padding-top:20px;
    }
    .sidebar-open .sidebar{transform:translateX(0)}
    .sidebar-backdrop{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(28,18,22,.40);
        opacity:0;
        pointer-events:none;
        transition:opacity 200ms ease;
        z-index:9;
        backdrop-filter:blur(2px);
    }
    .sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}
    .app{margin-left:0}
    .topbar{
        align-items:center;
        flex-direction:row;
        padding:12px 16px;
        min-height:64px;
    }
    .search{
        width:auto;
        max-width:none;
        flex:1 1 auto;
        height:40px;
    }
    .top-actions{display:none}
    .stat-grid,.content-grid,.dashboard-grid{
        padding-left:16px;
        padding-right:16px;
    }
    .table-card,.settings-panel{margin-left:16px;margin-right:16px}
}

/* ============== MOBILE PORTRAIT ============== */
@media(max-width:640px){
    html{font-size:14px}
    h1{font-size:26px}
    h2{font-size:20px}
    h3{font-size:16px}

    .topbar{padding:10px 14px;gap:10px;min-height:60px}
    .menu-toggle{width:38px;height:38px}
    .search{height:38px;padding:0 12px;font-size:13px}
    .search input{font-size:13px}
    .page-title{font-size:18px}

    /* Stat grid: 2 kolom kecil */
    .stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding:16px 14px 0;
    }
    .stat-card{
        padding:14px;
        min-height:auto;
        gap:12px;
        border-radius:10px;
        flex-direction:row;
        align-items:center;
    }
    .stat-card:before{display:none}
    .ring{
        width:40px;
        height:40px;
        font-size:16px;
        border-radius:10px;
    }
    .stat-card small{
        font-size:10px;
        letter-spacing:.06em;
        margin-bottom:2px;
    }
    .stat-card strong{font-size:22px}

    /* Content grid */
    .content-grid,.dashboard-grid{
        grid-template-columns:1fr;
        padding:16px 14px 0;
        gap:14px;
    }
    .dashboard-grid{padding-bottom:24px}
    .panel{padding:18px;border-radius:10px}
    .panel-head{display:block;margin-bottom:14px}
    .panel-head .mini-search{margin-top:12px}

    /* Forms full width */
    .quick-form,.guest-form,.mini-search,.form-grid,
    .relation-form,.key-form,.modal-form,
    .filter-form,.import-form{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
    .filter-form select,.import-form input[type=file]{max-width:none;width:100%}

    /* Buttons full width but action cells stay inline */
    button,.button{width:100%;text-align:center;padding:10px 14px}
    .action-cell{
        display:flex;
        flex-wrap:nowrap;
        min-width:max-content;
        gap:6px;
    }
    .action-cell button,.action-cell .button,.action-cell a.button{
        width:auto;
        white-space:nowrap;
        padding:6px 10px;
    }

    /* Table card */
    .table-card,.settings-panel{
        margin:16px 14px 24px;
        padding:18px;
        border-radius:10px;
    }
    .table-wrap{
        overflow-x:auto;
        margin:0 -18px;
        padding:0 18px;
    }
    table{min-width:680px;font-size:13px}
    th,td{padding:10px 8px}

    /* Donut chart smaller */
    .donut{width:160px;margin:12px auto 18px}
    .donut:before{inset:24px}
    .donut strong{font-size:26px}

    /* Mini info: 1 column on very small */
    .mini-info{grid-template-columns:1fr;gap:10px}
    .mini-info div{padding:14px}
    .mini-info strong{font-size:22px}

    /* Action panel */
    .action-panel .panel-head{display:block}
    .action-panel .panel-head button{width:100%;margin-top:14px}

    /* Modal */
    .modal-backdrop{align-items:flex-start;padding:14px}
    .modal-card{padding:20px;max-height:calc(100vh - 28px);border-radius:12px}
    .modal-delete button{width:100%}

    /* Login */
    .login-page{padding:16px}
    .login-card{padding:28px 22px}
    .login-brand{font-size:26px}
    .login-card h1{font-size:22px}

    /* Alerts */
    .alert{margin:16px 14px 0;padding:12px 14px;font-size:13px}

    /* Sidebar di mobile - lebih compact */
    .sidebar{
        padding:20px 14px 24px;
    }
    .brand{
        font-size:24px;
        margin-bottom:24px;
        min-height:auto;
    }
    .nav-label{margin:18px 8px 6px}
}

/* ============== MOBILE SMALL ============== */
@media(max-width:380px){
    .stat-grid{grid-template-columns:1fr;gap:10px}
    .stat-card{padding:14px 16px}
    .topbar{padding:10px 12px}
    .menu-toggle{width:36px;height:36px}
    .content-grid,.dashboard-grid{padding-left:12px;padding-right:12px}
    .table-card,.settings-panel{margin-left:12px;margin-right:12px;padding:16px}
    .alert{margin-left:12px;margin-right:12px}
    .stat-grid{padding:14px 12px 0}
}


/* =========================================================
   MOBILE SIDEBAR SAFETY FIX
   Taruh ini sebelum prefers-reduced-motion.
   Fungsi: memastikan class .sidebar-collapsed dari desktop
   tidak membuat layout mobile geser/gepeng.
   ========================================================= */
@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.sidebar-collapsed .app,
    .sidebar-collapsed .app,
    .app {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.sidebar-collapsed .sidebar,
    .sidebar-collapsed .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(290px, 82vw) !important;
        max-width: 82vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        transform: translateX(-105%) !important;
        padding: 20px 14px 24px !important;
        overflow-y: auto !important;
        box-shadow: 0 24px 70px rgba(28,18,22,.20) !important;
        z-index: 10 !important;
    }

    body.sidebar-open .sidebar,
    body.sidebar-open.sidebar-collapsed .sidebar,
    .sidebar-open .sidebar,
    .sidebar-open.sidebar-collapsed .sidebar {
        transform: translateX(0) !important;
    }

    body.sidebar-collapsed .brand,
    .sidebar-collapsed .brand {
        font-size: 24px !important;
        justify-content: center !important;
        margin-bottom: 24px !important;
        min-height: auto !important;
    }

    body.sidebar-collapsed .brand:before,
    .sidebar-collapsed .brand:before {
        content: none !important;
        display: none !important;
    }

    body.sidebar-collapsed .brand:after,
    .sidebar-collapsed .brand:after {
        display: block !important;
    }

    body.sidebar-collapsed .nav-text,
    body.sidebar-collapsed .nav-label,
    .sidebar-collapsed .nav-text,
    .sidebar-collapsed .nav-label {
        display: initial !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.sidebar-collapsed .sidebar a,
    .sidebar-collapsed .sidebar a {
        justify-content: flex-start !important;
        padding: 10px 12px !important;
    }

    body.sidebar-collapsed .submenu a,
    .sidebar-collapsed .submenu a {
        padding-left: 20px !important;
    }

    body.sidebar-collapsed .nav-icon,
    .sidebar-collapsed .nav-icon {
        width: 22px !important;
        min-width: 22px !important;
    }

    .sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(28,18,22,.40) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 200ms ease !important;
        z-index: 9 !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    body.sidebar-open .sidebar-backdrop,
    .sidebar-open .sidebar-backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 14px !important;
        gap: 10px !important;
        min-height: 60px !important;
    }

    .menu-toggle {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
    }

    .search {
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        height: 38px !important;
        padding: 0 12px !important;
    }

    .top-actions {
        display: none !important;
    }

    .stat-grid,
    .content-grid,
    .dashboard-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        overflow-x: hidden !important;
    }

    .table-card,
    .settings-panel {
        width: auto !important;
        max-width: calc(100% - 28px) !important;
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .panel {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* =========================================================
   MOBILE PORTRAIT POLISH
   ========================================================= */
@media (max-width: 640px) {
    h1 { font-size: 26px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 16px !important; }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding-top: 16px !important;
    }

    .stat-card {
        min-height: auto !important;
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 10px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .stat-card:before { display: none !important; }

    .ring {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    .stat-card small {
        font-size: 10px !important;
        letter-spacing: .06em !important;
        margin-bottom: 2px !important;
    }

    .stat-card strong { font-size: 22px !important; }

    .content-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding-top: 16px !important;
    }

    .dashboard-grid { padding-bottom: 24px !important; }

    .panel {
        padding: 18px !important;
        border-radius: 10px !important;
    }

    .panel-head {
        display: block !important;
        margin-bottom: 14px !important;
    }

    .quick-form,
    .guest-form,
    .mini-search,
    .form-grid,
    .relation-form,
    .key-form,
    .modal-form,
    .filter-form,
    .import-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    button,
    .button {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 14px !important;
    }

    .action-cell {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: max-content !important;
        gap: 6px !important;
    }

    .action-cell button,
    .action-cell .button,
    .action-cell a.button {
        width: auto !important;
        white-space: nowrap !important;
        padding: 6px 10px !important;
    }

    .table-card,
    .settings-panel {
        margin-top: 16px !important;
        margin-bottom: 24px !important;
        padding: 18px !important;
        border-radius: 10px !important;
    }

    .table-wrap {
        overflow-x: auto !important;
        margin: 0 -18px !important;
        padding: 0 18px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 680px !important;
        font-size: 13px !important;
    }

    th,
    td {
        padding: 10px 8px !important;
    }

    .donut {
        width: 160px !important;
        margin: 12px auto 18px !important;
    }

    .donut:before { inset: 24px !important; }
    .donut strong { font-size: 26px !important; }

    .mini-info {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .mini-info div { padding: 14px !important; }
    .mini-info strong { font-size: 22px !important; }

    .alert {
        margin: 16px 14px 0 !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */
@media (max-width: 380px) {
    .stat-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .stat-card { padding: 14px 16px !important; }

    .topbar { padding: 10px 12px !important; }

    .menu-toggle {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .content-grid,
    .dashboard-grid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .table-card,
    .settings-panel {
        max-width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding: 16px !important;
    }

    .alert {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        animation-duration:1ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:1ms!important;
    }
    .motion-enter{opacity:1;transform:none}
}
/* FORCE MOBILE COMPACT FIX */
@media (max-width: 640px) {
    .app {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .stat-grid {
        display: none !important;
    }

    .content-grid,
    .dashboard-grid {
        display: block !important;
        padding: 10px !important;
    }

    .panel {
        padding: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    .panel-head {
        margin-bottom: 8px !important;
    }

    .panel h2 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .panel p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .quick-form,
    .mini-search,
    .form-grid,
    .relation-send-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mini-info {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .mini-info div {
        padding: 10px 8px !important;
        border-radius: 8px !important;
    }

    .mini-info span {
        font-size: 8px !important;
        margin-bottom: 4px !important;
        letter-spacing: .05em !important;
    }

    .mini-info strong {
        font-size: 15px !important;
    }

    .table-card,
    .settings-panel {
        margin: 10px !important;
        padding: 12px !important;
        max-width: calc(100% - 20px) !important;
    }

    .table-card h2 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .table-card p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -12px !important;
        padding: 0 12px !important;
    }

    table {
        min-width: 760px !important;
        font-size: 12px !important;
    }

    th,
    td {
        padding: 8px 6px !important;
    }

    button,
    .button {
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .modal-backdrop {
        padding: 10px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        padding: 16px !important;
        border-radius: 12px !important;
        overflow-y: auto !important;
    }

    .modal-head {
        display: grid !important;
        grid-template-columns: 1fr 36px !important;
        gap: 10px !important;
        align-items: start !important;
        margin-bottom: 12px !important;
    }

    .modal-head h2 {
        font-size: 18px !important;
        margin: 0 0 4px !important;
    }

    .modal-head p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .modal-head button,
    .modal-head .secondary {
        width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    .modal-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .modal-form label,
    .modal-form label:first-of-type {
        grid-column: auto !important;
        font-size: 12px !important;
    }

    .modal-form input,
    .modal-form select,
    .modal-form textarea {
        height: 38px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    .modal-form button {
        width: 100% !important;
    }

    .modal-delete button {
        width: 100% !important;
    }
}

/* =========================================================
   Guests Page Compact Toolbar
   Scope: guests.php only
   ========================================================= */
.guests-page{
    --guest-gap:14px;
}

.guests-page .guests-top{
    margin:24px 40px 0;
    padding:20px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
}

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

.guests-page .guests-title h2{
    margin:0;
    font-size:26px;
    line-height:1.2;
}

.guests-page .guests-title p{
    margin:6px 0 0;
    font-size:13px;
    color:var(--text-secondary);
}

.guests-page .guests-toolbar{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}

.guests-page .guests-search{
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px;
    gap:10px;
    align-items:center;
}

.guests-page .guests-toolbar button,
.guests-page .guests-toolbar .button,
.guests-page .guests-search button{
    width:100%;
    height:42px;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
}

.guests-page .guests-toolbar .secondary{
    background:var(--surface);
}

.guests-page .table-card{
    margin-top:14px;
}

.guests-page .table-card .panel-head,
.guests-page .table-tools{
    display:none !important;
}

.guests-page .table-wrap{
    margin-top:0;
}

/* Modal khusus guests */
.guests-page .modal-backdrop{
    padding:18px;
}

.guests-page .modal-card{
    width:min(560px,100%);
    padding:24px;
}

.guests-page .modal-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) 38px;
    align-items:start;
    gap:14px;
}

.guests-page .modal-head h2{
    margin:0 0 4px;
}

.guests-page .modal-head p{
    margin:0;
    font-size:13px;
}

.guests-page .modal-head .icon-button{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    border-radius:10px;
}

.guests-page .modal-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.guests-page .modal-form .wide{
    grid-column:1/-1;
}

.guests-page .modal-form button,
.guests-page .modal-delete button{
    width:100%;
}

.guests-page .import-box{
    display:grid;
    gap:12px;
}

.guests-page .import-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.guests-page .filter-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    grid-column:1/-1;
}

.guests-page .filter-actions .button{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Tabel tetap nyaman */
.guests-page .action-cell{
    min-width:max-content;
}

.guests-page .icon-action{
    min-height:34px;
}

/* Mobile */
@media(max-width:640px){
    .guests-page .guests-top{
        margin:10px 10px 0;
        padding:14px;
        border-radius:12px;
    }

    .guests-page .guests-title{
        margin-bottom:12px;
    }

    .guests-page .guests-title h2{
        font-size:20px;
    }

    .guests-page .guests-title p{
        display:none;
    }

    .guests-page .guests-toolbar{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:7px;
        margin-bottom:10px;
    }

    .guests-page .guests-toolbar button,
    .guests-page .guests-toolbar .button{
        height:38px;
        min-height:38px;
        padding:7px 5px !important;
        font-size:11px !important;
        border-radius:9px;
        line-height:1.15;
    }

    .guests-page .guests-toolbar i{
        display:none;
    }

    .guests-page .guests-search{
        grid-template-columns:minmax(0,1fr) 78px;
        gap:8px;
    }

    .guests-page .guests-search input{
        height:38px;
        font-size:13px;
    }

    .guests-page .guests-search button{
        height:38px;
        min-height:38px;
        padding:8px 10px !important;
        font-size:12px !important;
    }

    .guests-page .table-card{
        margin:10px 10px 22px !important;
        padding:10px !important;
        max-width:calc(100% - 20px) !important;
        border-radius:12px !important;
    }

    .guests-page .table-wrap{
        margin:0 -10px !important;
        padding:0 10px !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    .guests-page table{
        min-width:780px !important;
        font-size:12px !important;
    }

    .guests-page th,
    .guests-page td{
        padding:9px 7px !important;
    }

    .guests-page .modal-backdrop{
        padding:10px;
        align-items:flex-start;
        overflow-y:auto;
    }

    .guests-page .modal-card{
        width:100%;
        max-width:100%;
        max-height:calc(100vh - 20px);
        padding:16px;
        border-radius:14px;
        overflow-y:auto;
    }

    .guests-page .modal-head{
        grid-template-columns:minmax(0,1fr) 36px;
        gap:10px;
        margin-bottom:12px;
    }

    .guests-page .modal-head h2{
        font-size:18px;
    }

    .guests-page .modal-head p{
        font-size:12px;
        line-height:1.35;
    }

    .guests-page .modal-head .icon-button{
        width:36px !important;
        height:36px !important;
        min-height:36px !important;
    }

    .guests-page .modal-form{
        grid-template-columns:1fr;
        gap:10px;
    }

    .guests-page .modal-form label,
    .guests-page .modal-form .wide{
        grid-column:auto;
    }

    .guests-page .modal-form input,
    .guests-page .modal-form select{
        height:38px;
        padding:8px 10px;
        font-size:13px;
    }

    .guests-page .filter-actions,
    .guests-page .import-actions{
        grid-template-columns:1fr;
    }
}