:root {
    --bg: #eef3f7;
    --bg-strong: #d9e5ef;
    --panel: rgba(255, 255, 255, 0.92);
    --text: #173042;
    --muted: #607589;
    --line: rgba(23, 48, 66, 0.12);
    --primary: #1f6f78;
    --primary-dark: #184f56;
    --accent: #f2a65a;
    --danger: #a33b20;
    --success: #216e39;
    --shadow: 0 12px 28px rgba(31, 59, 79, 0.08);
    --radius: 22px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(242, 166, 90, 0.26), transparent 28%),
        radial-gradient(circle at bottom right, rgba(31, 111, 120, 0.18), transparent 30%),
        linear-gradient(135deg, var(--bg) 0%, #f7fafc 100%);
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
}

a { color: inherit; text-decoration: none; }
.login-body, .app-body { min-height: 100vh; }
.app-body { overflow: hidden; }
.login-shell, .app-shell { display: grid; min-height: 100vh; }
.login-shell {
    grid-template-columns: 320px 1fr;
    align-items: stretch;
    height: 100vh;
    overflow: hidden;
}

.login-card, .sidebar, .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.login-card, .sidebar, .workspace { padding: 32px; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    color: var(--muted);
}
h1, h2, h3 { margin: 0 0 12px; line-height: 1.1; }
.hero-copy, .muted-copy { color: var(--muted); }

.brand-app-name {
    margin: 0 0 6px;
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text);
}
.brand-system-title {
    margin-bottom: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.brand-system-title-word {
    display: block;
    text-align: center;
}

.stack-form { display: grid; gap: 14px; }
label span {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--muted);
}
input, select, button, textarea { font: inherit; }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text);
}
textarea {
    min-height: 96px;
    resize: vertical;
}
input[readonly],
input:disabled,
select:disabled,
textarea:disabled,
textarea[readonly] {
    border-style: dashed;
    border-color: rgba(96, 117, 137, 0.35);
    background:
        repeating-linear-gradient(135deg, rgba(96, 117, 137, 0.06) 0, rgba(96, 117, 137, 0.06) 6px, transparent 6px, transparent 12px),
        rgba(238, 243, 247, 0.82);
    color: rgba(23, 48, 66, 0.62);
    cursor: not-allowed;
}
input[readonly]:focus,
input:disabled:focus,
select:disabled:focus,
textarea:disabled:focus,
textarea[readonly]:focus {
    outline: 0;
    box-shadow: none;
}
.btn, button {
    border: 0;
    border-radius: 14px;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease, filter 0.15s ease;
}
.btn:hover, button:hover {
    transform: translateY(-1px);
    filter: brightness(0.94);
}
.btn-primary { background: linear-gradient(145deg, var(--primary), var(--primary-dark)); color: #fff; }
.btn-secondary { background: rgba(31, 111, 120, 0.12); color: var(--primary-dark); }

.flash {
    margin-top: 16px;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
}
.flash-success { border-color: rgba(33, 110, 57, 0.2); color: var(--success); }
.flash-error { border-color: rgba(163, 59, 32, 0.2); color: var(--danger); }