:root{
    --maroon-950:#3e0719;
    --maroon-900:#510c24;
    --maroon-800:#66132f;
    --maroon-700:#7a1b3a;
    --maroon-600:#92244a;

    --blue-50:#f2f9ff;
    --blue-100:#e3f3ff;
    --blue-200:#c8e9ff;
    --blue-300:#9ed7f7;
    --blue-400:#72bee9;
    --blue-500:#4ba8dc;

    --bg:#eef5fa;
    --surface:#ffffff;
    --surface-soft:#f8fbfd;
    --text:#172331;
    --muted:#6c7b89;
    --line:#dfe8ee;

    --success:#16794f;
    --danger:#b42318;
    --warning:#a15c00;

    --gradient:linear-gradient(135deg,var(--maroon-800) 0%,var(--maroon-600) 48%,var(--blue-400) 100%);
    --gradient-deep:linear-gradient(165deg,var(--maroon-950) 0%,var(--maroon-800) 60%,#345f7b 120%);
    --gradient-soft:linear-gradient(135deg,#fff 0%,var(--blue-50) 62%,#faeef3 100%);

    --shadow:0 8px 28px rgba(52,76,94,.10);
    --shadow-hover:0 14px 34px rgba(52,76,94,.16);

    --radius:16px;
    --radius-sm:11px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 90% 5%, rgba(114,190,233,.16), transparent 25rem),
        radial-gradient(circle at 15% 10%, rgba(146,36,74,.08), transparent 25rem),
        var(--bg);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
body.nav-open,body.sheet-open{overflow:hidden}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid rgba(75,168,220,.28);
    outline-offset:2px;
}
input,select,textarea{
    color:var(--text);
}

.app-shell{min-height:100vh}

/* Sidebar */
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:270px;
    padding:18px 14px;
    color:#fff;
    background:var(--gradient-deep);
    display:flex;
    flex-direction:column;
    z-index:40;
    box-shadow:8px 0 30px rgba(32,9,20,.10);
}
.brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:48px;
    padding:0 8px 13px;
}
.brand-mark,.top-brand-mark{
    width:40px;
    height:40px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:800;
    background:linear-gradient(135deg,var(--blue-300),var(--blue-500));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
.brand-copy strong,.brand-copy span{display:block}
.brand-copy strong{letter-spacing:.02em}
.brand-copy span{
    color:#d8eaf5;
    font-size:12px;
    margin-top:2px;
}

.sidebar-profile{
    display:flex;
    align-items:center;
    gap:11px;
    margin:3px 4px 12px;
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
}
.sidebar-profile-copy{
    min-width:0;
}
.sidebar-profile-copy strong,.sidebar-profile-copy span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sidebar-profile-copy strong{font-size:13px}
.sidebar-profile-copy span{
    color:#c8dbe7;
    font-size:11px;
    margin-top:2px;
}

.side-nav{
    display:flex;
    flex-direction:column;
    gap:3px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:2px;
}
.side-nav a{
    min-height:42px;
    padding:9px 10px;
    border-radius:11px;
    color:#edf6fb;
    display:flex;
    align-items:center;
    gap:11px;
    font-size:13px;
    transition:.16s ease;
    position:relative;
}
.side-nav a:hover{
    background:rgba(255,255,255,.09);
    transform:translateX(2px);
}
.side-nav a.active{
    color:#fff;
    background:linear-gradient(90deg,rgba(158,215,247,.25),rgba(255,255,255,.10));
    box-shadow:inset 3px 0 0 var(--blue-300);
}
.nav-icon{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:rgba(255,255,255,.07);
    font-size:14px;
}
.side-nav a.active .nav-icon{
    background:var(--blue-100);
    color:var(--maroon-800);
}
.nav-label{
    padding:15px 10px 5px;
    color:#97bfd5;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.11em;
}
.sidebar-foot{
    margin-top:auto;
    padding:12px 8px 0;
    border-top:1px solid rgba(255,255,255,.10);
}
.signout-link{
    color:#d8e6ee;
    font-size:12px;
}
.signout-link:hover{color:#fff}

/* Avatars */
.avatar{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
    background:linear-gradient(135deg,var(--maroon-700),var(--blue-500));
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
}
.avatar-lg{
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:13px;
}

/* Main / Topbar */
.main{
    margin-left:270px;
    min-height:100vh;
}
.topbar{
    position:sticky;
    top:0;
    z-index:30;
    height:70px;
    padding:0 22px;
    display:grid;
    grid-template-columns:minmax(230px,1fr) minmax(280px,520px) minmax(230px,1fr);
    align-items:center;
    gap:18px;
    background:rgba(255,255,255,.92);
    border-bottom:1px solid rgba(197,214,225,.78);
    backdrop-filter:blur(14px);
}
.topbar-left{display:flex;align-items:center}
.mobile-menu{display:none}
.top-brand{
    display:flex;
    align-items:center;
    gap:10px;
}
.top-brand-mark{
    display:none;
    width:34px;
    height:34px;
    border-radius:11px;
}
.top-brand-copy strong,.top-brand-copy small{display:block}
.top-brand-copy strong{font-size:13px}
.top-brand-copy small{font-size:11px;color:var(--muted);margin-top:1px}

.top-search-wrap{
    width:100%;
    height:42px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 13px;
    border-radius:999px;
    background:#f0f5f8;
    border:1px solid transparent;
    transition:.16s ease;
}
.top-search-wrap:focus-within{
    background:#fff;
    border-color:var(--blue-300);
    box-shadow:0 0 0 4px rgba(75,168,220,.09);
}
.top-search-icon{color:#748491}
.top-search{
    width:100%;
    border:0;
    outline:0!important;
    background:transparent;
    box-shadow:none!important;
    padding:0;
    font-size:13px;
}
.top-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:8px;
    position:relative;
}
.top-action,.icon-btn{
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eef3f6;
    color:#334555;
    transition:.16s ease;
    position:relative;
}
.top-action:hover,.icon-btn:hover{
    background:var(--blue-100);
    color:var(--maroon-700);
}
.notification-dot{
    position:absolute;
    right:4px;
    top:4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--maroon-600);
    border:2px solid #fff;
}
.profile-pill{
    min-width:0;
    max-width:200px;
    border:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 9px 4px 4px;
    border-radius:999px;
    background:#eef3f6;
    color:var(--text);
}
.profile-pill:hover{background:var(--blue-100)}
.profile-pill-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:700;
}
.chevron{color:var(--muted)}
.profile-menu{
    display:none;
    position:absolute;
    right:0;
    top:51px;
    width:270px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 45px rgba(43,57,69,.18);
}
.profile-menu.show{display:block}
.profile-menu-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    margin-bottom:6px;
    border-bottom:1px solid var(--line);
}
.profile-menu-head strong,.profile-menu-head small{display:block}
.profile-menu-head small{color:var(--muted);margin-top:2px}
.profile-menu>a{
    display:block;
    padding:10px;
    border-radius:10px;
    font-size:13px;
}
.profile-menu>a:hover{background:#f3f7fa}
.profile-menu .danger-link{color:var(--danger)}

.content{
    width:100%;
    max-width:1500px;
    margin:0 auto;
    padding:22px;
}

/* Generic page title */
.page-head,.page-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}
.page-head h1,.page-title-row h1{
    margin:0;
    font-size:28px;
    letter-spacing:-.025em;
}
.page-head p,.page-title-row p{
    margin:4px 0 0;
    color:var(--muted);
}
.page-actions{display:flex;gap:8px}
.eyebrow{
    display:inline-block;
    margin-bottom:7px;
    color:#d7f0ff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
}
.eyebrow.dark{color:var(--maroon-700)}

