:root {
  --tp-ink: #123143;
  --tp-muted: #526773;
  --tp-surface: #f7fbfb;
  --tp-border: #c6d8dc;
  --tp-primary: #006d77;
  --tp-primary-hover: #00535b;
  --tp-focus: #9a4f00;
  --tp-sidebar: 0px;
  --tp-gutter: 16px;
}

body { color: var(--tp-ink); background: var(--tp-surface); font-size: 16px; line-height: 1.6; }
a { color: var(--tp-primary); }
a:hover { color: var(--tp-primary-hover); }
:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 3px; }
.site-header { background: #fff; }
.brand { color: var(--tp-ink); font-weight: 700; letter-spacing: -0.02em; }
.brand img { color: var(--tp-primary); }
.skip-link { left: 1rem; position: absolute; top: -4rem; z-index: 1000; }
.skip-link:focus { background: #fff; color: var(--tp-ink); padding: .75rem 1rem; top: 1rem; }
.language-switcher { align-items: center; display: flex; gap: .5rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea, .btn { min-height: 44px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; }
.form-check { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.btn-primary { background-color: var(--tp-primary); border-color: var(--tp-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--tp-primary-hover); border-color: var(--tp-primary-hover); }
.hero-section { background: linear-gradient(135deg, #e2f3f1, #f7fbfb); }
.eyebrow { color: var(--tp-primary); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lead { color: var(--tp-muted); max-width: 42rem; }
.feature-card { background: #fff; border: 1px solid var(--tp-border); border-radius: 1rem; }
.error-page { max-width: 42rem; }
.workspace-container { width: 100%; max-width: 1280px; margin-inline: auto; padding: 24px var(--tp-gutter); }
.auth-panel { width: 100%; max-width: 448px; margin-inline: auto; }
.simple-panel { width: 100%; max-width: 640px; margin-inline: auto; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.page-heading { margin-bottom: 24px; }
.page-heading h1 { font-size: 1.5rem; margin-bottom: 8px; }
.page-heading p { color: var(--tp-muted); margin-bottom: 0; }
.empty-state { background: #fff; border: 1px solid var(--tp-border); border-radius: .75rem; padding: 24px; text-align: center; }
.app-shell { min-height: 100vh; }
.app-content { min-width: 0; }
.app-sidebar { --bs-offcanvas-width: min(85vw, 320px); background-color: var(--tp-ink) !important; color: #fff; }
.app-sidebar .offcanvas-body { display: block; }
.app-sidebar a { align-items: center; border-radius: .375rem; color: #fff; display: flex; min-height: 44px; padding: .5rem .75rem; text-decoration: none; }
.app-sidebar a:hover, .app-sidebar a[aria-current="page"] { background: #1d5365; color: #fff; }
.app-sidebar a:focus-visible { background: #1d5365; color: #fff; outline-color: #ffcf70; }
.app-sidebar form { margin: 0; }
.app-sidebar button { background: transparent; border: 0; border-radius: .375rem; color: #fff; padding: .5rem .75rem; text-align: left; width: 100%; }
.app-sidebar button:hover { background: #1d5365; }
.app-sidebar button:focus-visible { background: #1d5365; outline-color: #ffcf70; }
.app-sidebar .btn-close, .app-sidebar .btn-close:hover, .app-sidebar .btn-close:focus-visible { background-color: transparent; background-image: var(--bs-btn-close-bg); background-position: center; background-size: 1em; min-height: 44px; padding: 0; width: 44px; }
.app-sidebar-unavailable { align-items: center; color: #cad8dd; display: flex; justify-content: space-between; min-height: 44px; padding: .5rem .75rem; }
.app-sidebar-unavailable small { font-size: .75rem; }
.navigation-trigger { align-items: center; display: inline-flex; font-size: 1.35rem; justify-content: center; padding: .25rem .7rem; }
@media (max-width: 359.98px) { .brand span { display: none; } }
@media (max-width: 767.98px) { .app-shell { display: block; } .app-sidebar { min-height: auto; } .language-switcher .btn { padding-inline: .6rem; } }
@media (min-width: 768px) { :root { --tp-sidebar: 200px; --tp-gutter: 24px; } .page-heading h1 { font-size: 1.75rem; } .app-shell { display: grid; grid-template-columns: var(--tp-sidebar) minmax(0, 1fr); } .app-sidebar { min-width: 0; } }
@media (min-width: 1200px) { :root { --tp-sidebar: 224px; --tp-gutter: 32px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }