:root {
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --accent:#7c3aed;
    --soft:#f3f6fb;
    --card:#ffffff;
    --border:#e5e7eb;
    --text:#1f2937;
    --muted:#6b7280;
    --sidebar:#0b1220;
    --sidebar-2:#111827;
    --shadow:0 14px 42px rgba(15,23,42,.08);
    --radius:22px;
}
* { box-sizing:border-box; }
html { min-height:100%; }
body {
    min-height:100vh;
    margin:0;
    background:var(--soft);
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
a { text-decoration:none; }
.app-shell { display:flex; min-height:100vh; }
.sidebar {
    width:292px;
    background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
    color:#fff;
    padding:18px 14px;
    position:fixed;
    inset:0 auto 0 0;
    overflow-y:auto;
    z-index:1045;
    box-shadow:10px 0 35px rgba(15,23,42,.18);
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:999px; }
.sidebar-overlay { display:none; }
.brand-box {
    display:flex;
    gap:12px;
    align-items:center;
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:14px;
}
.brand-icon,.login-logo {
    width:48px;
    height:48px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    border-radius:17px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:24px;
    box-shadow:0 10px 25px rgba(37,99,235,.35);
    flex:0 0 auto;
}
.brand-title { font-size:18px; font-weight:850; letter-spacing:.01em; }
.brand-text small { color:#a5b4fc; }
.sidebar-close {
    margin-left:auto;
    color:#e5e7eb;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
}
.menu-list { padding:2px 4px 18px; }
.menu-section { margin-bottom:8px; }
.menu-section-toggle {
    width:100%;
    border:0;
    background:rgba(255,255,255,.06);
    color:#f9fafb;
    border-radius:15px;
    padding:12px 12px;
    font-weight:750;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:.2s ease;
    text-align:left;
}
.menu-section-toggle span { display:flex; align-items:center; gap:10px; }
.menu-section-toggle i:first-child { color:#93c5fd; font-size:18px; width:22px; text-align:center; }
.menu-section-toggle:hover,.menu-section-toggle.active { background:rgba(37,99,235,.30); color:#fff; }
.menu-section-toggle .chevron { transition:.2s ease; color:#cbd5e1; }
.menu-section-toggle:not(.collapsed) .chevron { transform:rotate(180deg); }
.submenu-list { padding:8px 0 3px 8px; border-left:1px solid rgba(255,255,255,.10); margin-left:15px; }
.menu-link {
    display:flex;
    align-items:center;
    gap:11px;
    color:#d1d5db;
    text-decoration:none;
    padding:11px 12px;
    border-radius:14px;
    margin-bottom:5px;
    transition:.2s ease;
    min-height:44px;
}
.menu-link:hover { color:#fff; background:rgba(255,255,255,.10); transform:translateX(2px); }
.menu-link.active { color:#fff; background:linear-gradient(135deg,#2563eb,#7c3aed); box-shadow:0 12px 28px rgba(37,99,235,.25); }
.menu-link i { width:22px; text-align:center; color:#93c5fd; font-size:17px; }
.menu-link.active i { color:#fff; }
.submenu-link { font-size:14px; padding-left:11px; }
.main-content { margin-left:292px; flex:1; min-width:0; }
.topbar {
    height:78px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 26px;
    position:sticky;
    top:0;
    z-index:1000;
}
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.page-title { font-weight:850; letter-spacing:-.02em; }
.sidebar-toggle {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 7px 18px rgba(15,23,42,.06);
    color:var(--primary);
    flex:0 0 auto;
}
.sidebar-toggle i { font-size:24px; }
.user-box { display:flex; align-items:center; gap:12px; min-width:0; }
.user-avatar {
    width:40px;
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#2563eb;
    background:#eff6ff;
    font-size:22px;
    flex:0 0 auto;
}
.user-info { line-height:1.15; max-width:280px; }
.user-info strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.user-info small { color:#6b7280; }
.content-area { padding:24px; }
.alert-modern { border:0; border-radius:18px; box-shadow:0 10px 28px rgba(15,23,42,.06); display:flex; align-items:center; gap:10px; }
.product-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:var(--shadow);
}
.card-header-flex { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.card-header-flex h5 { margin:0; font-weight:850; letter-spacing:-.01em; }
.card-header-flex small { color:var(--muted); }
.metric-card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    min-height:132px;
    position:relative;
    overflow:hidden;
}
.metric-card:after {
    content:"";
    position:absolute;
    right:-22px;
    top:-22px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
}
.metric-card i { color:#2563eb; font-size:28px; position:relative; z-index:1; }
.metric-card span { color:#6b7280; margin-top:10px; position:relative; z-index:1; }
.metric-card strong { font-size:28px; font-weight:850; position:relative; z-index:1; }
.metric-card .small-text { font-size:16px; line-height:1.25; }
.table { margin-bottom:0; }
.table thead th { background:#f9fafb; color:#374151; font-size:13px; white-space:nowrap; }
.table tbody td { vertical-align:middle; }
.btn,.form-control,.form-select,.input-group-text { border-radius:13px; }
.btn { min-height:40px; font-weight:650; }
.btn-sm { min-height:34px; }
.form-control,.form-select { min-height:44px; border-color:#dbe1ea; }
.form-control:focus,.form-select:focus { border-color:#93c5fd; box-shadow:0 0 0 .22rem rgba(37,99,235,.10); }
.form-label { font-weight:700; color:#374151; }
.form-check-input { width:1.1em; height:1.1em; }
.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at top,#dbeafe,#f4f7fb 42%,#fff);
    padding:18px;
}
.login-card {
    width:430px;
    max-width:100%;
    background:#fff;
    padding:34px;
    border-radius:30px;
    box-shadow:0 25px 70px rgba(15,23,42,.12);
    border:1px solid var(--border);
}
.login-logo { margin:0 auto 12px; }
.seed-box { background:#f9fafb; border-radius:16px; padding:11px; text-align:center; color:#6b7280; }
.audit-category {
    background:linear-gradient(135deg,#eef2ff,#eff6ff);
    border-left:5px solid #2563eb;
    padding:13px 14px;
    border-radius:16px;
    margin-top:18px;
    font-weight:850;
}
.audit-subcategory { margin:16px 0 10px; color:#374151; font-weight:850; }
.question-box {
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    margin-bottom:13px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.question-box:focus-within { border-color:#93c5fd; box-shadow:0 12px 32px rgba(37,99,235,.10); }
.question-text { font-weight:700; margin-bottom:10px; line-height:1.45; }
.question-rating-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.star-rating { display:inline-flex; align-items:center; gap:8px; touch-action:manipulation; }
.star-rating i { font-size:30px; color:#f59e0b; cursor:pointer; line-height:1; padding:4px; border-radius:12px; transition:transform .12s ease, background .12s ease; }
.star-rating i:active { transform:scale(.92); background:#fff7ed; }
.selected-score { color:#92400e; background:#fffbeb; border:1px solid #fde68a; padding:5px 10px; border-radius:999px; font-weight:800; font-size:13px; }
.mobile-save-bar { display:none; }

.accountability-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#eef2ff;
    color:#3730a3;
    border:1px solid #c7d2fe;
    border-radius:999px;
    padding:6px 10px;
    font-size:13px;
    margin:0 0 10px 0;
}
.compliance-entry-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    background:#f8fafc;
    border:1px dashed #dbe1ea;
    border-radius:16px;
    padding:12px;
    margin-top:10px;
}
.compliance-toggle-grid {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    min-height:44px;
}
.app-check {
    background:#f8fafc;
    border:1px solid #e5e7eb;
    padding:10px 14px 10px 38px;
    border-radius:14px;
    min-height:44px;
    display:flex;
    align-items:center;
}
.detail-report-table td {
    font-size:13px;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform:translateX(-104%);
        transition:transform .22s ease;
        width:min(86vw,330px);
    }
    body.sidebar-open .sidebar { transform:translateX(0); }
    body.sidebar-open .sidebar-overlay {
        display:block;
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.50);
        z-index:1040;
        backdrop-filter:blur(2px);
    }
    body.sidebar-open { overflow:hidden; }
    .main-content { margin-left:0; width:100%; }
    .topbar { height:68px; padding:0 14px; }
    .content-area { padding:16px 14px 90px; }
    .user-info { display:none; }
    .logout-btn { width:42px; padding-left:0; padding-right:0; }
    .product-card { padding:17px; border-radius:20px; }
    .card-header-flex { align-items:flex-start; }
    .metric-card { min-height:112px; }
}
@media (max-width: 767.98px) {
    .row.g-3 > [class*="col-"] { margin-bottom:0; }
    .card-header-flex { flex-direction:column; align-items:stretch; }
    .card-header-flex .btn, .card-header-flex form, .card-header-flex a { width:100%; }
    .btn { width:auto; }
    form .btn-primary, form .btn-outline-primary, form .btn-outline-secondary { width:100%; }
    .table-responsive { overflow:visible; }
    table.responsive-stack thead { display:none; }
    table.responsive-stack,
    table.responsive-stack tbody,
    table.responsive-stack tr,
    table.responsive-stack td { display:block; width:100%; }
    table.responsive-stack tr {
        border:1px solid var(--border);
        border-radius:18px;
        padding:11px 12px;
        margin-bottom:12px;
        background:#fff;
        box-shadow:0 8px 22px rgba(15,23,42,.05);
    }
    table.responsive-stack td {
        border:0;
        border-bottom:1px dashed #e5e7eb;
        padding:9px 0;
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:16px;
        text-align:right !important;
        word-break:break-word;
    }
    table.responsive-stack td:last-child { border-bottom:0; justify-content:flex-end; gap:8px; }
    table.responsive-stack td::before {
        content:attr(data-label);
        font-weight:800;
        color:#6b7280;
        text-align:left;
        flex:0 0 44%;
    }
    table.responsive-stack td:last-child::before { display:none; }
    table.responsive-stack td .btn { margin-bottom:4px; }
    .question-box { padding:16px 14px; }
    .question-text { font-size:15.5px; }
    .star-rating { gap:7px; width:100%; justify-content:space-between; }
    .star-rating i { font-size:36px; padding:5px; }
    .selected-score { width:100%; text-align:center; }
    .mobile-save-bar {
        display:block;
        position:sticky;
        bottom:0;
        padding:10px 0 calc(10px + env(safe-area-inset-bottom));
        background:linear-gradient(180deg,rgba(243,246,251,0),var(--soft) 28%);
        z-index:20;
    }
    .mobile-save-bar .btn { width:100%; min-height:52px; border-radius:17px; box-shadow:0 14px 28px rgba(37,99,235,.25); }
}
@media (max-width: 575.98px) {
    .page-title { font-size:17px; max-width:205px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .topbar { gap:8px; }
    .user-avatar { display:none; }
    .brand-title { font-size:17px; }
    .login-card { padding:26px 20px; border-radius:24px; }
    .content-area { padding-left:12px; padding-right:12px; }
    .product-card { padding:15px; }
    .metric-card strong { font-size:24px; }
    .audit-category { font-size:16px; }
    .audit-subcategory { font-size:15px; }
}
@media print {
    .sidebar,.topbar,.no-print,.mobile-save-bar,.sidebar-overlay { display:none!important; }
    .main-content { margin-left:0; }
    .content-area { padding:0; }
    .product-card { box-shadow:none; border:1px solid #ddd; }
    table.responsive-stack thead { display:table-header-group; }
    table.responsive-stack, table.responsive-stack tbody, table.responsive-stack tr, table.responsive-stack td { display:revert; }
}

@media (max-width: 767.98px) {
    .compliance-entry-grid { grid-template-columns:1fr; }
    .audit-mobile-card { padding-bottom:96px; }
}