/* Welcome gradient */
.welcome-banner{
    min-height:150px;
    padding:26px 28px;
    border-radius:22px;
    color:#fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(222,245,255,.30), transparent 14rem),
        var(--gradient);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
    overflow:hidden;
    position:relative;
}
.welcome-banner:after{
    content:"";
    width:180px;
    height:180px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:50%;
    position:absolute;
    right:-40px;
    bottom:-90px;
}
.welcome-banner h1{
    margin:0;
    font-size:29px;
    letter-spacing:-.03em;
}
.welcome-banner p{
    margin:7px 0 0;
    color:#eaf7ff;
    max-width:620px;
}
.btn-light{
    position:relative;
    z-index:1;
    background:#fff!important;
    color:var(--maroon-800)!important;
}

/* Dashboard social layout */
.dashboard-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:18px;
    align-items:start;
}
.dashboard-main{min-width:0}
.dashboard-right{
    min-width:0;
    position:sticky;
    top:88px;
}

.story-strip{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:4px 2px 14px;
    scrollbar-width:none;
}
.story-strip::-webkit-scrollbar{display:none}
.story-item{
    min-width:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
}
.story-ring{
    width:58px;
    height:58px;
    padding:3px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--gradient);
}
.story-ring>span{
    width:100%;
    height:100%;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--maroon-800);
    background:#fff;
    border:2px solid #fff;
    font-size:20px;
}
.story-item small{
    max-width:76px;
    color:#4a5967;
    font-size:11px;
}
.story-item:hover .story-ring>span{
    background:var(--blue-50);
}

.composer-card,.social-post,.side-panel,.empty-state,.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.composer-card{
    padding:14px;
    margin-bottom:16px;
}
.composer-row{
    display:flex;
    gap:10px;
    align-items:flex-start;
}
.composer-input{
    flex:1;
    min-height:44px;
    display:flex;
    align-items:center;
    padding:0 15px;
    border-radius:999px;
    background:#f1f5f7;
    color:#6c7a87;
    font-size:13px;
}
.composer-input:hover{background:var(--blue-100)}
.composer-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding-top:10px;
    margin-top:10px;
    border-top:1px solid var(--line);
}
.composer-actions a{
    padding:9px;
    border-radius:9px;
    text-align:center;
    color:#526270;
    font-size:12px;
    font-weight:700;
}
.composer-actions a:hover{
    color:var(--maroon-700);
    background:var(--blue-50);
}

.section-head-inline{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    padding:5px 2px 10px;
}
.section-head-inline h2{margin:0;font-size:17px}
.section-head-inline p{margin:3px 0 0;color:var(--muted);font-size:12px}
.section-head-inline a,.side-panel-head a{
    color:var(--maroon-700);
    font-size:12px;
    font-weight:700;
}

.feed-stream{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.social-post{
    overflow:hidden;
}
.post-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 15px 5px;
}
.post-author{
    min-width:0;
    flex:1;
}
.post-author strong,.post-author span{display:block}
.post-author strong{font-size:13px}
.post-author span{
    color:var(--muted);
    font-size:11px;
    margin-top:2px;
}
.post-more{
    border:0;
    width:34px;
    height:34px;
    border-radius:50%;
    background:transparent;
    color:#6b7884;
}
.post-more:hover{background:#f1f4f6}
.post-body{padding:5px 15px 11px}
.post-type{
    display:inline-flex;
    padding:4px 8px;
    margin-bottom:7px;
    border-radius:999px;
    color:var(--maroon-700);
    background:linear-gradient(90deg,#f8eaf0,var(--blue-100));
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.post-body h3{margin:2px 0 6px;font-size:16px}
.post-body p{
    margin:0;
    color:#293847;
    font-size:13px;
    line-height:1.58;
}
.post-project{
    display:inline-block;
    margin-top:10px;
    color:#366c91;
    font-size:11px;
    font-weight:700;
}
.post-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    padding:4px 8px;
}
.post-actions button{
    min-height:38px;
    border:0;
    border-radius:8px;
    color:#596876;
    background:transparent;
    font-size:12px;
}
.post-actions button:hover{background:#f2f6f8}
.post-actions button.active{
    color:var(--maroon-700);
    font-weight:800;
}
.inline-comment{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px 14px;
    border-top:1px solid var(--line);
}
.inline-comment input{
    flex:1;
    border:0;
    border-radius:999px;
    background:#f0f4f6;
    padding:10px 13px;
}
.hidden{display:none!important}

.empty-state{
    padding:28px;
    text-align:center;
}
.empty-icon{
    width:56px;
    height:56px;
    margin:0 auto 12px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--maroon-700);
    background:var(--blue-100);
    font-size:24px;
}
.empty-state strong{display:block}
.empty-state p{color:var(--muted);font-size:13px}

/* Side panels */
.side-panel{
    padding:15px;
    margin-bottom:15px;
}
.side-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:9px;
}
.side-panel-head h3{margin:0;font-size:14px}
.mini-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.mini-stats a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border-radius:12px;
    background:#f7fafc;
    border:1px solid #edf2f5;
}
.mini-stats a:hover{
    background:var(--blue-50);
    border-color:var(--blue-200);
}
.mini-stat-icon{
    width:32px;
    height:32px;
    border-radius:10px;
    display:grid;
    place-items:center;
    color:var(--maroon-700);
    background:linear-gradient(135deg,#faedf2,var(--blue-100));
}
.mini-stats strong,.mini-stats small{display:block}
.mini-stats strong{font-size:15px}
.mini-stats small{color:var(--muted);font-size:9px;margin-top:1px}
.announcement-item,.compact-action{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 5px;
    border-bottom:1px solid var(--line);
}
.announcement-item:last-child,.compact-action:last-child{border-bottom:0}
.announcement-icon,.compact-action>span{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--maroon-700);
    background:var(--blue-100);
}
.announcement-item strong,.announcement-item small,.compact-action strong,.compact-action small{display:block}
.announcement-item strong,.compact-action strong{font-size:11px}
.announcement-item small,.compact-action small{font-size:10px;color:var(--muted);margin-top:2px}
.pin-dot{margin-left:auto;color:var(--maroon-600);font-size:20px}
.compact-empty{font-size:12px}
.helper-copy{margin:0;color:var(--muted);font-size:12px;line-height:1.55}

/* Social feed page */
.social-layout{
    display:grid;
    grid-template-columns:210px minmax(0,680px) 250px;
    justify-content:center;
    gap:18px;
    align-items:start;
}
.sticky-panel{
    position:sticky;
    top:88px;
}
.social-shortcut{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 10px;
    border-radius:10px;
    color:#405261;
    font-size:12px;
    font-weight:650;
}
.social-shortcut>span{
    width:27px;
    height:27px;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:var(--maroon-700);
    background:var(--blue-100);
}
.social-shortcut:hover{background:rgba(255,255,255,.72)}

.expanded-composer{padding:15px}
.composer-title{
    display:flex;
    align-items:center;
    gap:9px;
    padding-bottom:11px;
    margin-bottom:11px;
    border-bottom:1px solid var(--line);
}
.composer-title-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--gradient);
}
.composer-title strong,.composer-title small{display:block}
.composer-title strong{font-size:13px}
.composer-title small{font-size:10px;color:var(--muted);margin-top:2px}
.social-composer-form .composer-row textarea{
    flex:1;
    min-height:78px;
    border:0;
    resize:vertical;
    background:transparent;
    padding:9px 4px;
    font-size:14px;
}
.social-composer-form .composer-row textarea:focus{
    box-shadow:none;
}
.composer-options{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:10px 0;
}
.composer-options label>span,.composer-title-field>span{
    display:block;
    color:#6b7885;
    font-size:10px;
    font-weight:700;
    margin-bottom:5px;
}
.composer-title-field{display:block;margin-bottom:10px}
.composer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:10px;
    border-top:1px solid var(--line);
}
.composer-tools{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}
.composer-tools button{
    border:0;
    border-radius:9px;
    padding:8px 10px;
    background:#f1f5f7;
    color:#536371;
    font-size:10px;
}
.composer-tools button:hover{
    color:var(--maroon-700);
    background:var(--blue-100);
}
.composer-submit{min-width:110px}

.feed-filter-bar{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:0 0 12px;
    scrollbar-width:none;
}
.feed-filter-bar::-webkit-scrollbar{display:none}
.feed-filter{
    white-space:nowrap;
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 12px;
    background:#fff;
    color:#5a6874;
    font-size:11px;
}
.feed-filter:hover{border-color:var(--blue-300)}
.feed-filter.active{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(90deg,var(--maroon-700),var(--maroon-600));
}

/* Generic cards and tables */
.card{
    margin-bottom:18px;
    padding:18px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.card:hover{border-color:#d5e2ea}
.card h2{margin:0 0 14px;font-size:17px}
.card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.two-col{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:18px;
}
.three-col{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    margin-bottom:18px;
}
.stat{
    padding:16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
}
.stat span{display:block;color:var(--muted);font-size:10px}
.stat strong{display:block;margin-top:7px;font-size:24px}

.table-card{
    overflow-x:auto;
    padding:0;
}
table{
    width:100%;
    border-collapse:collapse;
    min-width:780px;
}
th,td{
    padding:13px 14px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:12px;
}
th{
    color:#687786;
    background:linear-gradient(180deg,#fbfdfe,#f5f9fb);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}
tbody tr{transition:.14s ease}
tbody tr:hover{background:var(--blue-50)}
td small{display:block;color:var(--muted);margin-top:2px}

/* Forms */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.stack{display:flex;flex-direction:column;gap:12px}
.full{grid-column:1/-1}
label{
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#425462;
    font-size:11px;
    font-weight:700;
}
label small{
    color:var(--muted);
    font-size:10px;
    font-weight:400;
    line-height:1.4;
}
input,select,textarea{
    width:100%;
    border:1px solid #d7e1e8;
    border-radius:10px;
    background:#fff;
    padding:10px 11px;
    outline:0;
    font-size:12px;
    transition:.14s ease;
}
input:hover,select:hover,textarea:hover{border-color:#bdd2df}
input:focus,select:focus,textarea:focus{
    border-color:var(--blue-400);
    box-shadow:0 0 0 3px rgba(75,168,220,.10);
}
textarea{resize:vertical}

.btn{
    min-height:39px;
    border:1px solid transparent;
    border-radius:10px;
    padding:9px 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#edf2f5;
    color:#40515f;
    font-size:12px;
    font-weight:800;
    transition:.15s ease;
}
.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(60,80,95,.10);
}
.btn.primary{
    color:#fff;
    background:linear-gradient(100deg,var(--maroon-700),var(--maroon-600),var(--blue-500));
}
.badge{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    color:var(--maroon-700);
    background:linear-gradient(90deg,#f7e8ee,var(--blue-100));
    font-size:9px;
    font-weight:800;
    text-transform:capitalize;
    white-space:nowrap;
}
.notice,.proof-box{
    padding:11px 12px;
    border:1px dashed var(--blue-300);
    border-radius:11px;
    color:#546572;
    background:var(--blue-50);
    font-size:11px;
}
.flash{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:11px 13px;
    margin-bottom:14px;
    border:1px solid #cfe9dc;
    border-radius:11px;
    color:#235e45;
    background:#eef9f3;
    font-size:12px;
}
.flash>span{
    width:21px;
    height:21px;
    flex:0 0 21px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    background:var(--success);
    font-weight:800;
}
.flash.error{
    color:var(--danger);
    border-color:#f3d2cd;
    background:#fff2f0;
}
.flash.error>span{background:var(--danger)}
.muted{color:var(--muted)}
.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:13px;
    border-top:1px solid var(--line);
}
.empty-cell{text-align:center;color:var(--muted);padding:28px!important}

/* Login */
.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 85% 15%, rgba(158,215,247,.38), transparent 28rem),
        linear-gradient(135deg,var(--maroon-950),var(--maroon-700) 45%,#4e94be);
}
.login-shell{
    width:min(940px,100%);
    display:grid;
    grid-template-columns:1.15fr .85fr;
    overflow:hidden;
    border-radius:24px;
    background:rgba(255,255,255,.97);
    box-shadow:0 28px 80px rgba(32,9,20,.26);
}
.login-hero{
    min-height:520px;
    padding:50px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:
        radial-gradient(circle at 90% 0%, rgba(181,226,250,.24), transparent 18rem),
        var(--gradient-deep);
}
.login-logo{
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    border-radius:18px;
    margin-bottom:24px;
    background:linear-gradient(135deg,var(--blue-300),var(--blue-500));
    font-size:24px;
    font-weight:900;
}
.login-hero h1{
    margin:0;
    font-size:36px;
    letter-spacing:-.04em;
}
.login-hero p{
    max-width:520px;
    color:#dfedf5;
    line-height:1.6;
}
.login-feature-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:18px;
}
.login-feature-row span{
    padding:8px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.10);
    font-size:11px;
}
.login-card{
    padding:46px 38px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#fff;
}
.login-card h2{margin:0;font-size:26px}
.login-card>p{color:var(--muted);margin:6px 0 22px}
.login-mobile-brand{display:none}
.login-submit{width:100%;margin-top:4px}
.login-footnote{
    display:block;
    margin-top:20px;
    text-align:center;
    color:var(--muted);
}

/* Mobile bottom nav */
.bottom-nav{display:none}
.quick-sheet{display:none}
.sidebar-overlay{display:none}

/* Quick sheet */
.quick-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px;
}
.quick-grid>a{
    min-height:86px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
}
.quick-grid>a:hover{background:var(--blue-50)}
.quick-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--maroon-700);
    background:linear-gradient(135deg,#f7e9ef,var(--blue-100));
}
.quick-grid strong,.quick-grid small{display:block}
.quick-grid strong{margin-top:8px;font-size:12px}
.quick-grid small{margin-top:2px;color:var(--muted);font-size:10px}

/* Responsive */
@media(max-width:1200px){
    .social-layout{grid-template-columns:minmax(0,680px) 250px}
    .social-left{display:none}
    .stats-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
    .dashboard-layout{grid-template-columns:1fr}
    .dashboard-right{
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
    }
    .social-layout{grid-template-columns:minmax(0,680px)}
    .social-right{display:none}
}
@media(max-width:820px){
    .sidebar{
        width:min(310px,86vw);
        transform:translateX(-105%);
        transition:transform .20s ease;
        box-shadow:16px 0 40px rgba(32,9,20,.24);
    }
    .sidebar.open{transform:translateX(0)}
    .sidebar-overlay{
        position:fixed;
        inset:0;
        z-index:35;
        background:rgba(25,32,38,.46);
        backdrop-filter:blur(2px);
    }
    .sidebar-overlay.show{display:block}

    .main{margin-left:0}
    .topbar{
        height:62px;
        padding:0 12px;
        grid-template-columns:auto 1fr auto;
        gap:10px;
    }
    .mobile-menu{display:grid}
    .top-brand-mark{display:grid}
    .top-brand-copy{display:none}
    .top-search-wrap{
        height:39px;
        min-width:0;
    }
    .top-actions{gap:5px}
    .top-actions>.top-action:first-child{display:none}
    .profile-pill{
        padding:2px;
        background:transparent;
    }
    .profile-pill-name,.chevron{display:none}
    .profile-menu{
        position:fixed;
        right:12px;
        top:68px;
        width:min(290px,calc(100vw - 24px));
    }

    .content{
        padding:14px 12px 88px;
    }
    .page-head,.page-title-row{
        align-items:flex-start;
        flex-wrap:wrap;
    }
    .page-head h1,.page-title-row h1{font-size:24px}
    .page-actions{width:100%}
    .page-actions .btn{width:100%}

    .welcome-banner{
        min-height:132px;
        padding:20px;
        border-radius:18px;
        align-items:flex-start;
        flex-direction:column;
    }
    .welcome-banner h1{font-size:25px}
    .welcome-banner p{font-size:12px}
    .welcome-banner .btn{display:none}

    .dashboard-right{
        display:block;
    }
    .mini-stats{grid-template-columns:1fr 1fr}
    .composer-actions a span{display:none}

    .social-layout{display:block}
    .social-left,.social-right{display:none}
    .composer-options{grid-template-columns:1fr}
    .composer-bottom{align-items:stretch;flex-direction:column}
    .composer-submit{width:100%}

    .two-col,.three-col,.form-grid{
        grid-template-columns:1fr;
    }
    .full{grid-column:1}

    .form-actions{
        flex-direction:column-reverse;
    }
    .form-actions .btn{width:100%}

    .bottom-nav{
        position:fixed;
        inset:auto 0 0 0;
        z-index:31;
        min-height:68px;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        padding:4px 4px calc(4px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.95);
        border-top:1px solid var(--line);
        backdrop-filter:blur(14px);
    }
    .bottom-nav>a,.bottom-nav>button{
        min-width:0;
        border:0;
        border-radius:11px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        background:transparent;
        color:#647381;
    }
    .bottom-nav>a.active{
        color:var(--maroon-700);
        background:linear-gradient(180deg,#faedf2,var(--blue-50));
    }
    .bottom-icon{
        font-size:18px;
        line-height:1;
    }
    .bottom-nav small{font-size:9px}
    .create-fab{
        color:#fff!important;
        background:var(--gradient)!important;
        margin:1px 5px;
        box-shadow:0 7px 18px rgba(122,27,58,.20);
    }
    .create-fab>span{font-size:20px}

    .quick-sheet{
        position:fixed;
        inset:0;
        z-index:60;
        align-items:flex-end;
        background:rgba(31,38,44,.46);
        backdrop-filter:blur(3px);
    }
    .quick-sheet.show{display:flex}
    .sheet-card{
        width:100%;
        padding:10px 14px calc(18px + env(safe-area-inset-bottom));
        border-radius:22px 22px 0 0;
        background:#fff;
    }
    .sheet-handle{
        width:42px;
        height:4px;
        margin:0 auto 11px;
        border-radius:999px;
        background:#cad5dc;
    }
    .sheet-head{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:12px;
    }
    .sheet-head strong,.sheet-head small{display:block}
    .sheet-head small{color:var(--muted);font-size:10px;margin-top:2px}
    .sheet-head button{
        width:36px;
        height:36px;
        border:0;
        border-radius:50%;
        background:#eef3f6;
        font-size:22px;
    }

    .stats-grid{grid-template-columns:repeat(2,1fr)}

    .login-page{
        display:block;
        min-height:100vh;
        padding:0;
        background:#fff;
    }
    .login-shell{
        display:block;
        width:100%;
        min-height:100vh;
        border-radius:0;
        box-shadow:none;
    }
    .login-hero{display:none}
    .login-card{
        min-height:100vh;
        padding:28px 20px;
        justify-content:center;
    }
    .login-mobile-brand{
        display:flex;
        align-items:center;
        gap:10px;
        margin-bottom:30px;
    }
    .login-mobile-brand strong,.login-mobile-brand span{display:block}
    .login-mobile-brand span{font-size:11px;color:var(--muted)}
}
@media(max-width:460px){
    .top-search-wrap{
        padding:0 10px;
    }
    .top-search{font-size:12px}
    .story-item{min-width:64px}
    .story-ring{width:52px;height:52px}
    .mini-stats{grid-template-columns:1fr}
    .post-actions button span{display:none}
    .post-actions button{font-size:15px}
    .composer-actions a{font-size:10px}
}


/* ===== All Phases Preview additions ===== */
.phase-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-bottom:18px}
.phase-strip a{display:flex;align-items:center;gap:8px;padding:11px;border-radius:13px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:.15s}
.phase-strip a:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--blue-300)}
.phase-strip strong{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--gradient);font-size:11px}
.phase-strip span{font-size:11px;font-weight:800}

