:root {
    --sidebar-width: 276px;
    --sidebar-mini-width: 82px;
    --primary: #2458ff;
    --primary-2: #00a3c7;
    --success: #20b486;
    --warning: #f6a400;
    --danger: #ef4444;
    --ink: #152033;
    --muted: #6b7280;
    --line: #e7edf5;
    --bg: #f5f8ff;
    --card: #ffffff;
    --shadow: 0 16px 46px rgba(15, 23, 42, .08);
    --soft-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    --radius: 22px;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 0%, rgba(36, 88, 255, .12), transparent 26%),
        radial-gradient(circle at 86% 8%, rgba(32, 180, 134, .14), transparent 26%),
        var(--bg);
    color: var(--ink);
    font-family: Inter, Segoe UI, Arial, sans-serif;
    font-size: 14px;
}
a { text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #07142c 0%, #13213d 52%, #17243d 100%);
    color: #fff;
    position: fixed;
    top: 12px;
    bottom: 12px;
    left: 12px;
    padding: 14px;
    overflow-y: auto;
    z-index: 1040;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(4, 12, 31, .30);
    transition: width .24s ease, transform .24s ease;
    scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); border-radius: 999px; }
.main {
    margin-left: calc(var(--sidebar-width) + 12px);
    width: calc(100% - var(--sidebar-width) - 12px);
    min-height: 100vh;
    transition: margin-left .24s ease, width .24s ease;
}
.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 8px 18px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    margin-bottom: 12px;
}
.brand-logo-wrap {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 18px;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(2, 132, 199, .32);
}
.brand-logo { width: 100%; height: 100%; object-fit: cover; }
.brand-title { font-weight: 900; letter-spacing: .2px; font-size: 1.08rem; line-height: 1.15; }
.brand small { color: rgba(255,255,255,.70); font-size: .78rem; }
.sidebar-nav { gap: 2px; }
.sidebar-nav .nav-link, .sidebar-nav .nav-parent {
    color: rgba(255,255,255,.76);
    border: 0;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 16px;
    text-decoration: none;
    margin-bottom: 3px;
    text-align: left;
    min-height: 42px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-parent:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
    transform: translateX(2px);
}
.sidebar-nav .nav-link:focus, .sidebar-nav .nav-parent:focus { box-shadow: none; color: #fff; }
.sidebar-nav .nav-text { display: flex; align-items: center; gap: 12px; flex: 1; text-align: left; min-width: 0; }
.sidebar-nav .nav-text span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .nav-text i { min-width: 22px; width: 22px; text-align: center; font-size: 1.1rem; color: rgba(255,255,255,.86); }
.sidebar-nav .nav-arrow { margin-left: auto; font-size: .85rem; opacity: .72; }
.sidebar-nav .nav-children { padding: 2px 0 6px 10px; }
.sidebar-nav .nav-child { padding-left: 18px; min-height: 39px; font-size: .92rem; border-left: 1px solid rgba(255,255,255,.08); border-radius: 0 16px 16px 0; }
.sidebar-nav .nav-child .nav-text i { font-size: 1rem; color: rgba(255,255,255,.72); }
.sidebar-collapsed .sidebar { width: var(--sidebar-mini-width); }
.sidebar-collapsed .main { margin-left: calc(var(--sidebar-mini-width) + 12px); width: calc(100% - var(--sidebar-mini-width) - 12px); }
.sidebar-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-text span, .sidebar-collapsed .nav-arrow { display: none; }
.sidebar-collapsed .sidebar-nav .nav-link, .sidebar-collapsed .sidebar-nav .nav-parent { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .sidebar-nav .nav-text { flex: 0; gap: 0; justify-content: center; }
.sidebar-collapsed .sidebar-nav .nav-children { display: none !important; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 66px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(226,232,240,.75);
}
.page-heading h6 { font-weight: 850; font-size: 1rem; letter-spacing: -.01em; }
.page-heading small { color: var(--muted); }
.content { padding: 22px; }
.icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #21314d;
    box-shadow: var(--soft-shadow);
}
.icon-btn:hover { background: #eff6ff; color: var(--primary); }
.top-search {
    align-items: center;
    gap: 8px;
    height: 38px;
    min-width: 190px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fbff;
    color: #8a94a6;
    font-size: .86rem;
}
.user-chip {
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: #334155;
    font-weight: 650;
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn { border-radius: 13px; font-weight: 700; }
.btn-primary { background: linear-gradient(135deg, var(--primary), #1b8cff); border: 0; box-shadow: 0 10px 22px rgba(36, 88, 255, .18); }
.btn-success { background: linear-gradient(135deg, #0ea66f, #21c7a8); border: 0; box-shadow: 0 10px 22px rgba(32, 180, 134, .18); }
.btn-light { border: 1px solid var(--line); background: #fff; }
.btn-danger-soft { background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; }
.btn-danger-soft:hover { background: #ffe4e6; color: #9f1239; }
.app-alert { border-radius: 18px; border: 0; box-shadow: var(--soft-shadow); }
.app-card {
    border: 1px solid rgba(226,232,240,.72);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: rgba(255,255,255,.96);
}
.app-card .card-header { background: #fff; border-bottom: 1px solid #edf2f7; padding: 15px 18px; }
.form-control, .form-select { border-radius: 14px; border-color: #dfe7f1; min-height: 42px; }
.form-control:focus, .form-select:focus { border-color: rgba(36,88,255,.45); box-shadow: 0 0 0 .22rem rgba(36,88,255,.10); }
.table { vertical-align: middle; }
.table thead th { color: #64748b; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: #e8eef7; }
.table tbody td { border-color: #eef3f8; }
.stat-card {
    background: linear-gradient(145deg, #fff, #f7faff);
    border: 1px solid rgba(226,232,240,.75);
    border-radius: 24px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    box-shadow: var(--shadow);
    min-height: 104px;
    position: relative;
    overflow: hidden;
}
.stat-card:after { content: ""; position: absolute; right: -24px; top: -26px; width: 78px; height: 78px; border-radius: 999px; background: rgba(36,88,255,.08); }
.stat-card i { font-size: 26px; color: var(--primary); background:#eef4ff; width:54px; height:54px; display:grid; place-items:center; border-radius:19px; }
.stat-card h3 { margin:0; font-weight:900; letter-spacing:-.03em; }
.stat-card span { color:#64748b; font-weight:650; }
.folder-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(165px,1fr)); gap:14px; }
.folder-tile { background:#f8fafc; border:1px solid #e5e7eb; border-radius:18px; padding:18px; text-decoration:none; color:#111827; display:flex; flex-direction:column; gap:8px; min-height:110px; transition:.2s; }
.folder-tile:hover { transform: translateY(-2px); box-shadow:0 14px 30px rgba(15,23,42,.08); color:var(--primary); }
.folder-tile i { font-size:36px; color:#f59e0b; }
.permission-list { display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.permission-item { padding:12px; background:#f8fafc; border-radius:14px; border:1px solid #e5e7eb; }
.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding: 20px;
    background:
        radial-gradient(circle at 18% 15%, rgba(36,88,255,.20), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(32,180,134,.18), transparent 26%),
        linear-gradient(135deg, #f8fbff, #eef6ff);
}
.login-card {
    width:min(420px, 94vw);
    background:rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.74);
    border-radius:30px;
    padding:30px;
    box-shadow:0 26px 80px rgba(15,23,42,.16);
    backdrop-filter: blur(18px);
}
.login-logo {
    width: 78px;
    height: 78px;
    border-radius: 26px;
    object-fit: cover;
    box-shadow: 0 14px 30px rgba(2,132,199,.22);
}
.login-card h4 { font-weight: 900; letter-spacing: -.02em; }
.drive-hero {
    border: 1px solid rgba(226,232,240,.75);
    border-radius: 28px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(36,88,255,.96), rgba(0,163,199,.92) 54%, rgba(32,180,134,.92)),
        #2458ff;
    color: #fff;
    box-shadow: 0 20px 48px rgba(36,88,255,.18);
    overflow: hidden;
    position: relative;
}
.drive-hero:before { content:""; position:absolute; inset:auto -70px -90px auto; width:210px; height:210px; background:rgba(255,255,255,.16); border-radius:50%; }
.drive-hero:after { content:""; position:absolute; left:-60px; top:-80px; width:180px; height:180px; background:rgba(255,255,255,.13); border-radius:50%; }
.drive-hero > * { position: relative; z-index: 1; }
.drive-title { display:flex; align-items:center; gap:12px; }
.drive-title-icon { width:50px; height:50px; border-radius:18px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:1.6rem; }
.drive-title h4 { font-weight: 900; margin: 0; letter-spacing: -.02em; }
.drive-title p { color: rgba(255,255,255,.78); margin: 2px 0 0; }
.drive-create-card {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    padding: 14px;
    backdrop-filter: blur(14px);
}
.drive-create-card .form-control { background: rgba(255,255,255,.94); border: 0; }
.drive-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 20px 0 12px; }
.drive-toolbar h5 { font-weight: 900; margin: 0; }
.drive-action-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.drive-search-pill { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color:#64748b; box-shadow: var(--soft-shadow); }
.drive-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:14px; }
.drive-folder-card, .drive-file-card {
    background: #fff;
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 22px;
    padding: 15px;
    color: var(--ink);
    box-shadow: var(--soft-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.drive-folder-card:hover, .drive-file-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(15,23,42,.10); border-color: rgba(36,88,255,.28); color: var(--ink); }
.drive-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.drive-folder-icon { width:52px; height:42px; display:grid; place-items:center; border-radius:15px; background: linear-gradient(135deg, #ffe59a, #ffc247); color:#8a4b00; font-size:1.6rem; }
.drive-file-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:17px; background:linear-gradient(135deg, #eaf2ff, #dbeafe); color:var(--primary); font-size:1.55rem; }
.drive-file-card.image .drive-file-icon { background:linear-gradient(135deg, #ecfdf5, #d1fae5); color:#059669; }
.drive-file-card.pdf .drive-file-icon { background:linear-gradient(135deg, #fff1f2, #ffe4e6); color:#e11d48; }
.drive-file-card.doc .drive-file-icon { background:linear-gradient(135deg, #eff6ff, #dbeafe); color:#2563eb; }
.drive-name { margin-top: 12px; font-weight: 850; line-height: 1.25; word-break: break-word; }
.drive-meta { margin-top: 5px; color:#7b8798; font-size:.82rem; }
.drive-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top: 12px; }
.drive-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 9px; background:#f6f9fd; color:#667085; font-size:.78rem; font-weight:700; }
.empty-state { background:#fff; border:1px dashed #cbd5e1; border-radius:24px; padding:28px; text-align:center; color:#64748b; }
.empty-state i { font-size:44px; display:block; color:#94a3b8; margin-bottom:8px; }
.drive-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#64748b; }
.drive-breadcrumb .current { color:var(--ink); font-weight:900; }
.storage-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.storage-tab { padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:#64748b; font-weight:750; }
.storage-tab.active { color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-2)); border-color:transparent; }
.compact-form-panel { border-radius: 22px; background:#fff; border:1px solid var(--line); box-shadow: var(--soft-shadow); padding:14px; }
@media(max-width: 991.98px) {
    .sidebar { top: 10px; bottom: 10px; left: 10px; transform: translateX(-112%); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left:0; width:100%; }
    .content { padding:14px; }
    .topbar { height:62px; padding: 9px 14px; }
    .page-heading small { display:none; }
    .sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1030; }
    .sidebar-backdrop.show { display:block; }
    .drive-hero { padding: 15px; border-radius: 24px; }
    .drive-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
    .drive-toolbar { align-items:flex-start; flex-direction:column; }
}
@media(max-width: 575.98px) {
    body { font-size: 13px; }
    .content { padding:12px; }
    .app-card, .stat-card, .drive-folder-card, .drive-file-card { border-radius: 20px; }
    .drive-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
    .drive-folder-card, .drive-file-card { min-height: 126px; padding: 12px; }
    .drive-title h4 { font-size: 1rem; }
    .drive-title-icon { width:44px; height:44px; }
    .login-card { padding:24px; border-radius:26px; }
}


/* Final workflow UI helpers */
.mini-icon { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; font-size: 1.05rem; }
.detail-list { display: grid; gap: 12px; }
.detail-list.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-list > div { background: #f8fbff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; min-height: 72px; }
.detail-list span { display: block; color: #64748b; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; margin-bottom: 4px; }
.detail-list b { display: block; font-weight: 850; color: var(--ink); word-break: break-word; }
.detail-list small { display: block; color: #7b8798; margin-top: 2px; }
.file-detail-icon { width: 84px; height: 84px; margin: 0 auto; border-radius: 28px; display: grid; place-items: center; font-size: 2.35rem; box-shadow: var(--shadow); }
.file-detail-icon.compliance { color: #2458ff; background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.file-detail-icon.personal { color: #0f9f7a; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.fw-black { font-weight: 900; }
.compact-form .form-label { font-size: .84rem; color: #475569; }
@media(max-width: 767.98px) {
    .detail-list.two-col { grid-template-columns: 1fr; }
    .table .btn { margin-bottom: 4px; }
}