:root {
    --ink: #15211e;
    --paper: #f2f1e9;
    --surface: #fff;
    --line: #d8dbd2;
    --muted: #68736f;
    --accent: #d9ff57;
    --success: #1d765d;
    --radius: 14px;
    --shadow: 0 18px 50px rgba(21, 33, 30, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 16px/1.55 Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link {
    position: fixed; z-index: 100; top: 12px; left: 12px;
    padding: 10px 16px; color: white; background: var(--ink);
    transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.site-header {
    position: sticky; z-index: 20; top: 0; color: white;
    background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.12);
}
.header-inner {
    display: flex; min-height: 62px; align-items: center;
    justify-content: space-between; gap: 40px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: white; text-decoration: none; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: -.02em; }
.brand small { color: #aeb9b5; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.main-nav { display: flex; align-self: stretch; }
.main-nav a {
    display: flex; min-height: 44px; padding: 0 16px; align-items: center;
    color: #c9d1ce; border-bottom: 3px solid transparent; text-decoration: none;
}
.main-nav a:hover, .main-nav a.is-active { color: white; border-bottom-color: var(--accent); }
.logout-form { display: flex; }
.logout-form button, .guest-nav a {
    display: flex; min-height: 44px; padding: 0 16px; align-items: center;
    color: #c9d1ce; background: transparent; border: 0;
    border-bottom: 3px solid transparent; text-decoration: none; cursor: pointer;
}
.logout-form button:hover, .logout-form button:focus-visible,
.guest-nav a:hover, .guest-nav a.is-active { color: white; border-bottom-color: var(--accent); }
.guest-nav { display: flex; align-self: stretch; }
.menu-button {
    display: none; width: 46px; height: 46px; padding: 11px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: transparent;
}
.menu-button > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: white; }

.hero { color: white; background: var(--ink); }
.hero-inner {
    display: grid; min-height: 255px; padding-block: 42px;
    grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 40px;
}
.eyebrow {
    display: block; margin-bottom: 10px; color: var(--muted);
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.hero .eyebrow { color: var(--accent); }
h1, h2, p { margin-top: 0; }
h1, h2 { line-height: 1.08; letter-spacing: -.045em; }
.hero h1 { max-width: 820px; margin-bottom: 16px; font-size: clamp(38px,5vw,60px); }
.hero p { max-width: 780px; margin-bottom: 0; color: #bdc6c2; font-size: 17px; }
.button {
    display: inline-flex; min-height: 48px; padding: 12px 20px;
    align-items: center; justify-content: center; gap: 18px;
    border: 1px solid transparent; border-radius: 9px;
    font-weight: 750; text-decoration: none; cursor: pointer;
}
.button-primary { color: var(--ink); background: var(--accent); }
.button-primary:hover { background: #e4ff82; }
.button-ghost { border-color: var(--line); background: transparent; }

.dashboard { display: grid; gap: 24px; padding-block: 30px 70px; }
.tool-catalog-hero { min-height: 225px; grid-template-columns: minmax(0,1fr); }
.tool-catalog { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tool-catalog .section-heading > p { max-width: 420px; margin: 0; color: var(--muted); font-size: 13px; }
.tool-type-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.tool-type-card {
    display: grid; min-height: 285px; padding: 28px; grid-template-rows: 112px 1fr; gap: 22px;
    color: inherit; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none;
    transition: background-color .18s ease, transform .18s ease;
}
.tool-type-card:nth-child(3n) { border-right: 0; }
.tool-type-card:nth-last-child(-n+3) { border-bottom: 0; }
.tool-type-card:hover { position: relative; z-index: 1; background: #f7faec; box-shadow: inset 0 -4px 0 var(--accent); }
.tool-type-content { display: grid; align-content: start; }
.tool-type-content > strong { margin-bottom: 8px; font-size: 20px; line-height: 1.15; }
.tool-type-content > small { min-height: 63px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tool-type-content > span { margin-top: 17px; color: #365744; font-size: 12px; font-weight: 800; }
.tool-type-content > span i { margin-left: 8px; font-style: normal; }
.tool-type-card.is-planned .tool-type-icon { opacity: .72; }
.tool-type-icon {
    position: relative; display: grid; width: 112px; height: 112px; place-items: center;
    color: var(--ink); background: #eef2e7; border: 1px solid #d8ded2; border-radius: 50%;
}
.tool-type-icon::before, .tool-type-icon::after, .tool-type-icon i, .tool-type-icon b { position: absolute; display: block; content: ''; }
.tool-type-icon::before { top: 16px; bottom: 16px; left: 50%; width: 28px; background: var(--ink); border-radius: 5px 5px 11px 11px; transform: translateX(-50%); }
.tool-type-icon::after { top: 13px; left: 50%; width: 38px; height: 10px; background: var(--accent); border: 3px solid var(--ink); border-radius: 3px; transform: translateX(-50%); }
.tool-type-icon i { z-index: 1; top: 38px; left: 50%; width: 30px; height: 35px; transform: translateX(-50%); }
.tool-icon-thread-mill i { background: repeating-linear-gradient(0deg,transparent 0 5px,var(--accent) 5px 8px); }
.tool-icon-thread-mill b { z-index: 2; top: 33px; left: 45px; width: 22px; height: 43px; border-left: 3px solid white; transform: skewX(-17deg); }
.tool-icon-end-mill i { background: repeating-linear-gradient(90deg,transparent 0 6px,var(--accent) 6px 9px); }
.tool-icon-end-mill b { z-index: 2; bottom: 17px; left: 42px; width: 28px; height: 10px; border-top: 3px solid white; border-radius: 50%; }
.tool-icon-drill::before { bottom: 27px; border-radius: 4px; transform: translateX(-50%) rotate(12deg); }
.tool-icon-drill::after { top: auto; bottom: 11px; width: 0; height: 0; background: transparent; border: 18px solid transparent; border-top: 28px solid var(--ink); border-radius: 0; transform: translateX(-50%); }
.tool-icon-drill i { background: repeating-linear-gradient(135deg,transparent 0 7px,var(--accent) 7px 10px); transform: translateX(-50%) rotate(12deg); }
.tool-icon-reamer i { background: repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 7px); }
.tool-icon-reamer b { z-index: 2; bottom: 16px; left: 42px; width: 28px; height: 14px; background: var(--ink); clip-path: polygon(0 0,100% 0,80% 100%,20% 100%); }
.tool-icon-tap i { width: 34px; background: repeating-linear-gradient(155deg,transparent 0 5px,var(--accent) 5px 8px); }
.tool-icon-tap b { z-index: 2; top: 27px; left: 39px; width: 34px; height: 51px; border-right: 3px solid white; transform: skewX(-16deg); }
.tool-icon-countersink::before { top: 15px; bottom: auto; height: 35px; border-radius: 4px; }
.tool-icon-countersink::after { top: 43px; width: 62px; height: 42px; background: var(--ink); border: 0; clip-path: polygon(50% 100%,0 0,100% 0); }
.tool-icon-countersink i { top: 47px; width: 38px; height: 23px; background: var(--accent); clip-path: polygon(50% 100%,0 0,18% 0,50% 68%,82% 0,100% 0); }
.tool-placeholder-layout { padding-block: 34px 70px; }
.tool-placeholder-card {
    display: grid; padding: 42px; grid-template-columns: 140px minmax(0,1fr); align-items: center; gap: 34px;
    background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tool-placeholder-card h2 { margin-bottom: 12px; font-size: 31px; }
.tool-placeholder-card p { max-width: 720px; color: var(--muted); }
.setup-notice, .success-message { padding: 16px 18px; border-radius: 10px; }
.setup-notice {
    display: flex; justify-content: space-between; gap: 24px;
    color: #625320; background: #fff5cf; border: 1px solid #e7d58d;
}
.setup-notice > div { display: flex; gap: 12px; }
.setup-notice p, .setup-notice details { margin: 2px 0 0; font-size: 14px; }
.setup-notice code { font-size: 13px; }
.signal { width: 10px; height: 10px; margin-top: 7px; flex: 0 0 auto; border-radius: 50%; background: #d49a00; }
.success-message { margin: 0; color: #155743; background: #dcf3e8; border: 1px solid #a8d8c7; }
.metrics {
    display: grid; grid-template-columns: repeat(3,1fr);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
}
.metrics article {
    display: grid; min-height: 145px; padding: 26px 28px;
    grid-template-columns: 1fr auto; align-content: space-between;
}
.metrics article + article { border-left: 1px solid var(--line); }
.metrics span { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.metrics strong { grid-row: 1/3; grid-column: 2; align-self: center; font: 750 52px/1 Georgia,serif; }
.metrics small { color: var(--muted); }

.work-card, .calculations-card, .calculation-form, .form-help {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
}
.section-heading {
    display: flex; padding: 28px 30px; align-items: flex-end;
    justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line);
}
.section-heading h2, .form-help h2 { margin-bottom: 0; font-size: 30px; }
.version-label, .status {
    display: inline-flex; width: fit-content; padding: 6px 10px;
    border-radius: 100px; font-size: 12px; font-weight: 750;
}
.version-label { color: var(--ink); background: var(--accent); }
.stages { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(5,1fr); list-style: none; }
.stages li {
    display: flex; min-height: 118px; padding: 24px; align-items: flex-start;
    gap: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stages li:nth-child(5n) { border-right: 0; }
.stages li:nth-last-child(-n+5) { border-bottom: 0; }
.stages li > span, .calculation-form legend span {
    display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center;
    color: var(--muted); background: var(--paper); border-radius: 8px;
    font-size: 11px; font-weight: 800;
}
.stages strong, .stages small { display: block; }
.stages strong { margin: 3px 0 4px; }
.stages small { color: var(--muted); line-height: 1.35; }
.section-heading > a { font-weight: 750; text-decoration: none; }

.calculation-list { display: grid; }
.calculation-row {
    display: grid; min-height: 88px; padding: 17px 30px;
    grid-template-columns: minmax(280px,2fr) .6fr .8fr 1fr;
    align-items: center; gap: 24px;
}
.calculation-row-link { color: inherit; text-decoration: none; transition: background-color .15s ease; }
.calculation-row-link:hover { background: #f8f9f2; }
.calculation-row + .calculation-row { border-top: 1px solid var(--line); }
.calculation-row small, .calculation-title span {
    display: block; margin-bottom: 3px; color: var(--muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.calculation-title strong { display: block; }
.status-in_progress, .status-draft { color: #635200; background: #fff0a7; }
.status-review { color: #72451f; background: #f9dfc5; }
.status-completed { color: #125943; background: #d9f1e6; }
.status-archived { color: var(--muted); background: #e8ebe7; }
.empty-state { padding: 48px 30px; text-align: center; }
.empty-state p { margin: 6px 0 0; color: var(--muted); }

.internal-page-heading { border-bottom: 1px solid var(--line); background: var(--paper); }
.internal-page-heading-inner {
    display: grid; padding-block: 22px 20px; align-items: end; gap: 24px;
}
.internal-page-heading-inner.has-actions { grid-template-columns: minmax(0,1fr) auto; }
.internal-page-heading h1 { margin: 4px 0 8px; font-size: clamp(28px,3.5vw,38px); }
.internal-page-heading p { max-width: 800px; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.internal-page-heading .eyebrow { margin-bottom: 5px; }
.back-link { display: inline-flex; margin-bottom: 11px; gap: 9px; color: #46544f; font-size: 14px; text-decoration: none; }
.back-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hero .back-link { color: #d1d8d5; }
.section-dashboard { padding-top: 24px; }
.form-layout {
    display: grid; padding-block: 30px 70px;
    grid-template-columns: minmax(0,1.7fr) minmax(280px,.7fr);
    align-items: start; gap: 24px;
}
.calculation-form { overflow: hidden; }
.calculation-form fieldset { margin: 0; padding: 28px 30px 34px; border: 0; }
.calculation-form fieldset + fieldset { border-top: 1px solid var(--line); }
.calculation-form legend {
    display: flex; width: 100%; padding: 0; align-items: center;
    gap: 12px; font-size: 20px; font-weight: 800;
}
.field-grid { display: grid; margin-top: 25px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.field { min-width: 0; }
.field-wide { grid-column: 1/-1; }
.field-label-row {
    display: grid; margin-bottom: 8px; grid-template-columns: minmax(0,1fr) 26px;
    align-items: start; gap: 7px; font-size: 13px; font-weight: 750;
}
.field-label-row > label { display: block; min-width: 0; }
.field input, .field select {
    width: 100%; min-height: 48px; padding: 10px 13px;
    color: var(--ink); background: white; border: 1px solid #c9cec7; border-radius: 8px;
}
.field textarea {
    width: 100%; min-height: 120px; padding: 12px 13px; resize: vertical;
    color: var(--ink); background: white; border: 1px solid #c9cec7; border-radius: 8px;
}
.field-label-row > label > small { margin-left: 5px; color: var(--muted); font-weight: 500; }
.field-label-row > label > .field-source { display: block; margin: 4px 0 0; color: #557000; font-size: 11px; }
.field-help { position: relative; }
.field-help-button {
    display: grid; width: 25px; height: 25px; padding: 0; place-items: center; color: #3d534b;
    background: #eef2e7; border: 1px solid #bdc7c1; border-radius: 50%; font: 800 13px/1 Georgia,serif; cursor: pointer;
}
.field-help-button:hover, .field-help-button[aria-expanded="true"] { color: var(--ink); background: var(--accent); border-color: #9db937; }
.field-help-popover {
    grid-column: 1/-1; margin-top: 3px; padding: 11px 13px; color: #33413c; background: #f4f7e9;
    border: 1px solid #d9e1c0; border-left: 3px solid #7e9d15; border-radius: 7px; font-size: 12px; font-weight: 500; line-height: 1.5;
}
.field-help-popover[hidden] { display: none; }
.field textarea:focus { border-color: var(--ink); outline: 3px solid rgba(217,255,87,.75); }
.field-error input, .field-error select, .field-error textarea { border-color: #b5483d; }
.field-error-message { display: block; margin-top: 7px; color: #9a342b; }
.paired-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paired-inputs > span { display: grid; gap: 5px; }
.paired-inputs small { color: var(--muted); font-size: 11px; }
.string-list { display: grid; gap: 8px; }
.engineering-form-note {
    display: grid; padding: 20px 30px; grid-template-columns: minmax(210px,.45fr) 1fr;
    gap: 20px; color: #d6dfdb; background: var(--ink); border-top: 1px solid rgba(255,255,255,.1);
}
.engineering-form-note strong { color: var(--accent); font-size: 14px; letter-spacing: .02em; }
.engineering-form-note span { max-width: 760px; font-size: 13px; line-height: 1.55; }
.engineering-fieldset { padding-bottom: 24px !important; }
.engineering-column-head, .engineering-parameter {
    display: grid; grid-template-columns: minmax(270px,1fr) minmax(110px,150px) minmax(72px,100px) minmax(116px,150px);
    column-gap: 12px; align-items: center;
}
.engineering-column-head {
    margin-top: 24px; padding: 0 16px 9px; color: var(--muted); border-bottom: 1px solid var(--line);
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.engineering-column-head span:nth-child(n+2) { text-align: center; }
.engineering-parameters { border-bottom: 1px solid var(--line); }
.engineering-parameter {
    position: relative; min-height: 66px; padding: 8px 16px; border-bottom: 1px solid #e4e7df;
}
.engineering-parameter:last-child { border-bottom: 0; }
.engineering-parameter:hover { background: #fafbf6; }
.engineering-parameter-name {
    display: flex; min-width: 0; align-items: baseline; gap: 7px; color: #28332f;
    font-size: 13px; font-weight: 700; line-height: 1.35;
}
.engineering-parameter-label {
    display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) 25px; align-items: center; gap: 7px;
}
.engineering-parameter-label .field-help-popover { grid-column: 1/-1; }
.engineering-parameter-name::after {
    min-width: 20px; flex: 1 1 auto; border-bottom: 1px dotted #aeb6b1; content: "";
}
.engineering-nominal { display: block; }
.engineering-nominal input, .engineering-nominal select {
    width: 100%; height: 42px; padding: 7px 8px; color: #101a16; background: transparent;
    border: 0; border-bottom: 2px solid #66716c; border-radius: 0;
    font: 700 16px/1.1 "Courier New", monospace; text-align: center;
}
.engineering-nominal select { padding-right: 26px; font-family: inherit; font-size: 13px; text-align: left; }
.engineering-nominal input:focus, .engineering-nominal select:focus {
    border-bottom-color: #567100; outline: 3px solid rgba(217,255,87,.68); outline-offset: 1px;
}
.engineering-unit { color: var(--muted); font-size: 12px; text-align: center; }
.engineering-tolerance {
    display: grid; width: 100%; max-width: 124px; justify-self: center;
    grid-template-rows: 1fr 1fr; align-items: center;
}
.engineering-tolerance label { display: block; }
.engineering-tolerance input {
    width: 100%; height: 25px; padding: 1px 5px; color: #18231f; background: transparent;
    border: 0; border-radius: 0; font: 700 13px/1 "Courier New", monospace; text-align: center;
}
.engineering-tolerance label:first-child input { border-bottom: 1px solid #9aa39e; }
.engineering-tolerance input:focus { background: #eff6cf; outline: 2px solid #8aab14; }
.engineering-no-tolerance, .engineering-nominal-empty { color: #b4bbb7; text-align: center; }
.engineering-parameter > .field-error-message { grid-column: 2/-1; margin: 2px 0 5px; }
.engineering-parameter.field-error { background: #fff5f3; }
.engineering-parameter.field-error .engineering-nominal input,
.engineering-parameter.field-error .engineering-nominal select,
.engineering-parameter.field-error .engineering-tolerance input { border-color: #b5483d; }
.engineering-requirements { padding: 22px 16px 10px; }
.engineering-row-title { display: flex; margin-bottom: 13px; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.engineering-row-title .field-help-popover { flex-basis: 100%; }
.engineering-requirement-list { display: grid; border-top: 1px solid var(--line); }
.engineering-requirement-list label {
    display: grid; min-height: 52px; grid-template-columns: 38px 1fr; align-items: center;
    border-bottom: 1px solid #e4e7df;
}
.engineering-requirement-list label > span { color: var(--muted); font: 700 11px/1 "Courier New", monospace; }
.engineering-requirement-list input {
    width: 100%; min-height: 42px; padding: 8px 4px; background: transparent;
    border: 0; border-bottom: 1px solid transparent; border-radius: 0;
}
.engineering-requirement-list input:focus { border-bottom-color: #66716c; outline: 3px solid rgba(217,255,87,.68); }
.field input::placeholder { color: #99a29f; }
.field input[readonly] { color: #3d4a45; background: #eef0e8; border-color: #d7dbd4; cursor: not-allowed; }
.field input:focus, .field select:focus { border-color: var(--ink); outline: 3px solid rgba(217,255,87,.75); }
.form-actions {
    display: flex; padding: 24px 30px; justify-content: flex-end;
    gap: 12px; background: #f8f8f3; border-top: 1px solid var(--line);
}
.form-help { position: sticky; top: 100px; padding: 28px; }
.form-help p { color: var(--muted); }
.form-help ul {
    display: grid; margin: 24px 0 0; padding: 22px 0 0;
    gap: 12px; border-top: 1px solid var(--line); list-style: none;
}
.form-help li::before { margin-right: 9px; color: var(--success); content: "✓"; font-weight: 900; }
.live-summary {
    display: grid; margin-top: 24px; padding: 18px; gap: 4px;
    color: white; background: var(--ink); border-radius: 10px;
}
.live-summary span { color: #aeb9b5; font-size: 11px; text-transform: uppercase; }
.live-summary strong { color: var(--accent); font-size: 24px; }
.error-summary {
    margin: 24px 30px 0; padding: 16px 18px; color: #732f28;
    background: #fde5e1; border: 1px solid #e5aaa2; border-radius: 9px;
}
.error-summary ul { margin: 8px 0 0; padding-left: 20px; }

.authentication-page {
    min-height: 100vh;
    background: var(--ink);
}
.authentication-page .site-header { position: static; }
.authentication-page .site-footer { border-top: 1px solid rgba(255,255,255,.12); }
.authentication-section { padding-block: 56px 72px; color: white; background: var(--ink); }
.authentication-layout {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,470px);
    align-items: center; gap: clamp(50px,9vw,120px);
}
.authentication-description h1 {
    max-width: 700px; margin-bottom: 20px; font-size: clamp(44px,6vw,72px);
}
.authentication-description > p { max-width: 660px; color: #bdc6c2; font-size: 18px; }
.authentication-description ul {
    display: grid; max-width: 660px; margin: 32px 0 0; padding: 0; gap: 14px;
    color: #d2d9d6; list-style: none;
}
.authentication-description li { position: relative; padding-left: 28px; }
.authentication-description li::before {
    position: absolute; top: 8px; left: 0; width: 9px; height: 9px;
    background: var(--accent); border-radius: 2px; content: "";
}
.authentication-form {
    display: grid; padding: 34px; gap: 20px; color: var(--ink);
    background: var(--surface); border-radius: var(--radius); box-shadow: 0 28px 80px rgba(0,0,0,.24);
}
.authentication-form header { margin-bottom: 4px; }
.authentication-form h2 { margin-bottom: 0; font-size: 30px; }
.authentication-form .error-summary { margin: 0; }
.authentication-form .field small {
    display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4;
}
.authentication-form .button { width: 100%; margin-top: 4px; }
.form-alternative { margin: -2px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.form-alternative a { color: var(--ink); font-weight: 750; }

.profile-layout {
    display: grid; padding-block: 30px 70px;
    grid-template-columns: minmax(0,1.6fr) minmax(280px,.7fr);
    align-items: start; gap: 24px;
}
.profile-layout > .success-message { grid-column: 1/-1; }
.profile-card, .profile-security {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
}
.profile-details { margin: 0; }
.profile-details > div {
    display: grid; min-height: 72px; padding: 17px 30px;
    grid-template-columns: minmax(180px,.7fr) 1.3fr; align-items: center; gap: 24px;
}
.profile-details > div + div { border-top: 1px solid var(--line); }
.profile-details dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.profile-details dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.profile-security { position: sticky; top: 86px; padding: 28px; }
.profile-security h2 { font-size: 30px; }
.profile-security p { color: var(--muted); }
.profile-security form { margin-top: 24px; }

.calculation-page-layout {
    display: grid; padding-block: 26px 60px; grid-template-columns: minmax(0,1fr) 340px;
    align-items: start; gap: 24px;
}
.step-information, .step-explanation, .job-panel, .results-panel, .visualization-panel {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.step-information { position: sticky; top: 86px; padding: 26px; }
.step-information h2 { font-size: 27px; }
.step-information h3 { margin: 25px 0 9px; }
.step-information ul, .step-explanation ul, .step-explanation ol { margin: 0; padding-left: 20px; }
.step-information li + li, .step-explanation li + li { margin-top: 6px; }
.formula-line { padding: 13px 15px; background: #eef0e8; border-left: 3px solid var(--success); font-family: Georgia, serif; }
.method-version { margin: 24px 0 0; padding-top: 16px; color: var(--muted); border-top: 1px solid var(--line); font-size: 13px; }

.container.workflow-shell {
    width: min(1180px, calc(100% - 440px)); margin-inline: auto;
}
.workflow-shell { display: block; padding-block: 20px 65px; }
.workflow-navigation-toggle, .workflow-navigation-backdrop, .workflow-navigation-mobile-header { display: none; }
.workflow-navigation {
    position: fixed; z-index: 18; top: 76px; bottom: 14px; left: 14px; display: grid; width: 190px;
    align-content: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(21,33,30,.12);
}
.workflow-navigation a {
    display: grid; min-height: 49px; padding: 8px 8px; grid-template-columns: 24px minmax(0,1fr) 18px;
    align-items: center; column-gap: 7px; color: inherit; text-decoration: none; border-left: 3px solid transparent;
}
.workflow-navigation a + a { border-top: 1px solid var(--line); }
.workflow-navigation a:hover { background: #f7f8f1; }
.workflow-navigation a.is-current { background: #f5f9e7; border-left-color: var(--accent); }
.workflow-step-number { color: var(--muted); font: 800 10px/1 "Courier New", monospace; }
.workflow-navigation strong { min-width: 0; font-size: 11px; line-height: 1.2; }
.workflow-step-status {
    position: relative; display: grid; width: 17px; height: 17px; place-items: center;
    color: #83908b; border: 1.5px solid #aeb7b3; border-radius: 50%;
}
.workflow-step-status::after { font: 900 11px/1 Arial,sans-serif; content: ''; }
.state-completed .workflow-step-status { color: white; background: var(--success); border-color: var(--success); }
.state-completed .workflow-step-status::after { content: '✓'; }
.state-running .workflow-step-status, .state-queued .workflow-step-status { border-color: #9a7c00; }
.state-running .workflow-step-status::after { width: 5px; height: 5px; background: #9a7c00; border-radius: 50%; content: ''; }
.state-running .workflow-step-status { animation: workflow-pulse 1.2s ease-in-out infinite; }
.state-queued .workflow-step-status::after { content: '·'; font-size: 18px; transform: translateY(-2px); }
.state-failed .workflow-step-status { color: #a3322a; border-color: #a3322a; }
.state-failed .workflow-step-status::after { content: '!'; }
.state-stale .workflow-step-status { color: #6b6200; border-color: #a48f16; }
.state-stale .workflow-step-status::after { content: '↻'; font-size: 12px; }
.workflow-navigation .workflow-input-link { background: #f8f9f4; }
.workflow-navigation .workflow-kinematics-input { background: #f4f6ed; }
.workflow-navigation .starts-calculation { margin-top: 5px; box-shadow: 0 -5px 0 var(--paper), 0 -6px 0 var(--line); }
.workflow-main { display: grid; gap: 22px; min-width: 0; }
@keyframes workflow-pulse { 50% { box-shadow: 0 0 0 4px rgba(154,124,0,.16);     }
}

/* Users management page */
.users-page-layout {
    padding-block: 30px 70px;
    display: grid;
    gap: 24px;
}

.users-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.users-card .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px 0;
    gap: 16px;
    flex-wrap: wrap;
}

.users-card .section-heading h2 {
    font-size: 24px;
    margin-bottom: 4px;
}

.user-access-list {
    padding: 20px 30px 30px;
}

.user-access-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 20px;
    background: #fafbf6;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 12px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.user-access-row:last-child {
    margin-bottom: 0;
}

.user-access-row:hover {
    background: #f7f8f2;
    box-shadow: 0 2px 8px rgba(21, 33, 30, 0.06);
}

.user-access-row.is-inactive {
    opacity: 0.65;
    background: #f5f5f5;
}

.user-access-identity {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.user-access-identity strong {
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 2px;
}

.user-access-identity span {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.role-badges span {
    display: inline-block;
    padding: 4px 10px;
    background: #eef2e7;
    border: 1px solid #d3d9cc;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #3d534b;
    white-space: nowrap;
}

.user-access-row .status {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.user-access-row .button-compact {
    white-space: nowrap;
}

/* Admin actions bar */
.admin-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Success message */
.success-message {
    padding: 14px 18px;
    background: #e5f4ed;
    border: 1px solid #a9d8c6;
    border-radius: 9px;
    color: #155743;
    font-size: 14px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
    .user-access-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .role-badges {
        justify-content: flex-start;
    }

    .admin-actions-bar {
        justify-content: stretch;
    }

    .admin-actions-bar .button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .users-card .section-heading {
        padding: 20px 20px 0;
    }

    .user-access-list {
        padding: 16px 20px 24px;
    }

    .user-access-row {
        padding: 16px;
    }

    .user-access-identity strong {
        font-size: 14px;
    }
}
.step-explanation { display: grid; padding: 26px; grid-template-columns: 1.25fr .75fr; gap: 24px 32px; }
.step-explanation h2 { margin-bottom: 13px; font-size: 29px; }
.step-explanation h3 { margin: 0 0 10px; font-size: 18px; }
.step-explanation .method-version { grid-column: 1/-1; }
.step-guidance { margin: 18px 0 16px; padding: 14px 16px; background: #f4f7e9; border-left: 3px solid #789718; border-radius: 0 8px 8px 0; }
.step-guidance strong { display: block; margin-bottom: 4px; font-size: 13px; }
.step-guidance p { margin: 0; color: #46544f; font-size: 13px; line-height: 1.55; }
.step-form { box-shadow: none; }
.document-preparation { padding: 34px 30px; }
.document-preparation h2 { font-size: 28px; }
.kinematics-preparation { padding: 34px 30px; }
.kinematics-preparation h2 { margin-bottom: 14px; font-size: 28px; }
.kinematics-preparation p { max-width: 820px; color: var(--muted); }
.kinematics-preparation .button { margin-top: 6px; }

.job-panel { overflow: hidden; padding: 25px; border-left: 5px solid #c09c00; }
.job-panel.status-completed { border-left-color: var(--success); }
.job-panel.status-failed { border-left-color: #b64238; }
.job-panel header { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.job-panel h2 { margin-bottom: 0; font-size: 26px; letter-spacing: -.025em; }
.job-panel header > strong { min-width: 70px; font: 700 28px/1 Georgia, serif; text-align: right; }
.progress-track { overflow: hidden; height: 12px; margin: 20px 0 14px; background: #e5e8df; border-radius: 20px; }
.progress-track span { display: block; height: 100%; background: #a6c918; border-radius: inherit; transition: width .35s ease; }
.status-completed .progress-track span { background: var(--success); }
.status-failed .progress-track span { background: #b64238; }
.job-panel > p { margin-bottom: 15px; }
.job-timing { display: grid; margin: 0; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 9px; }
.job-timing div { padding: 11px 13px; }
.job-timing div + div { border-left: 1px solid var(--line); }
.job-timing dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.job-timing dd { margin: 3px 0 0; font-size: 13px; }
.job-events { margin-top: 14px; }
.job-events summary, .stored-data summary { font-weight: 750; cursor: pointer; }
.job-events ol { display: grid; margin-bottom: 0; padding-left: 24px; gap: 10px; }
.job-events li strong, .job-events li span, .job-events li time { display: block; }
.job-events li span { color: var(--muted); font-size: 13px; }
.job-events li time { color: var(--muted); font-size: 11px; }
.job-background-note { margin: 15px 0 0 !important; padding: 11px 13px; color: #56615d; background: #f1f2ec; border-radius: 8px; font-size: 13px; }

.results-panel { overflow: hidden; }
.results-panel > header { padding: 25px 28px; border-bottom: 1px solid var(--line); }
.results-panel h2 { margin-bottom: 0; font-size: 29px; }
.result-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.result-list article { min-height: 100px; padding: 20px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-list article:nth-child(2n) { border-right: 0; }
.result-list article > span, .result-list article > strong, .result-list article > small { display: block; }
.result-list article > span { color: var(--muted); font-size: 13px; }
.result-list article > strong { margin-top: 7px; font-size: 20px; overflow-wrap: anywhere; }
.result-list article > small { margin-top: 5px; color: var(--muted); }
.result-list pre { max-height: 360px; overflow: auto; white-space: pre-wrap; font-size: 12px; }
.simple-results, .stored-data dl { margin: 0; }
.simple-results div, .stored-data dl div { display: grid; padding: 14px 25px; grid-template-columns: 1fr 1fr; gap: 20px; border-bottom: 1px solid var(--line); }
.simple-results dd, .stored-data dd { margin: 0; text-align: right; font-weight: 700; }
.stored-data { padding: 20px 25px; }
.stored-data dl { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; }
.artifact-list { display: grid; }
.artifact-list a { display: grid; padding: 18px 28px; color: inherit; text-decoration: none; }
.artifact-list a + a { border-top: 1px solid var(--line); }
.artifact-list a:hover { background: #f8f9f2; }
.artifact-list small { color: var(--muted); }
.button:disabled { cursor: not-allowed; opacity: .55; }

.kinematics-input-layout {
    display: grid; padding-block: 24px 68px; grid-template-columns: minmax(0,1fr) 310px;
    align-items: start; gap: 24px;
}
.kinematics-input-main { display: grid; min-width: 0; gap: 18px; }
.kinematics-input-form { box-shadow: none; }
.kinematics-form-note {
    display: grid; padding: 19px 30px; grid-template-columns: minmax(210px,.45fr) 1fr;
    gap: 20px; color: #d6dfdb; background: var(--ink);
}
.kinematics-form-note strong { color: var(--accent); }
.kinematics-form-note span { font-size: 13px; line-height: 1.55; }
.kinematics-input-help {
    position: sticky; top: 86px; padding: 26px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.kinematics-input-help h2 { margin-bottom: 12px; font-size: 28px; }
.kinematics-input-help > p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.kinematics-input-help dl { margin: 22px 0 0; border-top: 1px solid var(--line); }
.kinematics-input-help dl div { padding: 13px 0; border-bottom: 1px solid var(--line); }
.kinematics-input-help dt { color: #557000; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.kinematics-input-help dd { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
.kinematics-input-help .kinematics-saved-at { margin: 18px 0 0; font-size: 12px; }
.kinematics-input-context { position: static; box-shadow: none; }

.kinematics-report-panel {
    overflow: hidden; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.kinematics-report-panel > header {
    display: flex; padding: 25px 28px; align-items: center; justify-content: space-between;
    gap: 24px; border-bottom: 1px solid var(--line);
}
.kinematics-report-panel > header h2 { margin-bottom: 8px; font-size: 29px; }
.kinematics-report-panel > header p { max-width: 720px; margin-bottom: 0; color: var(--muted); }
.kinematics-report-summary { display: grid; margin: 0; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.kinematics-report-summary div { padding: 15px 20px; }
.kinematics-report-summary div + div { border-left: 1px solid var(--line); }
.kinematics-report-summary dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.kinematics-report-summary dd { margin: 5px 0 0; font-weight: 750; }
.kinematics-report-frame { display: block; width: 100%; height: min(1100px,82vh); min-height: 680px; background: #eef0e8; border: 0; }

.visualization-panel { overflow: hidden; }
.visualization-panel > header {
    display: flex; padding: 25px 28px; align-items: flex-start;
    justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line);
}
.visualization-panel > header h2 { margin-bottom: 8px; font-size: 29px; }
.visualization-panel > header p { max-width: 680px; margin-bottom: 0; color: var(--muted); }
.visualization-status {
    display: flex; max-width: 310px; margin: 0; padding: 10px 13px;
    align-items: center; gap: 9px; color: #5e5429; background: #fff8d7;
    border: 1px solid #e6d890; border-radius: 8px; font-size: 13px;
}
.visualization-status::before {
    width: 9px; height: 9px; flex: 0 0 auto; content: '';
    background: #c89b00; border-radius: 50%;
}
.visualization-status.is-ready { color: #6e201d; background: #fff0ef; border-color: #efb9b5; }
.visualization-status.is-ready::before { background: #ff0000; }
.visualization-status.is-error { color: #7e2822; background: #ffe9e7; border-color: #e7aaa4; }
.visualization-status.is-error::before { background: #b64238; }
.visualization-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.visualization-grid.is-single { grid-template-columns: minmax(0,1fr); }
.visualization-card { min-width: 0; }
.visualization-card:nth-child(2n) { border-left: 1px solid var(--line); }
.visualization-card:nth-child(n+3) { border-top: 1px solid var(--line); }
.visualization-card > header {
    display: flex; min-height: 100px; padding: 17px 19px; align-items: center;
    justify-content: space-between; gap: 16px; background: #f7f8f3;
    border-bottom: 1px solid var(--line);
}
.visualization-card h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.visualization-card .eyebrow { margin-bottom: 5px; }
.visualization-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.visualization-controls button {
    min-height: 34px; padding: 6px 9px; color: var(--ink); background: white;
    border: 1px solid #cdd2ca; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.visualization-controls button:first-child, .visualization-controls button:nth-child(2) {
    min-width: 34px; padding-inline: 7px; font-size: 18px; line-height: 1;
}
.visualization-controls button:hover { background: #edf0e7; }
.visualization-viewport { position: relative; overflow: hidden; background: white; }
.visualization-viewport canvas {
    display: block; width: 100%; height: auto; aspect-ratio: 4/3;
    cursor: grab; touch-action: none; user-select: none;
}
.visualization-viewport canvas.is-dragging { cursor: grabbing; }
.visualization-meta {
    display: grid; min-height: 62px; padding: 10px 15px; gap: 3px;
    color: var(--muted); background: #fafbf7; border-top: 1px solid var(--line); font-size: 11px;
}
.visualization-meta span { overflow-wrap: anywhere; }
.visualization-legend { display: flex; min-height: 74px; padding: 12px 14px 15px; flex-wrap: wrap; align-content: flex-start; gap: 7px; }
.visualization-legend-item {
    display: inline-flex; padding: 6px 8px; align-items: center; gap: 7px;
    color: #37423e; background: white; border: 1px solid #d8ddd4;
    border-radius: 6px; font-size: 11px; line-height: 1.25; text-align: left; cursor: pointer;
}
.visualization-legend-item.is-hidden { color: var(--muted); opacity: .55; text-decoration: line-through; }
.visualization-legend-mark { width: 19px; height: 4px; flex: 0 0 auto; border-radius: 3px; }
.thread-tolerance-control {
    display: grid; padding: 18px 22px; gap: 10px; background: #f4f5ef; border-bottom: 1px solid var(--line);
}
.thread-tolerance-control > div { display: flex; justify-content: space-between; gap: 20px; }
.thread-tolerance-control label { font-weight: 750; }
.thread-tolerance-control output { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.thread-tolerance-control input { width: 100%; accent-color: #b64238; }
.thread-tolerance-control p { margin: 0; color: #7e2822; font-size: 13px; }
.thread-tolerance-control.is-inside { background: #e5f4ed; }
.thread-tolerance-control.is-inside input { accent-color: var(--success); }
.thread-tolerance-control.is-inside p { color: #155743; }
.artifact-preview { padding: 20px 22px; background: #eef0e8; border-bottom: 1px solid var(--line); }
.artifact-preview img { display: block; width: 100%; height: auto; background: white; border: 1px solid #cfd3cb; }

.documentation-message {
    margin: 0; padding: 14px 17px; color: #155743; background: #e5f4ed;
    border: 1px solid #a9d8c6; border-radius: 9px;
}
.documentation-message.is-error { color: #7e2822; background: #ffe9e7; border-color: #e7aaa4; }
.document-review { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.document-review.status-draft { border-top: 5px solid #c09c00; }
.document-review.status-approved { border-top: 5px solid var(--success); }
.document-review.status-superseded { border-top: 5px solid #7b8581; }
.document-review-header {
    display: grid; padding: 25px 28px; grid-template-columns: minmax(0,1fr) minmax(250px,340px);
    align-items: start; gap: 28px; border-bottom: 1px solid var(--line);
}
.document-review-header h2 { margin-bottom: 8px; font-size: 29px; }
.document-review-header p { margin-bottom: 0; color: var(--muted); }
.document-approval-state {
    display: grid; padding: 15px 17px; gap: 5px; color: #66530b;
    background: #fff8d7; border: 1px solid #e6d890; border-radius: 9px;
}
.document-approval-state strong { font-size: 16px; }
.document-approval-state span { font-size: 12px; line-height: 1.45; }
.status-approved .document-approval-state { color: #155743; background: #e5f4ed; border-color: #a9d8c6; }
.status-superseded .document-approval-state { color: #56615d; background: #f1f2ec; border-color: #d5d9d2; }
.document-drawing-preview { margin: 0; padding: 22px 22px 14px; background: #eef0e8; border-bottom: 1px solid var(--line); }
.document-drawing-preview img {
    display: block; width: 100%; height: auto; background: white;
    border: 1px solid #c7ccc5; box-shadow: 0 8px 24px rgba(21,33,30,.08);
}
.document-drawing-preview figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; }
.document-file-actions { display: flex; padding: 20px 25px; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--line); }
.document-file-summary { display: grid; margin: 0; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.document-file-summary div { padding: 15px 20px; }
.document-file-summary div + div { border-left: 1px solid var(--line); }
.document-file-summary dt { color: var(--muted); font-size: 12px; }
.document-file-summary dd { margin: 5px 0 0; font-size: 14px; font-weight: 750; }
.document-confirmation {
    display: grid; padding: 23px 25px; grid-template-columns: minmax(0,1fr) auto;
    align-items: center; gap: 25px; background: #fafbf7;
}
.document-confirmation strong { display: block; margin-bottom: 5px; }
.document-confirmation p { margin: 0; color: var(--muted); font-size: 13px; }
.document-dialog {
    width: min(1180px,calc(100% - 32px)); height: min(900px,calc(100% - 32px)); margin: auto;
    padding: 0; color: var(--ink); background: white; border: 0; border-radius: 12px;
    box-shadow: 0 30px 90px rgba(5,15,12,.4);
}
.document-dialog::backdrop { background: rgba(10,20,17,.72); }
.document-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.document-dialog > header, .document-dialog > footer { display: flex; padding: 16px 20px; align-items: center; justify-content: space-between; gap: 20px; }
.document-dialog > header { border-bottom: 1px solid var(--line); }
.document-dialog > header h2 { margin: 2px 0 0; font-size: 23px; }
.document-dialog > footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.document-dialog iframe { width: 100%; height: 100%; min-height: 420px; background: #e6e9e4; border: 0; }
.document-dialog-close {
    width: 42px; height: 42px; flex: 0 0 auto; color: var(--ink); background: #f1f2ec;
    border: 1px solid var(--line); border-radius: 50%; font-size: 29px; line-height: 1; cursor: pointer;
}

.site-footer { padding-block: 34px; color: #bac4c0; background: var(--ink); }
.footer-inner { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.footer-inner p { margin: 4px 0 0; }
.footer-inner > span { font-size: 13px; }
:focus-visible { outline: 3px solid #a6d900; outline-offset: 3px; }

@media (max-width: 1100px) {
    .container.workflow-shell { width: min(1180px, calc(100% - 30px)); margin-inline: auto; }
    .workflow-navigation-toggle {
        position: sticky; z-index: 16; top: 72px; display: grid; width: 100%; min-height: 58px; margin-bottom: 16px; padding: 9px 13px;
        grid-template-columns: 26px minmax(0,1fr) 20px; align-items: center; gap: 11px; color: var(--ink);
        background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 25px rgba(21,33,30,.09); text-align: left;
    }
    .workflow-navigation-toggle > span:nth-child(2) { display: grid; }
    .workflow-navigation-toggle small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .workflow-navigation-toggle strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .workflow-navigation-toggle-icon { display: grid; gap: 4px; }
    .workflow-navigation-toggle-icon i { display: block; width: 22px; height: 2px; background: var(--ink); }
    .workflow-navigation-toggle-arrow { font-size: 26px; line-height: 1; transition: transform .2s ease; }
    .workflow-navigation-toggle[aria-expanded="true"] .workflow-navigation-toggle-arrow { transform: rotate(180deg); }
    .workflow-navigation {
        z-index: 42; top: 0; bottom: 0; left: 0; width: min(320px, 88vw); padding-bottom: 20px;
        border: 0; border-right: 1px solid var(--line); border-radius: 0; transform: translateX(-105%);
        transition: transform .22s ease; box-shadow: 18px 0 55px rgba(8,18,15,.24);
    }
    .workflow-navigation.is-open { transform: translateX(0); }
    .workflow-navigation-mobile-header {
        position: sticky; z-index: 2; top: 0; display: flex; min-height: 62px; padding: 10px 12px 10px 16px;
        align-items: center; justify-content: space-between; gap: 12px; color: white; background: var(--ink);
    }
    .workflow-navigation-mobile-header strong { font-size: 13px; }
    .workflow-navigation-mobile-header button {
        display: grid; width: 40px; height: 40px; padding: 0; place-items: center; color: white;
        background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; font-size: 26px; cursor: pointer;
    }
    .workflow-navigation a { min-height: 53px; padding-inline: 13px; grid-template-columns: 26px minmax(0,1fr) 20px; }
    .workflow-navigation strong { font-size: 12px; }
    .workflow-navigation-backdrop {
        position: fixed; z-index: 41; inset: 0; width: 100%; height: 100%; padding: 0;
        background: rgba(8,18,15,.56); border: 0; opacity: 0; pointer-events: none; transition: opacity .22s ease;
    }
    body.workflow-navigation-open { overflow: hidden; }
    body.workflow-navigation-open .workflow-navigation-backdrop { display: block; opacity: 1; pointer-events: auto; }
}

@media (max-width: 900px) {
    .hero-inner { min-height: auto; grid-template-columns: 1fr; gap: 28px; }
    .hero-inner .button { justify-self: start; }
    .stages { grid-template-columns: repeat(2,1fr); }
    .stages li:nth-child(5n) { border-right: 1px solid var(--line); }
    .stages li:nth-child(2n) { border-right: 0; }
    .stages li:nth-last-child(-n+5) { border-bottom: 1px solid var(--line); }
    .stages li:nth-last-child(-n+2) { border-bottom: 0; }
    .stages li:last-child { border-right: 0; }
    .form-layout { grid-template-columns: 1fr; }
    .form-help { position: static; }
    .authentication-layout { grid-template-columns: 1fr; }
    .authentication-description { max-width: 740px; }
    .profile-layout { grid-template-columns: 1fr; }
    .profile-security { position: static; }
    .calculation-page-layout, .kinematics-input-layout { grid-template-columns: 1fr; }
    .kinematics-input-help { position: static; }
    .step-information { position: static; }
    .tool-type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .tool-type-card:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .tool-type-card:nth-child(2n) { border-right: 0; }
    .tool-type-card:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 720px) {
    .container { width: min(calc(100% - 30px),1180px); }
    .header-inner { min-height: 60px; }
    .menu-button { display: block; }
    .main-nav {
        position: absolute; top: 60px; right: 0; left: 0; display: none;
        padding: 10px 15px 18px; background: var(--ink);
        border-bottom: 1px solid rgba(255,255,255,.14);
    }
    .main-nav.is-open { display: grid; }
    .main-nav a { min-height: 48px; border-bottom: 0; border-left: 3px solid transparent; }
    .main-nav a:hover, .main-nav a.is-active { border-bottom-color: transparent; border-left-color: var(--accent); }
    .logout-form { display: block; }
    .logout-form button {
        width: 100%; min-height: 48px; border-bottom: 0;
        border-left: 3px solid transparent; text-align: left;
    }
    .logout-form button:hover, .logout-form button:focus-visible { border-left-color: var(--accent); }
    .guest-nav { gap: 4px; }
    .guest-nav a { padding-inline: 10px; font-size: 14px; }
    .hero-inner { min-height: auto; padding-block: 34px; }
    .hero h1 { font-size: clamp(36px,11vw,50px); }
    .hero p { font-size: 16px; }
    .internal-page-heading-inner.has-actions { grid-template-columns: 1fr; }
    .internal-page-heading-inner.has-actions .button { justify-self: start; }
    .internal-page-heading h1 { font-size: clamp(27px,9vw,34px); }
    .tool-catalog .section-heading { display: grid; }
    .tool-type-grid { grid-template-columns: 1fr; }
    .tool-type-card { min-height: 230px; padding: 22px; grid-template-columns: 92px minmax(0,1fr); grid-template-rows: 1fr; gap: 18px; }
    .tool-type-card:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
    .tool-type-card:last-child { border-bottom: 0; }
    .tool-type-icon { width: 112px; height: 112px; transform: scale(.78); transform-origin: top left; }
    .tool-type-content > small { min-height: auto; }
    .tool-placeholder-card { padding: 28px 22px; grid-template-columns: 1fr; }
    .setup-notice, .metrics { grid-template-columns: 1fr; }
    .setup-notice { display: grid; }
    .metrics article + article { border-top: 1px solid var(--line); border-left: 0; }
    .metrics article { min-height: 112px; }
    .section-heading { padding: 23px 20px; align-items: flex-start; }
    .section-heading h2 { font-size: 26px; }
    .calculation-row { padding: 20px; grid-template-columns: repeat(2,1fr); gap: 18px; }
    .calculation-title { grid-column: 1/-1; }
    .form-layout { padding-bottom: 40px; }
    .field-grid { grid-template-columns: 1fr; }
    .field-wide { grid-column: auto; }
    .field-label-row { grid-template-columns: minmax(0,1fr) 34px; }
    .field-help-button { width: 34px; height: 34px; }
    .engineering-parameter-label { grid-template-columns: minmax(0,1fr) 34px; }
    .calculation-form fieldset { padding: 24px 20px 28px; }
    .form-actions { padding: 20px; }
    .footer-inner { display: grid; }
    .authentication-section { padding-block: 36px 50px; }
    .authentication-description h1 { font-size: clamp(38px,12vw,54px); }
    .authentication-description > p { font-size: 16px; }
    .authentication-form { padding: 24px 20px; }
    .profile-details > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
    .step-explanation { grid-template-columns: 1fr; padding: 22px 20px; }
    .step-explanation .method-version { grid-column: auto; }
    .job-panel { padding: 20px; }
    .job-panel header { align-items: flex-start; }
    .job-timing { grid-template-columns: 1fr; }
    .job-timing div + div { border-top: 1px solid var(--line); border-left: 0; }
    .result-list { grid-template-columns: 1fr; }
    .result-list article { border-right: 0; }
    .visualization-panel > header { display: grid; padding: 22px 20px; }
    .visualization-status { max-width: none; }
    .visualization-grid { grid-template-columns: 1fr; }
    .visualization-card:nth-child(2n) { border-left: 0; }
    .visualization-card + .visualization-card { border-top: 1px solid var(--line); }
    .visualization-card > header { align-items: flex-start; }
    .document-review-header { grid-template-columns: 1fr; padding: 22px 20px; }
    .document-file-summary { grid-template-columns: 1fr; }
    .document-file-summary div + div { border-top: 1px solid var(--line); border-left: 0; }
    .document-confirmation { grid-template-columns: 1fr; padding: 20px; }
    .document-confirmation .button { justify-self: start; }
    .kinematics-report-panel > header { align-items: flex-start; }
    .paired-inputs { grid-template-columns: 1fr; }
    .engineering-form-note { padding: 18px 20px; grid-template-columns: 1fr; gap: 6px; }
    .engineering-column-head { display: none; }
    .engineering-parameter {
        min-height: 94px; padding: 14px 2px 13px;
        grid-template-columns: minmax(100px,1fr) 62px minmax(92px,116px);
        column-gap: 8px; row-gap: 8px;
    }
    .engineering-parameter-label { grid-column: 1/-1; }
    .engineering-nominal { grid-column: 1; }
    .engineering-unit { grid-column: 2; }
    .engineering-tolerance, .engineering-no-tolerance { grid-column: 3; }
    .engineering-parameter > .field-error-message { grid-column: 1/-1; }
    .engineering-requirements { padding-inline: 2px; }
}

@media (max-width: 480px) {
    .stages { grid-template-columns: 1fr; }
    .stages li, .stages li:nth-child(2n), .stages li:nth-child(4n),
    .stages li:nth-last-child(-n+2), .stages li:nth-last-child(-n+4) {
        border-right: 0; border-bottom: 1px solid var(--line);
    }
    .stages li:last-child { border-bottom: 0; }
    .calculation-row { grid-template-columns: 1fr; }
    .calculation-title { grid-column: auto; }
    .form-actions { display: grid; }
    .button { width: 100%; }
    .visualization-card > header { display: grid; }
    .visualization-controls { justify-content: flex-start; }
    .visualization-controls button { min-height: 40px; }
    .visualization-controls button:last-child { flex-basis: 100%; }
    .visualization-meta { min-height: 72px; }
    .thread-tolerance-control > div { display: grid; gap: 3px; }
    .thread-tolerance-control output { text-align: left; }
    .document-file-actions { display: grid; padding: 18px 20px; }
    .kinematics-form-note { grid-template-columns: 1fr; padding: 18px 20px; gap: 8px; }
    .kinematics-form-actions { display: grid; }
    .kinematics-report-panel > header { display: grid; padding: 20px; }
    .kinematics-report-summary { grid-template-columns: 1fr; }
    .kinematics-report-summary div + div { border-top: 1px solid var(--line); border-left: 0; }
    .kinematics-report-frame { height: 720px; min-height: 520px; }
    .document-confirmation .button { width: 100%; }
    .document-dialog { width: calc(100% - 14px); height: calc(100% - 14px); }
    .document-dialog > header, .document-dialog > footer { padding: 12px; }
    .document-dialog > header h2 { font-size: 18px; }
    .document-dialog > footer { display: grid; grid-template-columns: 1fr; }
    .document-dialog iframe { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Role management pages */
.roles-page-layout { display: grid; gap: 24px; padding-block: 30px 70px; }
.admin-actions-bar { display: flex; justify-content: flex-end; padding: 8px 0; }
.roles-list { display: grid; gap: 12px; }
.role-row { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); gap: 16px; }
.role-row.is-system { border-left: 4px solid var(--success); }
.role-info strong { display: block; font-size: 15px; margin-bottom: 4px; }
.role-key { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; color: var(--muted); margin-right: 8px; }
.role-info small { color: var(--muted); font-size: 13px; }
.role-meta { display: flex; align-items: center; gap: 12px; }
.permission-count { font-size: 12px; color: var(--muted); }

.role-edit-layout { display: grid; gap: 24px; padding-block: 30px 70px; }
.role-edit-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; }
.role-form-group { margin-bottom: 28px; }
.role-form-group:last-child { margin-bottom: 0; }
.form-label { display: flex; flex-direction: column; gap: 8px; }
.form-label strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.form-label input, .form-label textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--paper); }
.form-label input:focus, .form-label textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 255, 87, .3); }
.form-hint { font-size: 13px; color: var(--muted); margin: -12px 0 16px 0; }
.form-note { font-size: 13px; color: var(--muted); font-style: italic; }

.permissions-grid { display: grid; gap: 20px; }
.permission-group { border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.permission-group legend { font-weight: 600; font-size: 15px; padding: 0 8px; color: var(--ink); }
.permission-group-items { display: grid; gap: 12px; margin-top: 12px; }
.permission-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s; }
.permission-item:hover { background: var(--paper); }
.permission-item input[type=checkbox] { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.permission-title { display: block; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.permission-item small { color: var(--muted); font-size: 12px; }

.role-delete-warning { background: #fff3cd; border: 1px solid #ffc107; border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.role-delete-warning strong { color: #856404; display: block; margin-bottom: 8px; }
.role-delete-warning p { color: #856404; margin: 4px 0; font-size: 14px; }

@media (max-width: 768px) {
    .role-row { flex-direction: column; align-items: flex-start; }
    .role-meta { flex-wrap: wrap; }
    .admin-actions-bar { justify-content: stretch; }
    .admin-actions-bar .button { width: 100%; }
}

/* User access editor page */
.access-editor-layout {
    display: grid; padding-block: 30px 70px;
    grid-template-columns: minmax(0,1.7fr) minmax(280px,.7fr);
    align-items: start; gap: 24px;
}

.access-editor-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.access-editor-card .section-heading {
    padding: 24px 30px 0;
}

.access-editor-card .section-heading h2 {
    font-size: 24px;
}

.access-editor-intro {
    padding: 0 30px 20px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.role-option-grid {
    display: grid;
    padding: 20px 30px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}

.role-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #f8f9f2;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.role-option:hover:not(.is-disabled) {
    background: #f2f4e6;
    border-color: #c5cc c5;
}

.role-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--accent);
    cursor: pointer;
}

.role-option input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.role-option span strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--ink);
}

.role-option span small {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.role-option.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f5f5f5;
}

.role-option.is-disabled span strong,
.role-option.is-disabled span small {
    color: var(--muted);
}

.account-active-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 30px;
    background: #f8f9f2;
    border-top: 1px solid var(--line);
    cursor: pointer;
    transition: background .15s ease;
}

.account-active-option:hover {
    background: #f2f4e6;
}

.account-active-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--accent);
    cursor: pointer;
}

.account-active-option input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.account-active-option span strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--ink);
}

.account-active-option span small {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.access-summary-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    position: sticky;
    top: 86px;
}

.access-summary-card h2 {
    font-size: 26px;
    margin-bottom: 20px;
}

.compact-details {
    margin: 0;
}

.compact-details > div {
    display: grid;
    padding: 14px 0;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}

.compact-details > div:last-child {
    border-bottom: 0;
}

.compact-details dt {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.compact-details dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.access-summary-card > p {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 900px) {
    .access-editor-layout {
        grid-template-columns: 1fr;
    }

    .access-summary-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .role-option {
        padding: 14px 16px;
    }

    .role-option span strong {
        font-size: 14px;
    }

    .account-active-option {
        padding: 16px 20px;
    }

    .access-editor-card .section-heading {
        padding: 20px 20px 0;
    }

    .access-editor-intro {
        padding: 0 20px 16px;
    }

    .role-option-grid {
        padding: 16px 20px;
    }
}

/* Profile page improvements */
.profile-editor {
    overflow: hidden;
}

.profile-editor .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px 0;
    gap: 16px;
}

.profile-editor .section-heading h2 {
    font-size: 24px;
    margin-bottom: 4px;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 24px 30px 28px;
}

.profile-form-grid .field {
    display: grid;
    gap: 8px;
}

.profile-form-grid label {
    display: grid;
    gap: 8px;
}

.profile-form-grid label > span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.profile-form-grid label > input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.profile-form-grid label > input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(217, 255, 87, .3);
}

.profile-form-grid label > input[readonly] {
    background: #f5f5f5;
    color: var(--muted);
    cursor: not-allowed;
    border-color: #d7dbd4;
}

.profile-form-grid label > small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.profile-password-fields {
    margin: 0;
    padding: 24px 30px 28px;
    border-top: 1px solid var(--line);
}

.profile-password-fields legend {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
}

.profile-password-fields p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
}

.profile-editor-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: #f8f8f3;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

.profile-editor-actions .button {
    flex-shrink: 0;
}

.profile-role-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 24px;
}

.profile-role-list article {
    padding: 14px 16px;
    background: #f8f9f2;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
}

.profile-role-list article strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 15px;
}

.profile-role-list article small {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.permission-summary {
    margin: 20px 0;
    padding: 14px 16px;
    background: #f8f9f2;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}

.permission-summary summary {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
}

.permission-summary > strong {
    display: block;
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #3d534b;
}

.permission-summary > strong:first-child {
    margin-top: 12px;
}

.permission-summary ul {
    margin: 0 0 12px;
    padding-left: 20px;
    color: #46544f;
    font-size: 13px;
    line-height: 1.6;
}

.profile-security .button {
    width: 100%;
    margin-bottom: 8px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .profile-form-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .profile-password-fields {
        padding: 20px;
    }

    .profile-editor-actions {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
        text-align: center;
    }

    .profile-editor-actions .button {
        width: 100%;
    }

    .profile-editor .section-heading {
        padding: 20px 20px 0;
    }

    .profile-security {
        padding: 20px;
    }

    .profile-security h2 {
        font-size: 24px;
    }
}

/* User menu dropdown */
.user-menu { position: relative; }
.user-menu-button {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
    cursor: pointer; color: white; transition: background .15s ease, border-color .15s ease;
}
.user-menu-button:hover, .user-menu-button[aria-expanded=true] {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3);
}
.user-menu-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: var(--ink);
    font-weight: 700; font-size: 13px;
}
.user-menu-toggle-icon { font-size: 10px; opacity: .7; }
.user-menu-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 220px; background: white; border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.25);
    border: 1px solid var(--line); z-index: 100;
    overflow: hidden;
}
.user-menu-header {
    padding: 14px 16px; border-bottom: 1px solid var(--line);
    background: #f8f9f2;
}
.user-menu-header strong { display: block; font-size: 14px; color: var(--ink); }
.user-menu-header small { font-size: 12px; color: var(--muted); }
.user-menu-items { padding: 6px 0; }
.user-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; width: 100%; border: 0;
    background: transparent; color: var(--ink);
    font: inherit; font-size: 14px; cursor: pointer;
    text-decoration: none; transition: background .15s ease;
}
.user-menu-item:hover { background: #f0f1e9; }
.user-menu-item svg { flex-shrink: 0; opacity: .7; }
.user-menu-item--logout { color: #9a342b; }
.user-menu-item--logout:hover { background: #fef2f2; color: #7f1d1d; }

@media (max-width: 768px) {
    .user-menu-dropdown {
        position: fixed; top: auto; right: 12px; bottom: 12px;
        left: 12px; width: auto; min-height: 200px;
        box-shadow: 0 4px 20px rgba(0,0,0,.3);
    }
    .user-menu-button { padding: 6px 10px; }
}