/* ALBERTOENGO's original Material-inspired application language.
   It uses the same clarity, rhythm and responsive behavior people expect from
   modern Google products without copying Google pages or product branding. */
:root {
  --bg:#f8fafd; --panel:#fff; --panel-2:#f1f3f4; --text:#202124;
  --muted:#5f6368; --faint:#80868b; --line:rgba(60,64,67,.14);
  --line-strong:rgba(60,64,67,.28); --accent:#1a73e8; --accent-ink:#fff;
  --danger:#d93025; --shadow:0 1px 2px rgba(60,64,67,.18),0 2px 6px rgba(60,64,67,.08);
  --radius:16px; --ease:cubic-bezier(.2,0,0,1);
}
html[data-theme="dark"] {
  --bg:#202124; --panel:#292a2d; --panel-2:#35363a; --text:#e8eaed;
  --muted:#bdc1c6; --faint:#9aa0a6; --line:rgba(232,234,237,.14);
  --line-strong:rgba(232,234,237,.26); --accent:#8ab4f8; --accent-ink:#202124;
  --danger:#f28b82; --shadow:0 2px 8px rgba(0,0,0,.32);
}

body.is-authenticated { background:var(--bg); }
.sidebar { width:272px; padding:18px 12px 14px; border-right:1px solid var(--line); background:var(--bg); box-shadow:none; }
.app-brand { padding:8px 12px 21px; }
.app-brand .brand-mark,.brand-mark { border:0; border-radius:50%; background:#1a73e8; box-shadow:none; color:#fff; }
.app-brand b { color:var(--text); font:650 13px/1 "Google Sans",Roboto,Arial,sans-serif; letter-spacing:.025em; }
.app-brand small { letter-spacing:.11em; }
.global-search { min-height:48px; padding:0 14px; border:0; border-radius:24px; background:var(--panel-2); box-shadow:none; color:var(--muted); font:400 14px/1 Roboto,Arial,sans-serif; transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); }
.global-search:hover,.global-search:focus-visible { background:var(--panel); box-shadow:var(--shadow); transform:translateY(-1px); outline:0; }
.global-search span:first-child { color:var(--accent); font-size:20px; }
.global-search kbd { border:0; background:transparent; color:var(--faint); font-size:11px; }
.sidebar nav { padding:12px 0; }
.sidebar nav p { padding:16px 14px 7px; color:var(--faint); font:700 10px/1 Roboto,Arial,sans-serif; letter-spacing:.12em; }
.nav-item { min-height:42px; gap:13px; padding:0 14px; border-radius:0 22px 22px 0; color:var(--muted); font:500 14px/1 Roboto,Arial,sans-serif; }
.nav-item span { color:inherit; font-size:18px; }
.nav-item:hover { background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--text); }
.nav-item.active { background:color-mix(in srgb,var(--accent) 14%,var(--panel)); box-shadow:none; color:#174ea6; font-weight:700; }
html[data-theme="dark"] .nav-item.active { color:#d3e3fd; }
.sidebar-bottom { border-top:0; }
.user-chip { border-radius:12px; transition:background .2s var(--ease); }
.user-chip:hover { background:var(--panel-2); }
.avatar { background:#1a73e8; }

.topbar { height:72px; padding:0 38px; border-bottom:0; background:color-mix(in srgb,var(--bg) 92%,transparent); box-shadow:0 1px 2px rgba(60,64,67,.08); }
.breadcrumbs { font:500 14px/1 Roboto,Arial,sans-serif; }
.breadcrumbs b { color:var(--text); }
.icon-button,.mobile-menu { width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:var(--muted); transition:background .2s var(--ease),transform .2s var(--ease); }
.icon-button:hover,.mobile-menu:hover { background:var(--panel-2); color:var(--text); transform:scale(1.04); }
.content { max-width:1600px; padding:38px clamp(24px,4vw,60px) 90px; }
.page-heading h1 { color:var(--text); font-family:"Google Sans",Roboto,Arial,sans-serif; font-weight:500; letter-spacing:-.04em; }
.page-heading p { max-width:640px; color:var(--muted); font:400 15px/1.55 Roboto,Arial,sans-serif; }
.eyebrow { color:var(--accent); font:700 10px/1 Roboto,Arial,sans-serif; letter-spacing:.12em; }
.metric-grid { gap:18px; }
.metric-card,.section-card,.file-card,.empty-state,.welcome-card { border:1px solid var(--line); background:var(--panel); box-shadow:none; }
.metric-card { min-height:132px; padding:21px; border-radius:16px; transition:box-shadow .2s var(--ease),transform .2s var(--ease); }
.metric-card:hover,.section-card:hover,.file-card:hover { border-color:transparent; box-shadow:var(--shadow); transform:translateY(-2px); }
.metric-card span,.file-card p { color:var(--muted); font:500 12px/1.4 Roboto,Arial,sans-serif; }
.metric-card strong { color:var(--text); font:500 32px/1 "Google Sans",Roboto,Arial,sans-serif; }
.welcome-card { min-height:260px; padding:38px; border-radius:24px; background:linear-gradient(115deg,#e8f0fe,#f8fafd 52%,#e6f4ea); overflow:hidden; }
html[data-theme="dark"] .welcome-card { background:linear-gradient(115deg,#27344f,#292a2d 52%,#26362c); }
.welcome-card::after { color:rgba(26,115,232,.12); font-family:"Google Sans",Roboto,Arial,sans-serif; }
.welcome-card h2 { color:#174ea6; font:500 clamp(30px,3vw,44px)/1.08 "Google Sans",Roboto,Arial,sans-serif; }
html[data-theme="dark"] .welcome-card h2 { color:#d3e3fd; }
.welcome-card p { color:#3c4043; font:400 15px/1.6 Roboto,Arial,sans-serif; }
html[data-theme="dark"] .welcome-card p { color:#bdc1c6; }
.section-title { margin:38px 0 16px; }
.section-title h2 { color:var(--text); font:500 20px/1 "Google Sans",Roboto,Arial,sans-serif; }
.section-card { min-height:194px; padding:22px; border-radius:16px; }
.section-card .card-icon,.file-card .file-icon { color:var(--accent); }
.section-card h3 { color:var(--text); font:500 17px/1.25 "Google Sans",Roboto,Arial,sans-serif; }
.section-card p { color:var(--muted); font:400 13px/1.5 Roboto,Arial,sans-serif; }

.toolbar { gap:10px; margin:20px 0 24px; }
.toolbar input { min-height:46px; max-width:460px; border:1px solid var(--line); border-radius:23px; background:var(--panel); color:var(--text); font:400 14px/1 Roboto,Arial,sans-serif; padding:0 18px; transition:box-shadow .2s var(--ease),border-color .2s var(--ease); }
.toolbar input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.toolbar button,.secondary { min-height:40px; border:0; border-radius:20px; background:var(--panel-2); color:#1967d2; font:600 13px/1 Roboto,Arial,sans-serif; transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); }
.toolbar button:hover,.secondary:hover { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); box-shadow:0 1px 2px rgba(60,64,67,.16); transform:translateY(-1px); }
.primary { min-height:42px; border-radius:21px; background:#1a73e8; box-shadow:none; color:#fff; font:600 13px/1 Roboto,Arial,sans-serif; }
.primary:hover { background:#1765cc; box-shadow:0 2px 5px rgba(26,115,232,.28); transform:translateY(-1px); }
.primary:focus-visible,.secondary:focus-visible,.toolbar button:focus-visible,.nav-item:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 36%,transparent); outline-offset:2px; }
.file-card { min-height:168px; border-radius:16px; padding:18px; }
.file-card h3 { color:var(--text); font:500 14px/1.35 Roboto,Arial,sans-serif; }
.file-card .favorite,.file-card .file-actions { border-radius:50%; color:var(--muted); transition:background .18s var(--ease),color .18s var(--ease); }
.file-card .favorite:hover,.file-card .file-actions:hover { background:var(--panel-2); color:var(--accent); }
.empty-state { border-style:dashed; border-radius:20px; background:transparent; }
.empty-state b { color:var(--text); font:500 20px/1.2 "Google Sans",Roboto,Arial,sans-serif; }

.command-dialog,.action-dialog { border:0; border-radius:24px; background:var(--panel); box-shadow:0 12px 34px rgba(60,64,67,.28); }
.command-dialog { margin-top:9vh; }
.command-dialog form>label { min-height:64px; padding:12px 18px; }
.command-dialog input { color:var(--text); font:400 17px/1 Roboto,Arial,sans-serif; }
.command-dialog form>div button { min-height:46px; border-radius:12px; color:var(--muted); font:500 14px/1 Roboto,Arial,sans-serif; }
.command-dialog form>div button:hover { background:color-mix(in srgb,var(--accent) 10%,var(--panel)); color:var(--text); }
.action-dialog form { padding:30px; }
.action-dialog h2 { font:500 28px/1.2 "Google Sans",Roboto,Arial,sans-serif; }
.action-dialog label { color:var(--muted); font:500 13px/1.3 Roboto,Arial,sans-serif; }
.action-dialog input { min-height:50px; border-radius:6px; font-size:16px; }
.toast-region { right:24px; bottom:24px; }
.toast { border:0; border-radius:10px; background:#303134; box-shadow:0 4px 12px rgba(60,64,67,.32); color:#fff; font:400 14px/1.4 Roboto,Arial,sans-serif; }

/* Shared folders and files: a focused Drive-like viewer. The file stream is
   still requested only after the server has approved the share token. */
.public-share .auth-brand { border-right:0; background:#f8fafd; background-image:radial-gradient(circle at 82% 20%,#e8f0fe,transparent 30%),radial-gradient(circle at 16% 85%,#e6f4ea,transparent 34%); }
.public-share .brand { color:#202124; }.public-share .brand-mark { background:#1a73e8; color:#fff; }
.public-share .auth-brand .brand-copy h1 { color:#202124; font-family:"Google Sans",Roboto,Arial,sans-serif; font-weight:500; }.public-share .auth-brand .brand-copy h1 em { color:#1a73e8; }
.public-share .auth-brand .brand-copy p,.public-share .auth-brand footer { color:#5f6368; }
.public-share .auth-panel { background:#fff; }.public-share .public-share-card { max-width:860px; }
.public-share .public-folder-browser { margin-top:22px; border:1px solid #dadce0; border-radius:16px; overflow:hidden; }
.public-share .public-folder-browser>header { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:0 18px; border-bottom:1px solid #dadce0; background:#f8fafd; color:#5f6368; font:500 12px/1 Roboto,Arial,sans-serif; }
.public-share .public-folder-browser nav { display:flex; align-items:center; min-width:0; gap:8px; overflow:auto; }.public-share .public-folder-browser nav button { flex:0 0 auto; border:0; border-radius:18px; background:transparent; color:#1967d2; font:500 13px/1 Roboto,Arial,sans-serif; padding:7px 9px; }.public-share .public-folder-browser nav button:hover { background:#e8f0fe; }
.public-share .public-file-grid { padding:14px; gap:12px; }.public-share .public-file-card { border-color:#dadce0; border-radius:12px; background:#fff; }.public-share .public-file-card:hover { border-color:#1a73e8; box-shadow:0 2px 6px rgba(60,64,67,.16); }.public-share .public-file-open { min-height:128px; }.public-share .public-file-icon { color:#1a73e8; }.public-share .public-file-open b { color:#202124; font:500 14px/1.3 Roboto,Arial,sans-serif; }.public-share .public-file-open small,.public-share .public-file-viewer>header small { color:#5f6368; font:400 11px/1.4 Roboto,Arial,sans-serif; }
.public-share .public-file-download,.public-share .public-viewer-back { border:0; border-radius:50%; background:transparent; color:#1967d2; }.public-share .public-file-download:hover,.public-share .public-viewer-back:hover { background:#e8f0fe; }.public-share .public-viewer-back { width:auto; border-radius:18px; font:500 13px/1 Roboto,Arial,sans-serif; padding:9px 12px; }
.public-share .public-file-viewer { margin-top:22px; }.public-share .public-file-viewer>header { min-height:58px; padding:0 8px 12px 0; border-bottom-color:#dadce0; }.public-share .public-file-viewer>header b { color:#202124; font:500 15px/1.3 Roboto,Arial,sans-serif; }.public-share .public-preview-stage { border-color:#dadce0; border-radius:14px; background:#f8fafd; }.public-share .public-preview-stage iframe { background:#fff; }
.public-share[data-share-style="gallery"] .public-file-card { background:linear-gradient(145deg,#f8fafd,#e8f0fe); }.public-share[data-share-style="portfolio"] .public-file-open { background:linear-gradient(145deg,#e8f0fe,transparent 62%); }.public-share[data-share-style="minimal"] .public-file-card { border-color:#dadce0; }

/* Account and Owner controls share the same predictable field rhythm. */
.account-grid,.settings-grid { gap:20px; }
.account-panel,.account-inline-form { padding:26px; border-color:var(--line); border-radius:18px; background:var(--panel); box-shadow:none; }
.account-panel:hover { box-shadow:0 1px 3px rgba(60,64,67,.12); }
.account-panel>header { align-items:center; min-height:34px; }.account-panel h2,.account-inline-form h2 { color:var(--text); font:500 21px/1.2 "Google Sans",Roboto,Arial,sans-serif; }
.account-panel-intro,.account-inline-form>div>p { max-width:760px; color:var(--muted); font:400 13px/1.6 Roboto,Arial,sans-serif; }
.account-count { background:#e8f0fe; color:#174ea6; font:600 13px/1 Roboto,Arial,sans-serif; }
.account-link { min-height:54px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); font:500 13px/1 Roboto,Arial,sans-serif; }.account-link:hover { border-color:var(--accent); background:#f8fafd; box-shadow:none; }.account-link small { color:#1967d2; font:500 12px/1 Roboto,Arial,sans-serif; }
.smtp-fields { gap:16px; }.smtp-fields label,.account-email-form label,.account-password-form label { color:var(--text); font:500 13px/1.35 Roboto,Arial,sans-serif; }.smtp-fields input,.smtp-fields select,.account-email-form input,.account-password-form input { min-height:50px; border-color:#dadce0; border-radius:6px; background:var(--panel); color:var(--text); font:400 16px/1.2 Roboto,Arial,sans-serif; box-shadow:none; }.smtp-fields input:focus,.smtp-fields select:focus,.account-email-form input:focus,.account-password-form input:focus { border-color:#1a73e8; box-shadow:0 0 0 2px #d2e3fc; transform:none; }
.account-form-actions { justify-content:flex-start; margin-top:4px; }.account-form-actions .primary { min-width:190px; }
.managed-user-list { gap:10px; }.managed-user-list>div { min-height:62px; padding:12px 14px; border-color:var(--line); border-radius:12px; background:var(--panel); }.managed-user-list b { color:var(--text); font:500 14px/1.25 Roboto,Arial,sans-serif; }.managed-user-list small { color:var(--muted); font:400 12px/1.35 Roboto,Arial,sans-serif; }.account-status { border-radius:999px; font:600 11px/1 Roboto,Arial,sans-serif; }
.permission-choice { min-height:76px; }.permission-choice b { font:500 14px/1.25 Roboto,Arial,sans-serif; }.permission-choice small { font:400 12px/1.4 Roboto,Arial,sans-serif; }.yes-no { border-color:#dadce0; border-radius:20px; background:#f1f3f4; }.yes-no span { min-height:34px; border-radius:17px; font:600 12px/1 Roboto,Arial,sans-serif; }.yes-no input:checked+span { background:#fff; color:#1967d2; box-shadow:0 1px 2px rgba(60,64,67,.18); }
.passkey-settings-card { background:linear-gradient(145deg,#f8fafd,#fff 54%); }.passkey-add { grid-template-columns:minmax(220px,1fr) auto; gap:16px; }.passkey-add label { color:var(--text); font:500 13px/1.35 Roboto,Arial,sans-serif; }.passkey-add input,.passkey-row input { min-height:48px; border-color:#dadce0; border-radius:6px; background:#fff; color:#202124; font:400 16px/1.2 Roboto,Arial,sans-serif; }.passkey-row { gap:18px; padding:15px; border-color:#dadce0; border-radius:14px; background:#fff; }.passkey-row input[readonly] { border-color:transparent; background:transparent; cursor:default; padding-inline:0; }.passkey-row input.is-editing { border-color:#1a73e8; box-shadow:0 0 0 2px #d2e3fc; padding-inline:12px; }.passkey-row-actions { gap:8px; }.passkey-row-actions .secondary { min-height:38px; padding:0 14px; border-radius:19px; }.passkey-row-actions .passkey-remove { color:#c5221f; }.passkey-row-details small { color:var(--muted); font:400 11px/1.4 Roboto,Arial,sans-serif; }
@media(max-width:720px) { .account-panel,.account-inline-form { padding:21px; }.account-form-actions .primary { width:100%; }.passkey-add { grid-template-columns:1fr; }.passkey-add .primary { width:100%; }.managed-user-list>div { align-items:flex-start; flex-direction:column; }.permission-choice { align-items:stretch; } }

@media (max-width:900px) {
  .sidebar { width:292px; padding-top:14px; }
  .topbar { height:64px; padding:0 16px; }
  .content { padding:28px 18px 92px; }
  .metric-grid { gap:12px; }
  .welcome-card { min-height:225px; padding:27px; }
  .toolbar { flex-wrap:wrap; }
  .toolbar input { min-width:100%; max-width:none; }
  .command-dialog { width:calc(100% - 20px); margin-top:4vh; border-radius:20px; }
}
@media (prefers-reduced-motion:no-preference) {
  .content > * { animation:material-enter .42s var(--ease) both; }
  .content > *:nth-child(2) { animation-delay:.04s; }.content > *:nth-child(3) { animation-delay:.08s; }.content > *:nth-child(4) { animation-delay:.12s; }
}
@keyframes material-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }