* { box-sizing: border-box; }
html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #1f2328; background: #f6f8fa; }
body { margin: 0; min-height: 100vh; }
a { color: #0969da; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; }
input, textarea, select { min-width: 0; }

.page { background: #f6f8fa; color: #1f2328; padding: 16px; }
.shell { width: 100%; margin: 0 auto 80px; }
.shell.narrow { max-width: 720px; }
.shell.wide { max-width: 1280px; }
.panel { background: #fff; border: 1px solid #d0d7de; border-radius: 8px; padding: 24px; box-shadow: 0 1px 2px rgba(27,31,36,.04); margin-bottom: 18px; }
.login-panel { max-width: 440px; margin: 64px auto 0; }
.toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 12px 0 22px; }
.toolbar h1, .panel h1, .panel h2, .panel h3 { margin: 0 0 10px; line-height: 1.2; }
.toolbar p, .muted { color: #636c76; font-size: 12px; margin: 0; }
.actions { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 14px; }
.danger-link { color: #cf222e; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-two { grid-column: span 2; }
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.main-stack { min-width: 0; }
.side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: #57606a; }
.input { width: 100%; border: 1px solid #d0d7de; border-radius: 6px; padding: 10px 12px; color: #1f2328; background: #fff; outline: none; }
.input:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,.12); }
textarea.input { resize: vertical; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; }
.otp-input { text-align: center; font-size: 28px; letter-spacing: .25em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.button { border: 1px solid #d0d7de; background: #f6f8fa; color: #24292f; border-radius: 6px; padding: 10px 14px; font-weight: 700; cursor: pointer; text-align: center; }
.button:hover { background: #f3f4f6; text-decoration: none; }
.button.primary { background: #2da44e; border-color: #2da44e; color: #fff; }
.button.primary:hover { background: #2c974b; }
.button.danger { color: #cf222e; border-color: #ffc1c0; }
.button.ghost { background: #fff; }
.button.full, .full { width: 100%; display: block; }

.notice { border-radius: 8px; border: 1px solid #d0d7de; padding: 14px; margin-bottom: 18px; font-size: 14px; font-weight: 700; }
.notice.success { background: #dafbe1; border-color: #aceebb; color: #116329; }
.notice.error { background: #ffebe9; border-color: #ffcecb; color: #cf222e; }
.qr-box { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; border: 1px solid #d8dee4; border-radius: 8px; padding: 16px; text-align: center; }
.qr-box img { width: 160px; height: 160px; object-fit: contain; }
.qr-box code { display: block; padding: 8px 12px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; font-size: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #d0d7de; background: #fff; border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: pointer; color: #57606a; }
.subpanel { border: 1px solid #d8dee4; border-radius: 8px; padding: 14px; background: #f6f8fa; }
.check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.check-grid label, .dept-checks label { flex-direction: row; align-items: center; font-weight: 600; color: #24292f; }
.dept-checks { display: grid; gap: 8px; max-height: 220px; overflow: auto; padding: 8px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; margin-bottom: 10px; }

.search { display: flex; gap: 8px; margin-bottom: 12px; }
.user-list { display: grid; gap: 8px; margin-top: 12px; }
.user-row { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid #d0d7de; border-radius: 6px; color: #1f2328; background: #fff; }
.user-row span { color: #636c76; font-size: 12px; }
.user-row.active { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,.1); }
.log-list { display: grid; gap: 10px; }
.log-item { border: 1px solid #d8dee4; border-radius: 8px; padding: 12px; background: #fff; }
.log-item p { margin: 6px 0 0; }
.center { text-align: center; }

/* Compatibility subset for old templates that used Tailwind utility classes. */
.bg-\[\#f6f8fa\] { background: #f6f8fa; }
.bg-white { background: #fff; }
.text-\[\#1f2328\] { color: #1f2328; }
.text-\[\#636c76\] { color: #636c76; }
.text-\[\#0A3B8F\] { color: #0A3B8F; }
.text-white { color: #fff; }
.text-gray-400 { color: #8c959f; }
.text-gray-500 { color: #6e7781; }
.text-gray-600 { color: #57606a; }
.text-gray-700 { color: #424a53; }
.text-gray-800 { color: #32383f; }
.text-gray-900 { color: #24292f; }
.text-red-500, .text-red-600 { color: #cf222e; }
.text-green-700 { color: #116329; }
.text-blue-600, .text-\[\#0969da\] { color: #0969da; }
.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-16 { width: 64px; }
.w-3 { width: 12px; } .w-4 { width: 16px; } .w-6 { width: 24px; } .w-12 { width: 48px; } .w-24 { width: 96px; } .w-40 { width: 160px; } .w-44 { width: 176px; }
.h-2 { height: 8px; } .h-3 { height: 12px; } .h-4 { height: 16px; } .h-6 { height: 24px; } .h-12 { height: 48px; } .h-24 { height: 96px; } .h-40 { height: 160px; } .h-44 { height: 176px; } .h-full { height: 100%; }
.max-w-sm { max-width: 384px; }
.max-w-md { max-width: 448px; }
.max-w-2xl { max-width: 672px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-16 { margin-top: 64px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-20 { margin-bottom: 80px; }
.mr-1 { margin-right: 4px; } .mt-auto { margin-top: auto; }
.p-1 { padding: 4px; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; } .p-10 { padding: 40px; }
.px-1\.5 { padding-left: 6px; padding-right: 6px; } .px-2 { padding-left: 8px; padding-right: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; } .px-4 { padding-left: 16px; padding-right: 16px; } .px-10 { padding-left: 40px; padding-right: 40px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; } .py-1 { padding-top: 4px; padding-bottom: 4px; } .py-1\.5 { padding-top: 6px; padding-bottom: 6px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .py-3 { padding-top: 12px; padding-bottom: 12px; } .py-3\.5 { padding-top: 14px; padding-bottom: 14px; } .py-4 { padding-top: 16px; padding-bottom: 16px; } .py-6 { padding-top: 24px; padding-bottom: 24px; } .py-20 { padding-top: 80px; padding-bottom: 80px; }
.pt-4 { padding-top: 16px; } .pt-6 { padding-top: 24px; } .pt-8 { padding-top: 32px; }
.border { border: 1px solid #d0d7de; }
.border-2 { border-width: 2px; border-style: solid; }
.border-t { border-top: 1px solid #d0d7de; }
.border-b { border-bottom: 1px solid #d0d7de; }
.border-\[\#d0d7de\] { border-color: #d0d7de; }
.border-white { border-color: #fff; }
.border-red-100 { border-color: #ffcecb; }
.border-gray-100 { border-color: #d8dee4; }
.border-gray-200 { border-color: #d0d7de; }
.border-gray-50 { border-color: #f6f8fa; }
.border-blue-300 { border-color: #8cbeff; }
.border-blue-400 { border-color: #54aeff; }
.border-blue-500 { border-color: #0969da; }
.rounded { border-radius: 4px; } .rounded-md { border-radius: 6px; } .rounded-lg { border-radius: 8px; } .rounded-xl { border-radius: 8px; } .rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px rgba(27,31,36,.04); }
.shadow-md { box-shadow: 0 4px 10px rgba(27,31,36,.1); }
.shadow-inner { box-shadow: inset 0 1px 2px rgba(27,31,36,.08); }
.shadow-lg, .shadow-xl { box-shadow: 0 8px 24px rgba(140,149,159,.2); }
.text-center { text-align: center; } .text-left { text-align: left; }
.text-\[8px\] { font-size: 8px; } .text-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-xs { font-size: 12px; } .text-sm { font-size: 14px; } .text-lg { font-size: 18px; } .text-xl { font-size: 20px; } .text-2xl { font-size: 24px; } .text-3xl { font-size: 30px; }
.font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.font-sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.italic { font-style: italic; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: .05em; } .tracking-widest { letter-spacing: .08em; } .tracking-\[0\.2em\] { letter-spacing: .2em; }
.tracking-tight { letter-spacing: 0; } .tracking-tighter { letter-spacing: 0; }
.tracking-\[0\.4em\] { letter-spacing: .4em; }
.leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; }
.space-x-2 > * + * { margin-left: 8px; } .space-x-3 > * + * { margin-left: 12px; } .space-x-4 > * + * { margin-left: 16px; }
.space-y-0 > * + * { margin-top: 0; } .space-y-1 > * + * { margin-top: 4px; } .space-y-1\.5 > * + * { margin-top: 6px; } .space-y-2 > * + * { margin-top: 8px; } .space-y-4 > * + * { margin-top: 16px; } .space-y-6 > * + * { margin-top: 24px; }
.gap-2 { gap: 8px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.overflow-hidden { overflow: hidden; }
.outline-none { outline: none; }
.select-all { user-select: all; }
.select-none { user-select: none; }
.cursor-pointer { cursor: pointer; }
.transition-all { transition: all .15s ease; }
.transition-colors { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.active\:scale-\[0\.98\]:active { transform: scale(.98); }
.active\:scale-95:active { transform: scale(.95); }
.bg-\[\#2da44e\] { background: #2da44e; }
.bg-\[\#2c974b\] { background: #2c974b; }
.bg-\[\#dc2626\] { background: #dc2626; }
.bg-\[\#2563eb\] { background: #2563eb; }
.bg-gray-800 { background: #24292f; }
.bg-\[\#0A3B8F\] { background: #0A3B8F; }
.bg-\[\#f6f8fa\] { background: #f6f8fa; }
.bg-\[\#fcfcfc\] { background: #fcfcfc; }
.bg-green-50 { background: #dafbe1; }
.bg-red-50 { background: #ffebe9; }
.bg-gray-50 { background: #f6f8fa; }
.bg-gray-100 { background: #eaeef2; }
.bg-green-100 { background: #aceebb; }
.bg-amber-50 { background: #fff8c5; }
.text-amber-700 { color: #9a6700; }
.text-green-600 { color: #1a7f37; }
.text-green-700 { color: #116329; }
.bg-black { background: #000; }
.border-green-200, .border-green-100 { border-color: #aceebb; }
.border-red-200 { border-color: #ffcecb; }
.border-amber-100, .border-amber-200 { border-color: #f0b429; }
.hover\:bg-\[\#2c974b\]:hover { background: #2c974b; }
.hover\:bg-\[\#2c974b\]:hover { background: #2c974b; }
.hover\:bg-gray-50:hover { background: #f6f8fa; }
.hover\:bg-gray-100:hover { background: #eaeef2; }
.hover\:bg-gray-200:hover { background: #d8dee4; }
.hover\:bg-black:hover { background: #000; }
.hover\:underline:hover { text-decoration: underline; }
.focus\:bg-white:focus { background: #fff; }
.focus\:border-blue-300:focus { border-color: #8cbeff; }
.focus\:border-blue-400:focus { border-color: #54aeff; }
.focus\:border-blue-500:focus { border-color: #0969da; }
.focus\:border-\[\#0969da\]:focus { border-color: #0969da; }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px #0969da; }
.focus\:ring-\[\#0969da\]:focus { box-shadow: 0 0 0 1px #0969da; }

@media (max-width: 840px) {
    .toolbar, .split { align-items: stretch; }
    .toolbar, .layout { display: flex; flex-direction: column; }
    .side { position: static; max-height: none; }
    .grid.two, .grid.three, .check-grid { grid-template-columns: 1fr; }
    .span-two { grid-column: auto; }
}
@media (min-width: 640px) {
    .sm\:w-auto { width: auto; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-end { align-items: flex-end; }
    .sm\:space-y-0 > * + * { margin-top: 0; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.relative { position: relative; } .absolute { position: absolute; }
.bottom-0 { bottom: 0; } .right-0 { right: 0; }
.object-cover { object-fit: cover; }
.list-none { list-style: none; padding-left: 0; }
.opacity-80 { opacity: .8; }
.content-area { word-break: break-word; white-space: pre-wrap; }

.super-page .shell.wide { max-width: 1440px; }
.super-toolbar { align-items: center; }
.super-nav { display: flex; gap: 8px; margin: 0 0 18px; border-bottom: 1px solid #d0d7de; overflow-x: auto; }
.super-nav a { padding: 12px 14px; color: #57606a; font-weight: 700; border-bottom: 2px solid transparent; white-space: nowrap; }
.super-nav a.active { color: #0969da; border-bottom-color: #0969da; text-decoration: none; }
.super-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.super-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.departments-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.button.tiny { padding: 4px 7px; font-size: 11px; font-weight: 700; }

.org-chart { margin-top: 18px; overflow: auto; padding: 18px; background: #f6f8fa; border: 1px solid #d8dee4; border-radius: 8px; min-height: 360px; }
.org-tree-list { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.org-tree-list:first-child { padding-left: 0; }
.org-node { list-style: none; margin: 0 0 12px; position: relative; }
.org-node::before { content: ""; position: absolute; left: -16px; top: 20px; width: 14px; border-top: 1px solid #d0d7de; }
.org-tree-list:first-child > .org-node::before { display: none; }
.org-card { background: #fff; border: 1px solid #d0d7de; border-radius: 8px; padding: 12px; min-width: 260px; display: grid; gap: 6px; box-shadow: 0 1px 2px rgba(27,31,36,.04); }
.org-card.drop-ready { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,.12); }
.org-name { font-weight: 800; color: #1f2328; }
.org-path { font-size: 11px; color: #636c76; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.org-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.draggable-users .user-row { cursor: grab; }
.draggable-users .user-row:active { cursor: grabbing; }

.role-panel .switch-line { flex-direction: row; align-items: center; gap: 8px; color: #24292f; font-size: 13px; }
.role-panel .super-switch { margin-top: 10px; }
.admin-options { margin-top: 14px; display: grid; gap: 12px; }
.admin-options.disabled { opacity: .45; }
.admin-options.disabled * { cursor: not-allowed; }

@media (max-width: 900px) {
    .super-grid, .departments-grid { grid-template-columns: 1fr; }
    .super-side { position: static; max-height: none; }
}