.status-chip{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800}
.status-chip.off{background:#f8e8ee;color:var(--maroon-700)}
.status-chip.work{background:var(--blue-100);color:#356f91}
.status-chip.default{background:#f0f3f5;color:#6b7884}

.rule-list{display:flex;flex-direction:column;gap:9px}
.rule-list>div{padding:11px;border:1px solid var(--line);border-radius:11px;background:#f8fbfd}
.rule-list strong,.rule-list span{display:block}
.rule-list strong{font-size:12px}
.rule-list span{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}

.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.review-card{margin:0}
.review-card-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}
.review-card-head strong,.review-card-head span{display:block}
.review-card-head>div>span{font-size:10px;color:var(--muted);margin-top:2px}
.review-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
.review-metrics>div{padding:10px;border-radius:11px;background:#f6fafc;border:1px solid #edf2f5}
.review-metrics small,.review-metrics strong{display:block}
.review-metrics small{color:var(--muted);font-size:9px}
.review-metrics strong{font-size:12px;margin-top:3px}
.dual{justify-content:space-between}
.danger-soft{color:#a13d45;background:#fff0f1;border-color:#f3d3d6}
.empty-state.compact{padding:18px}

.approval-card{margin-bottom:12px}
.approval-title{display:flex;justify-content:space-between;gap:10px}
.approval-title strong,.approval-title span{display:block}
.approval-title>div>span{font-size:10px;color:var(--muted);margin-top:3px}
.approval-card p{font-size:12px;line-height:1.55;color:#384956}
.approval-form{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.approval-details{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:11px;color:#4e6070}

.row-actions{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.mini-link{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:8px;background:var(--blue-100);color:#376a88;font-size:9px;font-weight:800}
.button-link{border:0;cursor:pointer}

.scenario-card{display:flex;gap:11px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--gradient-soft)}
.scenario-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--gradient);font-size:11px;font-weight:900}
.scenario-card strong,.scenario-card p{display:block}
.scenario-card p{margin:4px 0 0;font-size:11px;color:var(--muted);line-height:1.5}

.kanban-lite{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:5px}
.kanban-column{min-height:220px;padding:10px;border-radius:14px;background:rgba(255,255,255,.52);border:1px solid var(--line)}
.kanban-head{padding:4px 4px 9px;font-size:11px}
.task-card{padding:12px;margin-bottom:9px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(52,76,94,.07)}
.task-card h3{margin:8px 0 5px;font-size:12px}
.task-card p{margin:0 0 7px;font-size:10px;color:#566775;line-height:1.45}
.task-card small{font-size:9px;color:var(--muted)}
.task-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.priority{font-size:8px;text-transform:uppercase;font-weight:900}
.priority.urgent{color:#b42318}.priority.high{color:#9a5c00}.priority.normal{color:#4f6b7c}.priority.low{color:#6f7b83}
.inline-status{display:flex;gap:6px;margin-top:9px}
.inline-status select{padding:6px;font-size:9px}
.btn.tiny{min-height:28px;padding:5px 8px;font-size:9px}

.timeline-example{display:flex;flex-direction:column;gap:8px}
.timeline-example>div{position:relative;padding:10px 10px 10px 18px;border-left:2px solid var(--blue-300);background:#f8fbfd;border-radius:0 10px 10px 0}
.timeline-example b,.timeline-example span{display:block}
.timeline-example b{font-size:11px}.timeline-example span{font-size:10px;color:var(--muted);margin-top:2px}

.operations-row,.document-row,.notification-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.operations-row:last-child,.document-row:last-child,.notification-row:last-child{border-bottom:0}
.ops-icon,.doc-type,.notification-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;color:var(--maroon-700);background:linear-gradient(135deg,#f7e9ef,var(--blue-100));font-weight:900;font-size:10px}
.ops-main,.doc-main{flex:1;min-width:0}
.ops-main strong,.ops-main small,.ops-main span,.doc-main strong,.doc-main small,.doc-main span{display:block}
.ops-main small,.doc-main small{font-size:9px;color:var(--muted);margin-top:2px}
.ops-main span,.doc-main span{font-size:10px;color:#526372;margin-top:4px}

.attachment-pill{display:inline-flex;margin-top:10px;padding:6px 9px;border-radius:9px;background:var(--blue-50);color:#376c8c;font-size:10px;font-weight:800}
.composer-proof{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}

.message-layout{display:grid;grid-template-columns:320px minmax(0,720px);gap:16px;justify-content:center;align-items:start}
.message-compose{position:sticky;top:88px}
.message-thread{min-height:520px}
.message-bubble-wrap{display:flex;margin-bottom:10px}
.message-bubble-wrap.mine{justify-content:flex-end}
.message-bubble{max-width:75%;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#f1f5f7;border:1px solid var(--line)}
.message-bubble-wrap.mine .message-bubble{color:#fff;background:linear-gradient(135deg,var(--maroon-700),var(--blue-500));border-color:transparent;border-radius:14px 14px 4px 14px}
.message-bubble strong{font-size:10px}
.message-bubble p{margin:4px 0;font-size:12px;line-height:1.45}
.message-bubble small{font-size:8px;opacity:.75}

.notification-row{position:relative}
.notification-row>div{flex:1}
.notification-row strong,.notification-row p,.notification-row small{display:block}
.notification-row p{margin:3px 0;font-size:11px;color:#526371}
.notification-row small{font-size:9px;color:var(--muted)}
.notification-row>i{width:8px;height:8px;border-radius:50%;background:var(--maroon-600)}

.module-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.module-card{display:flex;gap:12px;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:.15s}
.module-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.module-card>span{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--gradient);font-weight:900}
.module-card strong,.module-card p,.module-card small{display:block}
.module-card p{margin:4px 0;font-size:10px;color:var(--muted);line-height:1.45}
.module-card small{font-size:9px;color:#5c7181}
.checkbox-line{flex-direction:row;align-items:center;gap:8px}
.checkbox-line input{width:auto}

.split-visual{display:grid;grid-template-columns:3fr 2fr;overflow:hidden;border-radius:14px;min-height:110px}
.split-visual>div{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.split-visual>div:first-child{background:linear-gradient(135deg,var(--maroon-800),var(--maroon-600))}
.split-visual>div:last-child{background:linear-gradient(135deg,var(--blue-500),var(--blue-300))}
.split-visual span{font-size:25px;font-weight:900}
.split-visual small{font-size:10px}
.period-tabs{display:flex;gap:9px;overflow-x:auto}
.period-tabs a{min-width:170px;padding:10px;border-radius:11px;border:1px solid var(--line);background:#f9fbfc}
.period-tabs a.active{border-color:var(--maroon-600);box-shadow:inset 0 0 0 1px var(--maroon-600)}
.period-tabs strong,.period-tabs span,.period-tabs small{display:block}
.period-tabs strong{font-size:11px}
.period-tabs span,.period-tabs small{font-size:9px;color:var(--muted);margin-top:2px}
.adjustment-row td{background:#fafcfd}
.adjustment-form{display:grid;grid-template-columns:180px 1fr 1.3fr 150px auto;gap:7px;align-items:center}
.inline-form{display:inline}

.payslip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.payslip-card{padding:17px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.payslip-head{display:flex;justify-content:space-between;gap:10px}
.payslip-head strong,.payslip-head span{display:block}
.payslip-head>div>span{font-size:9px;color:var(--muted)}
.payslip-card h3{margin:18px 0 2px}
.payslip-card>small{font-size:9px;color:var(--muted)}
.payslip-net{margin:18px 0;padding:15px;border-radius:13px;background:var(--gradient);color:#fff}
.payslip-net span,.payslip-net strong{display:block}
.payslip-net span{font-size:9px}
.payslip-net strong{font-size:24px;margin-top:2px}
.payslip-split{display:grid;grid-template-columns:3fr 2fr;gap:8px}
.payslip-split>div{padding:10px;border-radius:10px;background:#f5f9fb}
.payslip-split span,.payslip-split strong{display:block}
.payslip-split span{font-size:9px;color:var(--muted)}
.payslip-split strong{font-size:12px;margin-top:2px}

.inline-create{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:10px}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.role-card{display:flex;gap:11px;margin:0}
.role-avatar{width:43px;height:43px;flex:0 0 43px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--gradient);font-size:11px;font-weight:900}
.role-card h3{margin:0;font-size:13px}
.role-card p{margin:3px 0 8px;font-size:10px;color:var(--muted)}
.role-counts{display:flex;gap:6px}
.role-counts span{padding:4px 6px;border-radius:7px;background:#f1f5f7;font-size:8px}
.permission-cloud{display:flex;flex-wrap:wrap;gap:6px}
.permission-cloud span{padding:6px 8px;border-radius:999px;background:var(--blue-50);color:#416f8a;font-size:9px}

.review-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.review-summary-card{padding:15px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.review-summary-card strong{display:block;font-size:12px}
.review-summary-card p{margin:4px 0 0;font-size:10px;color:var(--muted);line-height:1.45}
.review-summary-card.fixed{border-top:3px solid var(--maroon-700)}
.review-summary-card.config{border-top:3px solid var(--blue-500)}
.review-summary-card.dropdown{border-top:3px solid #5b8e72}
.review-summary-card.manual{border-top:3px solid #9b7f4d}

@media(max-width:1200px){
.phase-strip{grid-template-columns:repeat(4,1fr)}
.module-cards{grid-template-columns:repeat(2,1fr)}
.payslip-grid{grid-template-columns:repeat(2,1fr)}
.role-grid{grid-template-columns:repeat(2,1fr)}
.review-summary{grid-template-columns:repeat(2,1fr)}
.adjustment-form{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
.review-grid{grid-template-columns:1fr}
.message-layout{grid-template-columns:1fr}.message-compose{position:static}
.module-cards{grid-template-columns:1fr}
.payslip-grid{grid-template-columns:1fr}
.role-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
.phase-strip{grid-template-columns:repeat(2,1fr)}
.approval-form{grid-template-columns:1fr 1fr}.approval-form input{grid-column:1/-1}
.composer-proof{grid-template-columns:1fr}
.review-summary{grid-template-columns:1fr}
.adjustment-form{grid-template-columns:1fr}
}

/* ===== Phase 3: stronger app shell, modals, logo, feed photos ===== */
body.modal-open{overflow:hidden}
.brand-logo-mark{font-size:10px;letter-spacing:-.02em;font-weight:900}
.brand-mark.brand-logo-mark,.top-brand-mark.brand-logo-mark{background:linear-gradient(135deg,#fff 0%,var(--blue-200) 45%,var(--blue-500) 100%);color:var(--maroon-800);border:1px solid rgba(255,255,255,.55)}
.brand-copy strong{font-size:15px;letter-spacing:.06em}.brand-copy span{font-size:10px}.top-brand-copy strong{letter-spacing:.06em}

.modal{display:none;position:fixed;inset:0;z-index:90;padding:22px;background:rgba(21,28,35,.55);backdrop-filter:blur(5px);overflow-y:auto;align-items:flex-start;justify-content:center}
.modal.show{display:flex}
.modal-dialog{width:min(720px,100%);margin:auto;background:#fff;border:1px solid rgba(255,255,255,.6);border-radius:20px;box-shadow:0 30px 90px rgba(24,30,36,.28);overflow:hidden;animation:modalIn .16s ease-out}
.modal-lg{width:min(980px,100%)}.modal-md{width:min(720px,100%)}.modal-sm{width:min(470px,100%)}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#fff,var(--blue-50))}
.modal-head h2{margin:0;font-size:20px}.modal-head p{margin:4px 0 0;color:var(--muted);font-size:11px}
.modal-close{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:50%;background:#eef3f6;font-size:23px;line-height:1;color:#536270}.modal-close:hover{background:#f8e9ef;color:var(--maroon-700)}
.modal-body{padding:18px 20px}.form-section-title{padding:9px 0 4px;margin-top:3px;border-bottom:1px solid var(--line);font-size:10px;font-weight:900;letter-spacing:.09em;color:var(--maroon-700);text-transform:uppercase}
.credential-card{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f7fafc}.credential-card small,.credential-card strong{display:block}.credential-card small{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:800}.credential-card strong{margin-top:3px;font-size:15px;word-break:break-all}
.single-login-shell{grid-template-columns:1fr;max-width:500px}.single-login-shell .login-card{min-height:460px}.brand-logo-lockup{display:flex!important}

.feed-photo-picker{display:flex!important;flex-direction:row;align-items:center;gap:9px;margin:10px 0;padding:11px 13px;border:1px dashed var(--blue-300);border-radius:12px;background:var(--blue-50);cursor:pointer}.feed-photo-picker input{display:none}.feed-photo-picker span{font-weight:800;color:var(--maroon-700)}.feed-photo-picker small{margin-left:auto}
.feed-photo-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:8px 0 12px}.feed-photo-preview-item{aspect-ratio:1;border-radius:10px;overflow:hidden;background:#edf2f5}.feed-photo-preview-item img{width:100%;height:100%;object-fit:cover;display:block}
.feed-photo-grid{display:grid;gap:2px;background:#e7edf1;overflow:hidden;max-height:560px}.feed-photo-item{position:relative;border:0;padding:0;background:#dbe4e9;overflow:hidden;min-height:180px}.feed-photo-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease}.feed-photo-item:hover img{transform:scale(1.015)}
.feed-photo-grid.photos-1{grid-template-columns:1fr}.feed-photo-grid.photos-1 .feed-photo-item{max-height:560px}
.feed-photo-grid.photos-2{grid-template-columns:1fr 1fr}.feed-photo-grid.photos-3{grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr}.feed-photo-grid.photos-3 .feed-photo-item:first-child{grid-row:1/3}
.feed-photo-grid.photos-4,.feed-photo-grid.photos-5,.feed-photo-grid.photos-many{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,230px)}
.feed-photo-grid.photos-5 .feed-photo-item:first-child,.feed-photo-grid.photos-many .feed-photo-item:first-child{grid-row:1/3}.feed-photo-grid.photos-5,.feed-photo-grid.photos-many{grid-template-columns:1.15fr .85fr .85fr}
.feed-photo-grid.photos-5 .feed-photo-item:nth-child(n+6),.feed-photo-grid.photos-many .feed-photo-item:nth-child(n+6){display:none}
.more-photos{position:absolute;inset:0;display:grid;place-items:center;background:rgba(24,31,37,.52);color:#fff;font-size:28px;font-weight:900}
.photo-lightbox{display:none;position:fixed;inset:0;z-index:120;background:rgba(12,16,20,.92);align-items:center;justify-content:center;padding:30px}.photo-lightbox.show{display:flex}.photo-lightbox img{max-width:min(1200px,95vw);max-height:90vh;object-fit:contain;border-radius:10px}.photo-lightbox-close{position:fixed;top:16px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;font-size:28px}

.workflow-strip{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding:12px;border-radius:13px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.workflow-strip span{padding:6px 9px;border-radius:999px;background:var(--blue-50);color:#49677b;font-size:9px;font-weight:800}.workflow-strip b{color:var(--maroon-600)}
.holiday-rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.holiday-rule-card{margin:0}.holiday-rule-card>strong{display:block;margin-bottom:10px}.holiday-rule-card>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:10px}.holiday-rule-card>small{display:block;margin-top:9px;color:var(--muted);font-size:9px}

@media(max-width:820px){
 .modal{padding:0;align-items:flex-end}.modal-dialog,.modal-lg,.modal-md,.modal-sm{width:100%;max-height:94vh;margin:auto 0 0;border-radius:22px 22px 0 0;overflow-y:auto}.modal-head{position:sticky;top:0;z-index:2}.modal-body{padding:15px 14px calc(22px + env(safe-area-inset-bottom))}
 .feed-photo-preview{grid-template-columns:repeat(4,1fr)}
 .feed-photo-grid.photos-4,.feed-photo-grid.photos-5,.feed-photo-grid.photos-many{grid-template-rows:repeat(2,165px)}
 .holiday-rule-grid{grid-template-columns:1fr}
}
@media(max-width:520px){.feed-photo-preview{grid-template-columns:repeat(3,1fr)}.feed-photo-grid.photos-2 .feed-photo-item{min-height:160px}.feed-photo-grid.photos-3{grid-template-columns:1fr 1fr;grid-template-rows:210px 150px}.feed-photo-grid.photos-3 .feed-photo-item:first-child{grid-column:1/3;grid-row:auto}.feed-photo-grid.photos-4,.feed-photo-grid.photos-5,.feed-photo-grid.photos-many{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,145px)}.feed-photo-grid.photos-5 .feed-photo-item:first-child,.feed-photo-grid.photos-many .feed-photo-item:first-child{grid-column:1/3;grid-row:auto}}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}.permission-check{display:flex;flex-direction:row;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line);border-radius:11px;background:#f9fbfc}.permission-check input{width:auto;margin-top:2px}.permission-check strong,.permission-check small{display:block}.permission-check strong{font-size:10px;color:#334b5c}.permission-check small{font-size:9px;color:var(--muted);margin-top:2px;line-height:1.35}.role-card-body{min-width:0;flex:1}.role-card-body>.mini-link{margin-top:7px}
.payslip-breakdown{margin-top:15px;border:1px solid var(--line);border-radius:11px;overflow:hidden}.payslip-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:10px}.payslip-breakdown>div:last-child{border-bottom:0}.payslip-breakdown span{color:var(--muted)}.payslip-breakdown .earning strong{color:#16794f}.payslip-breakdown .deduction strong{color:#b42318}.qualifying-meter{margin-top:10px;padding:10px;border-radius:11px;background:var(--blue-50);border:1px solid var(--blue-100)}.qualifying-meter span,.qualifying-meter strong,.qualifying-meter small{display:block}.qualifying-meter span{font-size:9px;color:var(--muted)}.qualifying-meter strong{font-size:12px;margin-top:2px}.qualifying-meter small{font-size:9px;color:#8a4c52;margin-top:3px}
@media(max-width:820px){.permission-grid{grid-template-columns:1fr}}
.brand-logo-image{overflow:hidden;background:#fff!important;padding:3px!important}.brand-logo-image img{width:100%;height:100%;object-fit:contain;display:block}.login-logo.brand-logo-image{padding:8px!important}.top-brand-mark.brand-logo-image{display:none}@media(max-width:820px){.top-brand-mark.brand-logo-image{display:grid}}

.error-page-card{
    max-width:900px;
    margin:7vh auto 0;
    padding:28px;
    display:grid;
    grid-template-columns:150px 1fr;
    gap:24px;
    align-items:center;
    border-radius:20px;
    border:1px solid var(--line);
    background:#fff;
    box-shadow:var(--shadow);
}
.error-code{
    width:130px;height:130px;border-radius:28px;display:grid;place-items:center;
    color:#fff;font-size:42px;font-weight:900;background:var(--gradient);
}
.error-page-card h1{margin:0 0 8px;font-size:27px}
.error-page-card p{line-height:1.55}
.error-detail{margin:15px 0;word-break:break-word}
@media(max-width:700px){
    .error-page-card{grid-template-columns:1fr;margin-top:2vh}
    .error-code{width:90px;height:90px;border-radius:20px;font-size:30px}
}


/* ===== CARLREM logo containment hotfix ===== */
.brand-logo-image{
    overflow:hidden !important;
    position:relative;
    flex:0 0 auto;
}
.brand-logo-image > img,
img.carlrem-ui-logo{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
}
.brand .brand-logo-image{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
}
.top-brand .brand-logo-image{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
}
.login-logo.brand-logo-image{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;
    min-height:76px !important;
}
.login-mobile-brand .brand-logo-image{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
}
@media(min-width:821px){
    .top-brand-mark.brand-logo-image{display:none !important;}
}