:root {
    --ink: #15251d;
    --muted: #65736b;
    --paper: #f5f2e9;
    --cream: #fffdf7;
    --line: #d9ddd4;
    --moss: #435f4d;
    --mint: #b9dfc7;
    --mint-soft: #e3f2e7;
    --coral: #f29b7d;
    --coral-soft: #fde2d6;
    --yellow: #edc85c;
    --blue: #94bfcc;
    --shadow: 0 18px 55px rgba(31, 48, 39, .1);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Be Vietnam Pro", sans-serif; line-height: 1.55; }
body::selection { background: var(--yellow); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { display: block; color: var(--moss); font-size: .69rem; font-weight: 800; letter-spacing: .16em; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; color: var(--cream); background: var(--ink); border-radius: 11px 11px 11px 3px; font-family: "DM Serif Display", serif; font-size: 1.45rem; transform: rotate(-3deg); }

.site-header { position: sticky; z-index: 40; top: 0; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(280px, 1fr) minmax(300px, .8fr); align-items: center; gap: 28px; min-height: 82px; padding: 14px max(4vw, 24px); border-bottom: 1px solid rgba(67,95,77,.18); background: rgba(245,242,233,.9); backdrop-filter: blur(18px); }
.header-search, .hero-search, .file-search { display: flex; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.header-search { height: 48px; padding: 0 17px; border-radius: 14px; }
.header-search svg, .hero-search svg { width: 20px; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-width: 1.8; }
.header-search input, .hero-search input, .file-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; }
.header-search input { padding: 0 12px; }
.header-nav { display: flex; justify-content: flex-end; gap: 7px; }
.header-nav a { padding: 9px 11px; color: var(--muted); border-radius: 10px; font-size: .82rem; font-weight: 600; }
.header-nav a:hover, .header-nav a.active { color: var(--ink); background: var(--mint-soft); }

.hero-section { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 550px; overflow: hidden; padding: 78px max(6vw, 28px) 70px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 76% 36%, rgba(185,223,199,.55), transparent 24%), linear-gradient(135deg, #fbf9f2 0%, #f0eadc 100%); }
.hero-section::before { position: absolute; inset: 0; content: ""; opacity: .28; background-image: linear-gradient(rgba(67,95,77,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(67,95,77,.1) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, #000); }
.hero-copy { position: relative; z-index: 2; max-width: 720px; }
.hero-copy h1, .browse-title-row h1, .login-message h1 { margin: 15px 0 20px; font-family: "DM Serif Display", serif; font-size: clamp(3.4rem, 6vw, 6.4rem); font-weight: 400; letter-spacing: -.055em; line-height: .92; }
.hero-copy h1 em, .login-message h1 em { color: var(--moss); font-weight: 400; }
.hero-copy > p { max-width: 640px; color: var(--muted); font-size: 1.05rem; }
.hero-search { width: min(620px, 100%); height: 67px; margin-top: 33px; padding: 7px 8px 7px 20px; border-color: rgba(67,95,77,.25); border-radius: 18px; background: var(--cream); box-shadow: var(--shadow); }
.hero-search input { padding: 0 14px; }
.hero-search button { height: 49px; padding: 0 25px; border: 0; color: white; background: var(--ink); border-radius: 12px; cursor: pointer; font-weight: 700; }
.hero-art { position: relative; min-height: 390px; }
.orbit { position: absolute; border: 1px solid rgba(67,95,77,.28); border-radius: 50%; }
.orbit-one { inset: 3% 2% 0 7%; transform: rotate(-13deg); }
.orbit-two { inset: 18% 12% 4% 21%; border-style: dashed; transform: rotate(18deg); }
.floating-folder { position: absolute; top: 25%; left: 25%; display: flex; width: 250px; height: 172px; align-items: flex-end; padding: 28px; border: 2px solid var(--ink); border-radius: 12px 28px 28px 28px; background: var(--yellow); box-shadow: 18px 20px 0 rgba(21,37,29,.15); transform: rotate(-7deg); }
.floating-folder::before { position: absolute; top: -29px; left: -2px; width: 104px; height: 38px; content: ""; border: 2px solid var(--ink); border-bottom: 0; border-radius: 14px 18px 0 0; background: var(--yellow); }
.floating-folder strong { letter-spacing: .18em; }
.floating-file { position: absolute; z-index: 2; width: 112px; height: 146px; padding: 16px; border: 2px solid var(--ink); background: var(--cream); box-shadow: 9px 10px 0 rgba(21,37,29,.12); }
.floating-file span { font-size: .7rem; font-weight: 800; }
.floating-file i { display: block; height: 4px; margin-top: 14px; background: var(--ink); opacity: .45; }
.floating-file i:nth-child(3) { width: 78%; }.floating-file i:nth-child(4) { width: 55%; }
.file-a { top: 7%; right: 11%; transform: rotate(9deg); animation: float 5s ease-in-out infinite; }
.file-b { right: 2%; bottom: 2%; display: flex; flex-direction: column; justify-content: space-between; background: var(--coral); transform: rotate(6deg); animation: float 5.8s ease-in-out infinite reverse; }
.file-b b { display: grid; width: 49px; height: 49px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; }
@keyframes float { 50% { translate: 0 -12px; rotate: -2deg; } }

.content-section { width: min(1420px, calc(100% - 48px)); margin: 0 auto; padding: 78px 0; }
.category-section { padding-bottom: 36px; }
.section-heading, .panel-heading, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading h2, .panel-heading h2, .page-heading h2, .admin-intro h2 { margin: 5px 0 0; font-family: "DM Serif Display", serif; font-size: clamp(2rem, 3.2vw, 3.1rem); font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.section-heading > a { font-size: .85rem; font-weight: 700; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.category-card { position: relative; display: grid; min-height: 180px; grid-template-columns: auto 1fr; gap: 17px; padding: 25px; overflow: hidden; border: 1px solid rgba(21,37,29,.18); border-radius: 19px; transition: .25s ease; }
.category-card::after { position: absolute; right: -28px; bottom: -50px; width: 125px; height: 125px; content: ""; border: 1px solid currentColor; border-radius: 50%; opacity: .18; }
.category-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 18px 35px rgba(31,48,39,.11); }
.category-card.selected { outline: 3px solid var(--ink); outline-offset: 3px; }
.category-tone-1 { background: var(--mint); }.category-tone-2 { background: var(--coral-soft); }.category-tone-3 { background: #dcebf0; }.category-tone-4 { background: #f4e9b8; }
.category-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(21,37,29,.15); border-radius: 13px; background: rgba(255,255,255,.5); font-size: 1.35rem; }
.category-card h3 { margin: 2px 0 5px; font-size: 1rem; }.category-card p { margin: 0; color: rgba(21,37,29,.65); font-size: .77rem; }
.category-card > strong { grid-column: 2; align-self: end; font-size: .75rem; }
.library-section { padding-top: 42px; }
.view-switch { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.view-switch button { display: grid; width: 37px; height: 32px; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; }
.view-switch button.active { color: white; background: var(--ink); }
.library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.library-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); transition: .25s ease; }
.library-card:hover { translate: 0 -5px; box-shadow: var(--shadow); }
.library-cover { position: relative; display: grid; height: 220px; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(21,37,29,.15); }
.library-cover::before { position: absolute; width: 240px; height: 240px; content: ""; border: 1px solid rgba(21,37,29,.18); border-radius: 48% 52% 42% 58%; transform: rotate(28deg); }
.cover-folder { background: var(--mint); }.cover-file { background: var(--coral-soft); }
.cover-label { position: absolute; top: 18px; left: 18px; padding: 5px 8px; border: 1px solid rgba(21,37,29,.25); border-radius: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.cover-shape { position: relative; z-index: 1; display: grid; width: 100px; height: 84px; place-items: center; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream); box-shadow: 10px 10px 0 rgba(21,37,29,.14); font-size: 2.3rem; transform: rotate(-5deg); }
.cover-action { position: absolute; right: 18px; bottom: 16px; font-size: .7rem; font-weight: 700; opacity: 0; transform: translateY(5px); transition: .2s; }
.library-card:hover .cover-action { opacity: 1; transform: none; }
.library-card-body { padding: 23px; }.tag { display: inline-flex; padding: 5px 9px; color: var(--moss); background: var(--mint-soft); border-radius: 999px; font-size: .65rem; font-weight: 800; }
.library-card h3 { margin: 13px 0 8px; font-size: 1.1rem; line-height: 1.35; }.library-card h3 a:hover { text-decoration: underline; }
.library-card-body > p { min-height: 44px; margin: 0; color: var(--muted); font-size: .8rem; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-meta { display: flex; justify-content: space-between; margin-top: 21px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: .69rem; }
.library-grid.list-view { grid-template-columns: 1fr; }.library-grid.list-view .library-card { display: grid; grid-template-columns: 200px 1fr; }.library-grid.list-view .library-cover { height: 100%; min-height: 180px; border-right: 1px solid var(--line); border-bottom: 0; }
.empty-state { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; padding: 35px; border: 1px dashed #b7beb5; border-radius: var(--radius); text-align: center; background: rgba(255,255,255,.35); }
.empty-state > span { font-family: "DM Serif Display", serif; font-size: 3rem; }.empty-state strong { margin: 9px 0 3px; font-size: 1.05rem; }.empty-state p { margin: 0 0 18px; color: var(--muted); font-size: .82rem; }.error-state { color: #8c352c; background: var(--coral-soft); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 30px max(4vw,24px); border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; }

.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-weight: 700; transition: .2s; }
.button:hover { transform: translateY(-1px); }.button-primary { color: white; border-color: var(--ink); background: var(--ink); }.button-primary:hover { background: var(--moss); }.button-outline { border-color: #aeb7ae; background: var(--cream); }.button-ghost { border-color: transparent; color: var(--muted); }.button-small { min-height: 35px; padding: 0 12px; font-size: .7rem; }

.browse-hero { padding: 54px max(6vw,28px) 38px; border-bottom: 1px solid var(--line); background: linear-gradient(130deg, #f9f6ed, #e8f1e8); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: .75rem; }.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }.breadcrumbs strong { color: var(--ink); }
.browse-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 34px; }.browse-title-row h1 { margin: 8px 0 10px; font-size: clamp(2.6rem,5vw,5rem); }.browse-title-row p { max-width: 700px; margin: 0; color: var(--muted); }
.file-browser { width: min(1420px, calc(100% - 48px)); min-height: 440px; margin: 42px auto 80px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); box-shadow: 0 12px 40px rgba(31,48,39,.06); }
.browser-toolbar { display: grid; grid-template-columns: auto minmax(220px, 460px) auto; justify-content: space-between; gap: 15px; padding: 18px; border-bottom: 1px solid var(--line); }.back-button { border: 0; color: var(--moss); background: transparent; cursor: pointer; font-weight: 700; }.file-search { height: 41px; padding: 0 13px; border-radius: 10px; }.file-search input { padding-left: 10px; font-size: .8rem; }
.browser-status { display: flex; min-height: 330px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }.browser-status p { font-size: .8rem; }.spinner { width: 35px; height: 35px; border: 3px solid var(--mint); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.browser-error { color: #913f32; }.browser-error span { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: var(--coral-soft); font-size: 1.5rem; }.browser-error strong { margin-top: 12px; }
.file-list { padding: 7px 18px 18px; }.file-row { display: grid; grid-template-columns: minmax(280px, 2.1fr) .8fr .65fr .9fr auto; align-items: center; gap: 18px; min-height: 76px; padding: 10px 12px; border-bottom: 1px solid #eceee9; }.file-row:not(.file-row-head):hover { background: #f5f8f3; }.file-row-head { min-height: 43px; color: var(--muted); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.file-name-cell { display: flex; min-width: 0; align-items: center; gap: 13px; }.file-name-cell > div { min-width: 0; }.file-name-cell strong, .file-name-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-name-cell strong { font-size: .82rem; }.file-name-cell small { color: var(--muted); font-size: .64rem; }
.drive-file-icon { display: grid; flex: 0 0 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid rgba(21,37,29,.13); border-radius: 10px; background: #edf1eb; color: var(--ink); font-size: .56rem; font-weight: 800; }.drive-file-icon img { width: 100%; height: 100%; object-fit: cover; }.icon-folder { color: #725c12; background: #f4dda0; font-size: 1.25rem; }.icon-pdf { color: #9d332d; background: #f7d8cf; }.icon-video { color: #2c5360; background: #d4e7ec; font-size: 1rem; }.icon-image { color: #345c41; background: var(--mint-soft); }
.file-type, .file-size, .file-row time { color: var(--muted); font-size: .7rem; }.file-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }.icon-button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; font-weight: 800; }
.file-list.file-grid-view { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px; }.file-grid-view .file-row-head { display: none; }.file-grid-view .file-row { display: flex; min-width: 0; min-height: 235px; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; }.file-grid-view .file-name-cell { align-items: flex-start; }.file-grid-view .drive-file-icon { flex-basis: 58px; height: 58px; }.file-grid-view .file-type, .file-grid-view .file-size, .file-grid-view time { padding-left: 72px; }.file-grid-view .file-actions { justify-content: stretch; margin-top: auto; }.file-grid-view .file-actions .button { flex: 1; }
.compact-empty { grid-column: 1/-1; min-height: 280px; border: 0; }
.preview-modal { position: fixed; z-index: 100; inset: 0; padding: 3vh 3vw; background: rgba(13,24,18,.78); backdrop-filter: blur(10px); }.preview-dialog { display: grid; width: min(1400px,100%); height: 94vh; margin: auto; grid-template-rows: 62px 1fr; overflow: hidden; border-radius: 18px; background: white; box-shadow: 0 30px 90px rgba(0,0,0,.35); }.preview-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--line); }.preview-dialog header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.preview-dialog header div { display: flex; align-items: center; gap: 14px; }.preview-dialog header a { color: var(--moss); font-size: .75rem; font-weight: 700; }.preview-dialog button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: #eef0ec; cursor: pointer; font-size: 1.4rem; }.preview-dialog iframe { width: 100%; height: 100%; border: 0; background: #303430; }.modal-open { overflow: hidden; }

.admin-page { background: #f1efe7; }.admin-shell { display: grid; min-height: 100vh; grid-template-columns: 260px minmax(0,1fr); }.admin-sidebar { position: sticky; z-index: 50; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 26px 19px 20px; color: #e8eee9; background: var(--ink); }.admin-brand { margin: 0 10px 42px; color: white; }.admin-brand .brand-mark { color: var(--ink); background: var(--mint); }.admin-sidebar nav { display: flex; flex-direction: column; gap: 5px; }.admin-sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 10px; color: #aebbb2; font-size: .79rem; font-weight: 600; }.admin-sidebar nav a span { width: 22px; text-align: center; font-size: 1rem; }.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: white; background: rgba(185,223,199,.13); }.admin-sidebar nav a.active { box-shadow: inset 3px 0 var(--mint); }
.admin-profile { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; margin-top: auto; padding: 15px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }.admin-profile img, .profile-placeholder { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; object-fit: cover; background: var(--mint); color: var(--ink); font-weight: 800; }.admin-profile strong, .admin-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-profile strong { font-size: .68rem; }.admin-profile small { color: #94a39a; font-size: .55rem; }.admin-profile form { margin: 0; }.admin-profile form button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 7px; color: #94a39a; background: transparent; cursor: pointer; }.admin-profile form button:hover { color: white; background: rgba(255,255,255,.1); }
.admin-content { min-width: 0; }.admin-topbar { display: flex; min-height: 82px; align-items: center; gap: 18px; padding: 13px 34px; border-bottom: 1px solid var(--line); background: rgba(255,253,247,.75); backdrop-filter: blur(16px); }.admin-topbar > div { flex: 1; }.admin-topbar span { color: var(--muted); font-size: .59rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }.admin-topbar h1 { margin: 0; font-size: 1.02rem; }.menu-button { display: none; border: 0; background: transparent; font-size: 1.3rem; }.topbar-action { min-height: 41px; font-size: .7rem; }.admin-main { padding: 34px; }.flash { margin: 18px 34px 0; padding: 13px 16px; border: 1px solid; border-radius: 10px; font-size: .76rem; }.flash-success { color: #26583a; border-color: #afd0b7; background: #e1f1e4; }.flash-error { color: #83372e; border-color: #e8b5a7; background: #fae2db; }.flash-info { color: #345564; border-color: #bad3dc; background: #e5f0f3; }
.admin-intro { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }.admin-intro h2 { font-size: 2.35rem; }.admin-intro p { margin: 8px 0 0; color: var(--muted); font-size: .78rem; }.admin-intro > span { color: var(--muted); font-size: .7rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 28px; }.stat-card { position: relative; display: grid; min-height: 158px; grid-template-columns: auto 1fr; gap: 16px; padding: 22px; overflow: hidden; border: 1px solid rgba(21,37,29,.16); border-radius: 18px; }.stat-card::after { position: absolute; right: -45px; bottom: -58px; width: 130px; height: 130px; content: ""; border: 1px solid currentColor; border-radius: 50%; opacity: .13; }.stat-dark { color: white; background: var(--ink); }.stat-mint { background: var(--mint); }.stat-coral { background: var(--coral-soft); }.stat-cream { background: #f4e8ae; }.stat-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; border-radius: 11px; background: rgba(255,255,255,.1); }.stat-card small { display: block; opacity: .65; font-size: .58rem; font-weight: 800; letter-spacing: .1em; }.stat-card strong { display: block; margin-top: 4px; font-family: "DM Serif Display",serif; font-size: 2.65rem; font-weight: 400; line-height: 1; }.stat-card p { margin: 8px 0 0; opacity: .65; font-size: .63rem; }
.admin-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); }.panel-heading { margin: 0; padding: 22px 24px; border-bottom: 1px solid var(--line); }.panel-heading h2 { font-size: 1.65rem; }.panel-heading .button { min-height: 39px; font-size: .68rem; }.admin-table-wrap { overflow-x: auto; }.admin-table { width: 100%; border-collapse: collapse; font-size: .7rem; }.admin-table th { padding: 13px 15px; color: var(--muted); background: #f4f3ed; text-align: left; font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; }.admin-table td { padding: 14px 15px; border-top: 1px solid #e8eae5; white-space: nowrap; }.table-title { display: flex; min-width: 260px; align-items: center; gap: 12px; }.table-title strong, .table-title small { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.table-title strong { font-size: .74rem; }.table-title small { color: var(--muted); font-size: .58rem; }.mini-file-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 9px; }.mini-file-icon.folder { background: #f2dda2; }.mini-file-icon.file { background: var(--coral-soft); }.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: .6rem; font-weight: 700; }.status i { width: 6px; height: 6px; border-radius: 50%; }.status-active { color: #285a3c; background: #e1f1e4; }.status-active i { background: #3c8a58; }.status-inactive { color: #6b6250; background: #eee9dd; }.status-inactive i { background: #8d8370; }.table-actions { display: flex; justify-content: flex-end; gap: 3px; }.table-actions a, .table-actions button { display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }.table-actions a:hover, .table-actions button:hover { background: #edf0eb; }.table-actions .danger:hover { color: #a13b31; background: #f9dfd7; }
.page-heading { align-items: flex-end; margin-bottom: 26px; }.page-heading h2 { font-size: 2.6rem; }.page-heading p { margin: 9px 0 0; color: var(--muted); font-size: .78rem; }.drive-form { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); }.form-errors { margin: 22px; padding: 15px 18px; color: #813b32; border: 1px solid #e7afa0; border-radius: 10px; background: #fbe4dd; font-size: .74rem; }.form-errors ul { margin: 7px 0 0; padding-left: 18px; }.form-section { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 30px; border-bottom: 1px solid var(--line); }.form-section-number { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid var(--ink); border-radius: 12px; font-family: "DM Serif Display",serif; }.form-section-content h2 { margin: 0; font-family: "DM Serif Display",serif; font-size: 1.65rem; font-weight: 400; }.form-section-content > p { margin: 4px 0 22px; color: var(--muted); font-size: .72rem; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.form-field { display: flex; flex-direction: column; gap: 7px; }.form-field.full { grid-column: 1/-1; }.form-field > span { font-size: .68rem; font-weight: 700; }.form-field b { color: #b14a3d; }.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid #cdd2ca; border-radius: 10px; outline: 0; color: var(--ink); background: white; font-size: .76rem; }.form-field input, .form-field select { height: 46px; padding: 0 13px; }.form-field textarea { padding: 12px 13px; resize: vertical; }.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(67,95,77,.12); }.form-field small { color: var(--muted); font-size: .59rem; }.form-field textarea + small { text-align: right; }.form-note { display: flex; gap: 13px; margin: 24px 30px 0; padding: 15px; border: 1px solid #dfc975; border-radius: 11px; background: #fcf2c9; }.form-note > span { display: grid; flex: 0 0 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--yellow); font-weight: 800; }.form-note p, .form-note strong { display: block; margin: 0; font-size: .66rem; }.form-note strong { margin-bottom: 2px; }.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 25px 30px; }
.category-admin-grid { display: grid; grid-template-columns: minmax(280px,.65fr) minmax(430px,1.35fr); align-items: start; gap: 18px; }.compact-panel .panel-heading { padding: 20px; }.simple-form { display: grid; gap: 16px; padding: 20px; }.category-admin-list { padding: 10px 18px 18px; }.category-admin-item { border-bottom: 1px solid var(--line); }.category-admin-item summary { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 13px 3px; cursor: pointer; list-style: none; }.category-admin-item summary::-webkit-details-marker { display: none; }.category-admin-item summary .category-icon { width: 40px; height: 40px; font-size: 1rem; }.category-admin-item summary strong, .category-admin-item summary small { display: block; }.category-admin-item summary strong { font-size: .74rem; }.category-admin-item summary small { color: var(--muted); font-size: .58rem; }.category-edit-form { display: grid; grid-template-columns: 1fr 1.4fr .5fr auto; align-items: end; gap: 10px; padding: 5px 0 14px 55px; }.category-delete { padding: 0 0 14px 55px; }.category-delete button { border: 0; color: #a23f34; background: transparent; cursor: pointer; font-size: .63rem; text-decoration: underline; }.category-delete button:disabled { color: #aaa; cursor: not-allowed; }

.login-page { min-height: 100vh; background: var(--paper); }.login-shell { display: grid; min-height: 100vh; grid-template-columns: 1.08fr .92fr; }.login-visual { position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 46px 7vw; background: var(--mint); }.login-visual::after { position: absolute; right: -180px; bottom: -250px; width: 600px; height: 600px; content: ""; border: 1px solid rgba(21,37,29,.25); border-radius: 50%; }.login-message { position: relative; z-index: 2; max-width: 680px; margin: 80px 0; }.login-message h1 { font-size: clamp(3.5rem,6vw,6.8rem); }.login-message p { max-width: 570px; color: rgba(21,37,29,.68); }.login-stack { position: absolute; right: 8%; bottom: 7%; z-index: 2; display: flex; align-items: flex-end; }.login-stack div { display: grid; width: 86px; height: 112px; place-items: center; border: 2px solid var(--ink); background: var(--cream); box-shadow: 7px 8px 0 rgba(21,37,29,.15); font-size: .68rem; font-weight: 800; }.login-stack div:nth-child(2) { height: 137px; margin-left: -16px; background: var(--yellow); transform: rotate(5deg); }.login-stack div:nth-child(3) { height: 88px; margin-left: -12px; background: var(--coral); transform: rotate(-5deg); font-size: 1.2rem; }.login-panel { display: grid; place-items: center; padding: 35px; background: #f8f5ed; }.login-card { width: min(430px,100%); padding: 44px; border: 1px solid var(--line); border-radius: 24px; background: var(--cream); box-shadow: var(--shadow); text-align: center; }.login-lock { display: grid; width: 58px; height: 58px; margin: 0 auto 20px; place-items: center; border-radius: 16px; background: var(--ink); color: white; font-size: 1.6rem; }.login-card h2 { margin: 0; font-family: "DM Serif Display",serif; font-size: 2.1rem; font-weight: 400; }.login-card > p { margin: 9px 0 25px; color: var(--muted); font-size: .76rem; }.login-card .flash { margin: 0 0 15px; text-align: left; }.google-login { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; border: 1px solid #cfd4cd; border-radius: 12px; background: white; font-size: .78rem; font-weight: 700; }.google-login:hover { border-color: var(--ink); box-shadow: 0 8px 20px rgba(31,48,39,.08); }.google-login[disabled] { opacity: .5; }.google-login svg { width: 22px; }.login-card > small { display: block; margin-top: 20px; color: var(--muted); font-size: .58rem; }

@media (max-width: 1150px) {
    .site-header { grid-template-columns: auto 1fr; }.header-nav { display: none; }
    .hero-section { grid-template-columns: 1.2fr .8fr; }.hero-art { opacity: .75; }.floating-folder { left: 4%; }
    .category-grid { grid-template-columns: repeat(2,1fr); }.stats-grid { grid-template-columns: repeat(2,1fr); }.file-list.file-grid-view { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 860px) {
    .hero-section { display: block; min-height: auto; padding-top: 60px; }.hero-art { display: none; }.library-grid { grid-template-columns: repeat(2,1fr); }
    .admin-shell { display: block; }.admin-sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 270px; transition: transform .25s; box-shadow: 20px 0 50px rgba(0,0,0,.2); }.admin-sidebar.open { transform: translateX(0); }.menu-button { display: block; }.admin-main { padding: 24px; }.flash { margin-right: 24px; margin-left: 24px; }
    .category-admin-grid { grid-template-columns: 1fr; }.file-list.file-grid-view { grid-template-columns: repeat(2,1fr); }.login-shell { grid-template-columns: 1fr; }.login-visual { display: none; }
}
@media (max-width: 650px) {
    .site-header { min-height: 70px; padding: 10px 16px; }.site-header .brand > span:last-child { display: none; }.header-search { height: 44px; }
    .hero-section { padding: 50px 20px; }.hero-copy h1 { font-size: 3.2rem; }.hero-search { height: auto; min-height: 60px; }.hero-search button { padding: 0 15px; }
    .content-section { width: calc(100% - 28px); padding: 50px 0; }.category-section { padding-bottom: 20px; }.category-grid, .library-grid { grid-template-columns: 1fr; }.category-card { min-height: 145px; }.library-grid.list-view .library-card { display: block; }.library-grid.list-view .library-cover { height: 170px; }
    .section-heading { align-items: center; }.section-heading h2 { font-size: 2rem; }.view-switch { display: none; }.site-footer { flex-direction: column; gap: 5px; }
    .browse-hero { padding: 35px 18px; }.browse-title-row { display: block; }.browse-title-row .button { margin-top: 22px; }.file-browser { width: calc(100% - 20px); margin: 20px auto 50px; }.browser-toolbar { grid-template-columns: auto 1fr; }.browser-toolbar .view-switch { display: none; }.file-list { padding: 5px 10px 12px; }.file-row-head { display: none; }.file-row { grid-template-columns: 1fr auto; gap: 8px; padding: 15px 4px; }.file-row .file-type, .file-row .file-size, .file-row time { display: none; }.file-actions .button-outline { width: 36px; min-width: 36px; padding: 0; overflow: hidden; font-size: 0; }.file-actions .button-outline::after { content: "▶"; font-size: .7rem; }.preview-modal { padding: 0; }.preview-dialog { height: 100vh; border-radius: 0; }.preview-dialog header a { display: none; }
    .admin-topbar { padding: 12px 16px; }.topbar-action { display: none; }.admin-main { padding: 18px 12px; }.flash { margin: 12px 12px 0; }.admin-intro { align-items: flex-start; flex-direction: column; gap: 8px; }.admin-intro h2 { font-size: 2rem; }.stats-grid { grid-template-columns: 1fr 1fr; }.stat-card { min-height: 135px; grid-template-columns: 1fr; padding: 17px; }.stat-icon { display: none; }.stat-card strong { font-size: 2.2rem; }.panel-heading, .page-heading { align-items: flex-start; flex-direction: column; }.panel-heading .button { width: 100%; }.form-section { grid-template-columns: 1fr; padding: 22px 18px; }.form-section-number { width: 40px; height: 40px; }.form-grid { grid-template-columns: 1fr; }.form-note { margin: 18px 18px 0; }.form-actions { padding: 20px 18px; }.category-edit-form { grid-template-columns: 1fr; padding-left: 0; }.category-delete { padding-left: 0; }.login-panel { padding: 15px; }.login-card { padding: 30px 21px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }