:root {
    --bg: #f4f7fb;
    --surface: #fff;
    --line: #d8e1ec;
    --text: #162033;
    --muted: #647287;
    --primary: #1857c2;
    --dark: #132038;
    --green: #128553;
    --orange: #b85d00;
    --shadow: 0 18px 45px rgba(22, 32, 51, .12);
}
html.dark-mode {
    --bg: #08111f;
    --surface: #101c31;
    --line: #263653;
    --text: #edf5ff;
    --muted: #9aaac2;
    --primary: #21a7e0;
    --dark: #07101d;
    --green: #48d597;
    --orange: #ffc266;
    --shadow: 0 20px 55px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
body { background: #fff; color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; margin: 0; }
button, input, select, textarea { font: inherit; }

.minimal-login-page {
    align-items: center;
    background: radial-gradient(circle at center, #061c44 0%, #020b1d 52%, #010714 100%);
    color: #fff;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
.minimal-login-panel {
    align-items: center;
    background: transparent;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    width: 100%;
}
.minimal-login-card {
    background: rgba(2, 12, 32, .82);
    border: 1px solid rgba(158, 184, 230, .28);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .42);
    padding: 28px 26px;
    width: min(100%, 340px);
}
.minimal-login-card.has-login-error,
.minimal-login-card.is-shaking {
    animation: loginShake .42s cubic-bezier(.36, .07, .19, .97);
}
.minimal-theme-toggle {
    background: rgba(21, 156, 255, .14);
    border: 1px solid rgba(21, 156, 255, .42);
    border-radius: 8px;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin: 0 0 18px auto;
    min-height: 32px;
    padding: 0 12px;
}
.login-page-theme-toggle {
    position: fixed;
    right: 24px;
    top: 24px;
    z-index: 10;
}
.minimal-login-logo {
    display: block;
    height: auto;
    margin: 0 auto 22px;
    max-width: 210px;
    width: 78%;
}
.minimal-login-card h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0 0 8px;
    text-align: center;
}
.minimal-intro {
    color: #c9d2ea;
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 24px;
    text-align: center;
}
.minimal-field-group { margin-bottom: 18px; }
.minimal-field-group label {
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
}
.minimal-input-box {
    align-items: center;
    background: rgba(0, 10, 30, .38);
    border: 1px solid rgba(158, 184, 230, .45);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    height: 42px;
    padding: 0 12px;
}
.minimal-input-box input,
html.dark-mode .minimal-input-box input {
    background: transparent;
    border: 0;
    color: #fff;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    min-height: 40px;
    min-width: 0;
    outline: none;
    padding: 0;
}
.minimal-input-box input:-webkit-autofill,
.minimal-input-box input:-webkit-autofill:hover,
.minimal-input-box input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1000px rgba(0, 10, 30, .38) inset;
}
.minimal-email-box {
    gap: 8px;
    padding-right: 10px;
}
.minimal-email-domain {
    border-left: 1px solid rgba(158, 184, 230, .3);
    color: #fff;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    padding-left: 10px;
    white-space: nowrap;
}
.minimal-icon {
    border: 2px solid #159cff;
    flex: 0 0 auto;
    height: 17px;
    position: relative;
    width: 17px;
}
.minimal-svg-icon {
    flex: 0 0 auto;
    height: 19px;
    width: 19px;
}
.email-icon {
    border-radius: 3px;
}
.email-icon::before,
.email-icon::after {
    background: #159cff;
    content: "";
    height: 2px;
    left: 1px;
    position: absolute;
    top: 6px;
    transform-origin: center;
    width: 12px;
}
.email-icon::before { transform: rotate(32deg); }
.email-icon::after { transform: rotate(-32deg); }
.key-icon {
    border-radius: 50%;
}
.key-icon::before {
    background: #159cff;
    content: "";
    height: 3px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 15px;
}
.key-icon::after {
    border: solid #159cff;
    border-width: 0 2px 2px 0;
    content: "";
    height: 5px;
    left: 22px;
    position: absolute;
    top: 6px;
    width: 5px;
}
.minimal-eye {
    background: transparent;
    border: 0;
    border-radius: 6px;
    height: 17px;
    min-height: 17px;
    padding: 0;
    position: relative;
    width: 22px;
}
.minimal-eye img {
    display: block;
    height: 19px;
    width: 19px;
}
.minimal-row {
    align-items: center;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
    margin: 4px 0 26px;
}
.minimal-remember {
    align-items: center;
    color: #fff;
    display: flex;
    gap: 10px;
    margin: 0;
}
.minimal-remember input {
    accent-color: #159cff;
    height: 15px;
    min-height: 15px;
    width: 15px;
}
.minimal-row a {
    color: #11a9ff;
    text-decoration: none;
}
.forgot-row {
    justify-content: center;
    margin: 18px 0 0;
}
.minimal-sign-in {
    background: linear-gradient(90deg, #0b9cff, #0867f2);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 118, 255, .25);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    height: 44px;
    min-height: 44px;
    width: 100%;
}
.minimal-secure-note {
    align-items: center;
    border-top: 1px solid rgba(167, 190, 230, .25);
    color: #c6d0e8;
    display: flex;
    font-size: 13px;
    gap: 14px;
    line-height: 1.35;
    margin-top: 24px;
    padding-top: 20px;
}
.minimal-lock-icon {
    flex: 0 0 auto;
    height: 38px;
    width: 38px;
}
.minimal-secure-note p { margin: 0; }

body.light-mode .minimal-login-page {
    background: #fff;
    color: #162033;
}
body.light-mode .minimal-login-card {
    background: #fff;
    border-color: #d8e1ec;
    box-shadow: 0 20px 60px rgba(22, 32, 51, .12);
}
body.light-mode .minimal-login-card h1,
body.light-mode .minimal-field-group label,
body.light-mode .minimal-remember {
    color: #162033;
}
body.light-mode .minimal-intro,
body.light-mode .minimal-secure-note {
    color: #647287;
}
body.light-mode .minimal-input-box {
    background: #f5f7fb;
    border-color: #d8e1ec;
}
body.light-mode .minimal-input-box input {
    color: #162033;
}
body.light-mode .minimal-email-domain {
    border-left-color: #d8e1ec;
    color: #162033;
}
body.light-mode .minimal-icon,
body.light-mode .minimal-eye {
    border-color: #159cff;
}
body.light-mode .minimal-eye::after {
    background: #159cff;
}
body.light-mode .minimal-theme-toggle {
    background: #eef4fb;
    border-color: #d8e1ec;
    color: #1857c2;
}
body.light-mode .minimal-login-logo {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

@media (max-width: 700px) {
    .minimal-login-page { padding: 16px; }
    .minimal-login-panel { padding: 24px 16px; }
    .minimal-login-card { padding: 26px 22px; width: min(100%, 320px); }
}

.login-portal {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
.login-portal.sky {
    background: #fff;
    padding: 30px;
}
.login-split-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(38, 79, 106, .24);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(310px, 1fr) minmax(320px, 420px);
    max-width: 980px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: min(96vw, 980px);
}
.login-visual-panel {
    border-radius: 12px;
    min-height: 500px;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 20% 20%, rgba(19, 163, 154, .5), transparent 28%),
        radial-gradient(circle at 80% 72%, rgba(24, 87, 194, .45), transparent 32%),
        linear-gradient(145deg, #0d1c36 0%, #122b58 48%, #0e8394 100%);
}
.login-visual-panel::after {
    background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.42) 100%);
    content: "";
    inset: 0;
    position: absolute;
}
.live-grid {
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 42px 42px;
    inset: 0;
    opacity: .28;
    position: absolute;
    animation: gridMove 14s linear infinite;
}
.login-visual-panel::before {
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    content: "";
    filter: blur(22px);
    height: 180px;
    left: 70px;
    position: absolute;
    top: 58px;
    width: 180px;
    animation: pulseGlow 5s ease-in-out infinite;
}
.live-card {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    color: #fff;
    padding: 16px;
    position: absolute;
    width: 220px;
    z-index: 2;
}
.live-card span {
    color: rgba(255,255,255,.7);
    display: block;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.live-card strong {
    display: block;
    font-size: 17px;
    line-height: 1.2;
}
.live-card small {
    color: rgba(255,255,255,.76);
    display: block;
    margin-top: 8px;
}
.live-card.laptop {
    left: 34px;
    top: 46px;
    animation: floatOne 6s ease-in-out infinite;
}
.live-card.server {
    right: 34px;
    top: 168px;
    animation: floatTwo 7s ease-in-out infinite;
}
.live-card.switch {
    left: 76px;
    top: 292px;
    animation: floatThree 6.5s ease-in-out infinite;
}
.login-visual-panel h2 {
    bottom: 26px;
    color: #fff;
    font-size: 40px;
    font-weight: 950;
    left: 26px;
    letter-spacing: 0;
    line-height: .94;
    margin: 0;
    position: absolute;
    text-shadow: 0 4px 18px rgba(0,0,0,.32);
    z-index: 2;
}
@keyframes gridMove {
    from { background-position: 0 0; }
    to { background-position: 42px 42px; }
}
@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: .68; }
    50% { transform: scale(1.18); opacity: .95; }
}
@keyframes floatOne {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes floatTwo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(14px); }
}
@keyframes floatThree {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes loginShake {
    0%, 100% { transform: translateX(0); }
    12%, 36%, 60%, 84% { transform: translateX(-8px); }
    24%, 48%, 72% { transform: translateX(8px); }
}
.login-card {
    align-self: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--text);
    padding: 46px 54px;
    position: relative;
    width: 100%;
}
.login-theme-toggle {
    background: rgba(24, 87, 194, .08);
    border: 1px solid rgba(24, 87, 194, .16);
    color: #1857c2;
    font-size: 12px;
    min-height: 34px;
    padding: 0 12px;
    position: absolute;
    right: 18px;
    top: 18px;
    width: auto;
}
.login-card img { display: block; margin: 0 auto 26px; max-width: 96px; }
.login-card h1, .topbar h1 { font-size: 28px; line-height: 1.1; margin: 0 0 10px; }
.login-card h1 { font-size: 26px; font-weight: 950; text-align: center; }
.login-card p, .topbar p { color: var(--muted); line-height: 1.5; margin: 0 0 24px; }
.login-card p { color: #6d7788; font-size: 13px; text-align: center; }
.login-help { color: #111827; display: inline-block; font-size: 12px; font-weight: 800; text-decoration: none; }
.login-card small { color: #6d7788; display: block; line-height: 1.45; margin-top: 22px; text-align: center; }
.login-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: -2px 0 22px;
}
.remember {
    align-items: center;
    color: #6d7788;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    margin: 0;
}
.remember input {
    margin: 0;
    min-height: auto;
    width: auto;
}

label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
input, select, textarea { background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--text); display: block; margin-top: 7px; min-height: 44px; padding: 0 13px; width: 100%; }
textarea { padding: 12px 13px; }
button, .button { align-items: center; background: var(--primary); border: 0; border-radius: 10px; color: #fff; cursor: pointer; display: inline-flex; font-weight: 850; justify-content: center; min-height: 44px; padding: 0 18px; text-decoration: none; }
.secondary-button { background: rgba(24, 87, 194, .1); color: var(--primary); }
html.dark-mode .secondary-button { background: rgba(33, 167, 224, .12); color: #bcecff; }
.login-card button:not(.login-theme-toggle), .save { width: 100%; }
.login-card label { color: #111827; font-size: 12px; }
.login-card input {
    background: #f5f7fb;
    border-color: #e7ecf3;
    color: #111827;
    min-height: 42px;
}
.login-card input:focus { border-color: #0ea5c7; outline: none; }
.login-card button { background: #000; border-radius: 8px; }
html.dark-mode body { background: #0b3d91; }
html.dark-mode .login-portal.sky {
    background: #0b3d91;
}
html.dark-mode .login-split-card {
    background: rgba(12, 23, 39, .94);
    border-color: rgba(101, 127, 163, .26);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}
html.dark-mode .login-card h1,
html.dark-mode .login-card label,
html.dark-mode .login-help { color: var(--text); }
html.dark-mode .login-card p,
html.dark-mode .login-card small,
html.dark-mode .remember { color: var(--muted); }
html.dark-mode .login-card input,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background: rgba(8, 17, 31, .82);
    border-color: var(--line);
    color: var(--text);
}
html.dark-mode .login-card button { background: #21a7e0; color: #06101d; }
html.dark-mode .login-theme-toggle {
    background: rgba(33, 167, 224, .12);
    border-color: rgba(33, 167, 224, .26);
    color: #bcecff;
}

.techora-login {
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 113, 255, .18), transparent 42%),
        linear-gradient(135deg, #020b1d 0%, #001a47 52%, #020b1d 100%);
    padding: 34px;
}
.login-command-card {
    background:
        radial-gradient(circle at 24% 72%, rgba(0, 145, 255, .18), transparent 34%),
        linear-gradient(145deg, rgba(3, 19, 49, .98), rgba(1, 16, 42, .96));
    border: 1px solid rgba(64, 128, 218, .55);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(420px, 1.2fr) minmax(360px, .95fr);
    max-width: 1480px;
    min-height: 78vh;
    overflow: hidden;
    position: relative;
    width: min(96vw, 1480px);
}
.login-brand-panel {
    border-right: 1px solid rgba(89, 138, 205, .42);
    min-height: 720px;
    overflow: hidden;
    padding: 74px 66px 52px;
    position: relative;
}
.login-brand-logo {
    display: block;
    max-width: 660px;
    position: relative;
    width: 82%;
    z-index: 2;
}
.login-brand-copy {
    margin-top: 54px;
    position: relative;
    z-index: 2;
}
.login-brand-copy h2 {
    color: #fff;
    font-size: clamp(56px, 5.3vw, 82px);
    font-weight: 950;
    letter-spacing: 0;
    line-height: .98;
    margin: 0 0 26px;
}
.login-brand-copy h2 span { color: #1294ff; }
.login-brand-copy p {
    color: rgba(232, 240, 255, .86);
    font-size: 23px;
    line-height: 1.5;
    margin: 0 0 26px;
}
.login-brand-copy i {
    background: #1da5ff;
    display: block;
    height: 4px;
    width: 88px;
}
.login-wave {
    background:
        radial-gradient(ellipse at 55% 75%, rgba(17, 147, 255, .52), transparent 14%),
        repeating-linear-gradient(170deg, transparent 0 18px, rgba(0, 142, 255, .22) 19px, transparent 20px);
    bottom: 128px;
    filter: drop-shadow(0 0 18px rgba(0, 153, 255, .32));
    height: 260px;
    left: 0;
    opacity: .74;
    position: absolute;
    right: 0;
    transform: skewY(-8deg);
}
.login-features {
    align-items: end;
    bottom: 60px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, 1fr);
    left: 64px;
    position: absolute;
    right: 56px;
    z-index: 2;
}
.login-features article {
    border-right: 1px solid rgba(22, 154, 255, .46);
    color: #fff;
    display: grid;
    gap: 13px;
    justify-items: center;
    min-height: 112px;
    padding: 0 22px;
    text-align: center;
}
.login-features article:last-child { border-right: 0; }
.login-features strong {
    font-size: 18px;
    line-height: 1.35;
}
.line-icon {
    border: 3px solid #149cff;
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px;
}
.shield-icon {
    border-radius: 18px 18px 22px 22px;
    transform: perspective(40px) rotateX(-8deg);
}
.shield-icon::after {
    border: solid #149cff;
    border-width: 0 3px 3px 0;
    content: "";
    height: 12px;
    left: 17px;
    position: absolute;
    top: 13px;
    transform: rotate(45deg);
    width: 7px;
}
.chart-icon {
    border: 0;
    border-bottom: 3px solid #149cff;
    border-left: 3px solid #149cff;
}
.chart-icon::before {
    background: linear-gradient(90deg, #149cff 0 7px, transparent 7px 14px, #149cff 14px 22px, transparent 22px 29px, #149cff 29px 38px);
    bottom: 4px;
    content: "";
    height: 34px;
    left: 8px;
    position: absolute;
    width: 40px;
}
.gear-icon { border-radius: 50%; }
.gear-icon::before {
    border: 3px solid #149cff;
    border-radius: 50%;
    content: "";
    height: 16px;
    left: 13px;
    position: absolute;
    top: 13px;
    width: 16px;
}
.team-icon {
    border: 0;
}
.team-icon::before,
.team-icon::after {
    border: 3px solid #149cff;
    border-radius: 50%;
    content: "";
    height: 17px;
    position: absolute;
    top: 5px;
    width: 17px;
}
.team-icon::before { left: 8px; }
.team-icon::after { right: 8px; }
.team-icon {
    border-bottom: 3px solid #149cff;
    border-radius: 0 0 24px 24px;
}
.command-login-card {
    align-self: stretch;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 86px 66px;
}
.command-login-card h1 {
    color: #fff;
    font-size: 42px;
    margin-top: 30px;
}
.command-login-card p {
    color: rgba(232, 240, 255, .82);
    font-size: 20px;
    line-height: 1.45;
    margin-bottom: 46px;
}
.command-login-card label {
    color: #fff;
    font-size: 16px;
    margin-bottom: 28px;
}
.input-shell {
    align-items: center;
    border: 1px solid rgba(151, 178, 219, .5);
    border-radius: 11px;
    display: flex;
    gap: 16px;
    margin-top: 13px;
    min-height: 64px;
    padding: 0 18px;
}
.input-shell input,
html.dark-mode .input-shell input {
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    min-height: 58px;
    min-width: 0;
    outline: none;
    padding: 0;
}
.input-shell input:focus { outline: none; }
.input-shell input:-webkit-autofill,
.input-shell input:-webkit-autofill:hover,
.input-shell input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 9999s ease-in-out 0s;
}
.input-shell:focus-within {
    border-color: #149cff;
    box-shadow: 0 0 0 3px rgba(20, 156, 255, .12);
}
.field-icon {
    border: 2px solid #aebdf3;
    flex: 0 0 auto;
    height: 22px;
    position: relative;
    width: 22px;
}
.user-field {
    border-radius: 50% 50% 40% 40%;
}
.user-field::after {
    border: 2px solid #aebdf3;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    content: "";
    height: 9px;
    left: -5px;
    position: absolute;
    top: 17px;
    width: 28px;
}
.lock-field {
    border-radius: 3px;
    margin-top: 8px;
}
.lock-field::before {
    border: 2px solid #aebdf3;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    content: "";
    height: 11px;
    left: 3px;
    position: absolute;
    top: -13px;
    width: 12px;
}
.password-eye {
    background: transparent;
    border: 2px solid #aebdf3;
    border-radius: 50%;
    flex: 0 0 auto;
    height: 24px;
    min-height: 24px;
    padding: 0;
    position: relative;
    width: 34px;
}
.password-eye::after {
    background: #aebdf3;
    border-radius: 50%;
    content: "";
    height: 7px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
}
.command-login-card .login-row {
    margin: 4px 0 36px;
}
.command-login-card .remember,
.command-login-card .login-help {
    color: #fff;
    font-size: 17px;
}
.command-login-card .remember input {
    accent-color: #149cff;
    height: 20px;
    width: 20px;
}
.command-login-card .login-help { color: #14a6ff; }
.command-login-card button[type="submit"] {
    background: linear-gradient(135deg, #149cff, #0069ec);
    border-radius: 11px;
    box-shadow: 0 16px 36px rgba(0, 102, 236, .28);
    color: #fff;
    font-size: 24px;
    min-height: 74px;
}
.command-theme-toggle {
    align-self: flex-end;
    background: rgba(0, 67, 146, .42);
    border: 1px solid rgba(20, 156, 255, .72);
    color: #fff;
    font-size: 16px;
    min-height: 50px;
    padding: 0 22px;
    position: absolute;
    right: 44px;
    top: 38px;
}
.secure-note {
    align-items: center;
    border-top: 1px solid rgba(151, 178, 219, .3);
    display: flex;
    gap: 20px;
    margin-top: 34px;
    padding-top: 30px;
}
.secure-note .line-icon {
    flex: 0 0 auto;
    height: 54px;
    width: 54px;
}
.secure-note small {
    color: rgba(232, 240, 255, .8);
    font-size: 17px;
    line-height: 1.45;
    margin: 0;
    text-align: left;
}

/* Compact login sizing */
.login-command-card {
    grid-template-columns: minmax(310px, 1fr) minmax(320px, 420px);
    max-width: 980px;
    min-height: 560px;
    width: min(96vw, 980px);
}
.login-brand-panel {
    min-height: 540px;
    padding: 46px 42px 34px;
}
.login-brand-logo { max-width: 360px; width: 86%; }
.login-brand-copy { margin-top: 38px; }
.login-brand-copy h2 { font-size: 48px; margin-bottom: 18px; }
.login-brand-copy p { font-size: 15px; margin-bottom: 20px; }
.login-brand-copy i { width: 64px; }
.login-wave { bottom: 100px; height: 170px; }
.login-features { bottom: 34px; left: 34px; right: 34px; }
.login-features article { gap: 8px; min-height: 82px; padding: 0 10px; }
.login-features strong { font-size: 12px; }
.line-icon { height: 34px; width: 34px; }
.shield-icon::after { height: 9px; left: 11px; top: 8px; width: 5px; }
.chart-icon::before { height: 24px; left: 6px; width: 28px; }
.gear-icon::before { height: 10px; left: 9px; top: 9px; width: 10px; }
.team-icon::before,
.team-icon::after { height: 12px; top: 4px; width: 12px; }
.team-icon::before { left: 5px; }
.team-icon::after { right: 5px; }
.command-login-card { padding: 54px 44px; }
.command-login-card h1 { font-size: 28px; margin-top: 18px; }
.command-login-card p { font-size: 14px; margin-bottom: 28px; }
.command-login-card label { font-size: 13px; margin-bottom: 18px; }
.input-shell { gap: 12px; margin-top: 9px; min-height: 48px; padding: 0 14px; }
.input-shell input,
html.dark-mode .input-shell input { font-size: 14px; min-height: 44px; }
.field-icon { height: 18px; width: 18px; }
.user-field::after { height: 7px; left: -4px; top: 14px; width: 24px; }
.lock-field::before { width: 10px; }
.password-eye { height: 20px; min-height: 20px; width: 28px; }
.password-eye::after { height: 6px; width: 6px; }
.command-login-card .login-row { margin: 0 0 24px; }
.command-login-card .remember,
.command-login-card .login-help { font-size: 13px; }
.command-login-card .remember input { height: 16px; width: 16px; }
.command-login-card button[type="submit"] { font-size: 18px; min-height: 54px; }
.command-theme-toggle { font-size: 12px; min-height: 36px; padding: 0 14px; right: 28px; top: 24px; }
.secure-note { gap: 14px; margin-top: 22px; padding-top: 20px; }
.secure-note .line-icon { height: 38px; width: 38px; }
.secure-note small { font-size: 13px; }

.app {
    display: grid;
    --sidebar-collapsed: 76px;
    --sidebar-expanded: 230px;
    --sidebar-motion: 210ms;
    grid-template-columns: var(--sidebar-collapsed) 1fr;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    transition: grid-template-columns var(--sidebar-motion) cubic-bezier(.22, 1, .36, 1);
}
html.sidebar-pinned .app {
    grid-template-columns: var(--sidebar-expanded) 1fr;
}
html.sidebar-hovered:not(.sidebar-pinned) .app,
.app:has(.sidebar:hover) {
    grid-template-columns: var(--sidebar-expanded) 1fr;
}
.app-bg {
    background: #fff;
    inset: 0;
    overflow: hidden;
    position: fixed;
    z-index: -2;
}
html.dark-mode .app-bg {
    background: #0b3d91;
}
body.light-mode .app-bg,
html.light-mode .app-bg {
    background: #fff;
}
body.light-mode,
html.light-mode body {
    background: #fff;
    color: #1f2d3d;
}
body.light-mode .workspace,
html.light-mode .workspace {
    color: #1f2d3d;
}
body.light-mode .topbar h1,
html.light-mode .topbar h1 {
    color: #1f2d3d;
}
body.light-mode .panel,
body.light-mode .metrics article,
html.light-mode .panel,
html.light-mode .metrics article {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: none;
}
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
html.light-mode input,
html.light-mode select,
html.light-mode textarea {
    background: #fff;
    border-color: #d1d5db;
    color: #1f2d3d;
}
body.light-mode .form-note,
html.light-mode .form-note {
    background: #fff;
    border-color: #e5e7eb;
    color: #4b5563;
}
body.light-mode .spec-preview dd,
html.light-mode .spec-preview dd {
    background: #fff;
}
body.light-mode .theme-toggle,
html.light-mode .theme-toggle {
    background: #fff;
    border-color: #dfe7f0;
    color: #334155;
}
.app-bg::before {
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
}
.app-bg::after {
    background: transparent;
    content: "";
    filter: blur(8px);
    inset: 0;
    position: absolute;
}
.sidebar {
    background: linear-gradient(180deg, #132038 0%, #0f1b31 100%);
    box-shadow: 18px 0 42px rgba(15, 27, 49, .16);
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    padding: 22px 10px;
    position: relative;
    width: var(--sidebar-collapsed);
    z-index: 2;
    transition:
        width var(--sidebar-motion) cubic-bezier(.22, 1, .36, 1),
        padding var(--sidebar-motion) cubic-bezier(.22, 1, .36, 1),
        box-shadow 160ms ease;
}
.sidebar:hover,
html.sidebar-pinned .sidebar {
    padding: 22px 18px;
    width: var(--sidebar-expanded);
}
.sidebar:hover {
    box-shadow: 20px 0 48px rgba(15, 27, 49, .22);
}
body.light-mode .sidebar,
html.light-mode .sidebar {
    background: #fff;
    border-right: 1px solid #e5e7eb;
    box-shadow: none;
    color: #334155;
}
.sidebar-head {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin: 0 0 30px;
    min-width: 194px;
}
.logo-wrap {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: flex-start;
    min-width: 44px;
    overflow: hidden;
    padding: 0;
}
.logo-wrap img {
    background: transparent;
    border-radius: 8px;
    display: block;
    height: auto;
    max-width: 142px;
    padding: 6px 0;
    width: 142px;
    transition: width var(--sidebar-motion) cubic-bezier(.22, 1, .36, 1), transform var(--sidebar-motion) cubic-bezier(.22, 1, .36, 1);
}
.sidebar:not(:hover) .logo-wrap img {
    transform: translateX(-3px);
    width: 48px;
}
html.sidebar-pinned .sidebar .logo-wrap img {
    transform: none;
    width: 142px;
}
.sidebar-pin {
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: rgba(255,255,255,.82);
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    min-height: 38px;
    opacity: 0;
    padding: 0;
    transform: translateX(8px);
    width: 38px;
}
.sidebar:hover .sidebar-pin,
html.sidebar-pinned .sidebar-pin {
    opacity: 1;
    transform: translateX(0);
}
.sidebar-pin svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}
.sidebar-pin:hover,
html.sidebar-pinned .sidebar-pin {
    background: rgba(33, 167, 224, .18);
    border-color: rgba(33, 167, 224, .38);
    color: #21a7e0;
}
html.sidebar-pinned .sidebar-pin svg {
    transform: rotate(-28deg);
}
body.light-mode .logo-wrap img,
html.light-mode .logo-wrap img {
    background: transparent;
}
.sidebar nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
    min-width: 194px;
}
.sidebar-group {
    display: grid;
    gap: 7px;
}
.sidebar-utility-group {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: auto;
    padding-top: 16px;
}
body.light-mode .sidebar-utility-group,
html.light-mode .sidebar-utility-group {
    border-top-color: #e5e7eb;
}
.sidebar a {
    align-items: center;
    border-radius: 10px;
    color: rgba(255,255,255,.78);
    display: flex;
    font-weight: 750;
    gap: 12px;
    padding: 12px 13px;
    text-decoration: none;
    white-space: nowrap;
}
.sidebar a.has-submenu {
    margin-bottom: 1px;
}
.sidebar a svg {
    fill: none;
    flex: 0 0 auto;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 19px;
}
.sidebar a span {
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 120ms ease,
        transform 140ms cubic-bezier(.22, 1, .36, 1);
}
.sidebar:hover a span,
html.sidebar-pinned .sidebar a span {
    opacity: 1;
    transform: translateX(0);
}
.sidebar:not(:hover) a {
    justify-content: flex-start;
    padding-left: 15px;
}
html.sidebar-pinned .sidebar a {
    justify-content: flex-start;
    padding-left: 13px;
}
.sidebar-submenu {
    display: grid;
    gap: 3px;
    margin: -2px 0 8px 43px;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition:
        opacity 120ms ease,
        transform 140ms cubic-bezier(.22, 1, .36, 1);
}
.sidebar:hover .sidebar-submenu,
html.sidebar-pinned .sidebar-submenu {
    opacity: 1;
    transform: translateX(0);
}
.sidebar-subitem {
    color: rgba(255,255,255,.52) !important;
    font-size: 13px;
    font-weight: 700 !important;
    min-height: 30px;
    padding: 6px 10px !important;
}
.sidebar-subitem.active,
.sidebar-subitem:hover {
    background: transparent !important;
    color: #fff !important;
}
.sidebar-subitem span {
    opacity: 1;
    transform: none;
}
.sidebar-logout {
    margin-top: 2px;
}
.sidebar:not(:hover) .sidebar-submenu {
    height: 0;
    margin: 0;
    pointer-events: none;
}
html.sidebar-pinned .sidebar-submenu {
    height: auto;
    margin: -2px 0 8px 43px;
    pointer-events: auto;
}
.sidebar a.active, .sidebar a:hover { background: rgba(255,255,255,.1); color: #fff; }
body.light-mode .sidebar a,
html.light-mode .sidebar a {
    color: #64748b;
}
body.light-mode .sidebar a.active,
body.light-mode .sidebar a:hover,
html.light-mode .sidebar a.active,
html.light-mode .sidebar a:hover {
    background: #f3f4f6;
    color: #1f2d3d;
}
body.light-mode .sidebar-subitem,
html.light-mode .sidebar-subitem {
    color: #9aa4b2 !important;
}
body.light-mode .sidebar-subitem.active,
body.light-mode .sidebar-subitem:hover,
html.light-mode .sidebar-subitem.active,
html.light-mode .sidebar-subitem:hover {
    background: transparent !important;
    color: #334155 !important;
}
body.light-mode .sidebar-pin,
html.light-mode .sidebar-pin {
    background: #fff;
    border-color: #e5e7eb;
    color: #64748b;
}
body.light-mode .sidebar-pin:hover,
html.light-mode .sidebar-pin:hover,
html.light-mode.sidebar-pinned .sidebar-pin {
    background: #eef6ff;
    border-color: #bfdbfe;
    color: #1857c2;
}
.theme-toggle {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.82);
    justify-content: flex-start;
    margin-top: 8px;
    width: 100%;
}
.theme-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.app-top-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    position: fixed;
    right: 28px;
    top: 24px;
    transition:
        opacity var(--motion-fast) ease,
        transform var(--motion-fast) ease,
        visibility var(--motion-fast) ease;
    z-index: 20;
}
.app-top-actions.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-18px);
    visibility: hidden;
}
.global-search {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    gap: 9px;
    height: 42px;
    padding: 0 12px;
    width: min(42vw, 440px);
}
.global-search-icon-submit {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 30px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 30px;
}
.global-search-icon-submit:disabled {
    cursor: default;
    opacity: 1;
}
.global-search-icon-submit svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}
.global-search input {
    background: transparent;
    border: 0;
    color: #172033;
    margin: 0;
    min-height: 38px;
    min-width: 0;
    padding: 0;
}
.global-search.has-query {
    border-color: rgba(33, 167, 224, .72);
    box-shadow: 0 0 0 3px rgba(33, 167, 224, .12);
}
.global-search.has-query .global-search-icon-submit {
    background: #21a7e0;
    color: #fff;
}
html.dark-mode .global-search {
    background: rgba(16, 28, 49, .92);
    border-color: rgba(101, 127, 163, .28);
}
html.dark-mode .global-search input {
    color: #edf5ff;
}
html.dark-mode .global-search.has-query {
    border-color: rgba(33, 167, 224, .76);
    box-shadow: 0 0 0 3px rgba(33, 167, 224, .16);
}
.app-theme-toggle {
    min-height: 42px;
    margin: 0;
    width: auto;
}
.notification-button {
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: rgba(255,255,255,.84);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    position: relative;
    text-decoration: none;
    width: 42px;
}
.notification-button svg {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 20px;
}
.notification-button span {
    align-items: center;
    background: #ef4444;
    border: 2px solid #0b3d91;
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: 10px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 5px;
    position: absolute;
    right: -8px;
    top: -8px;
}
body.light-mode .app-theme-toggle,
html.light-mode .app-theme-toggle {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: none;
    color: #334155;
}
body.light-mode .notification-button,
html.light-mode .notification-button {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: none;
    color: #64748b;
}
body.light-mode .notification-button span,
html.light-mode .notification-button span {
    border-color: #fff;
}
.workspace {
    display: grid;
    gap: 20px;
    padding: 78px 28px 28px;
    position: relative;
    z-index: 1;
    transition: transform var(--sidebar-motion) cubic-bezier(.22, 1, .36, 1);
}
.search-results-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.search-results-grid .table-wrap {
    overflow-x: hidden;
}
.search-results-grid table {
    min-width: 0;
    table-layout: fixed;
}
.search-results-grid th,
.search-results-grid td {
    overflow-wrap: anywhere;
    word-break: normal;
}
.search-results-grid .status-pill {
    white-space: normal;
}
.search-page-form {
    grid-template-columns: 1fr 120px;
}
.notification-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.notification-grid article {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    padding: 14px;
}
.notification-grid h3 {
    font-size: 14px;
    margin: 0 0 10px;
}
.notification-grid a {
    border-top: 1px solid #e8edf3;
    color: #172033;
    display: block;
    padding: 10px 0;
    text-decoration: none;
}
.notification-grid strong,
.notification-grid span {
    display: block;
}
.notification-grid span,
.notification-grid p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
html.dark-mode .notification-grid article {
    background: rgba(8, 17, 31, .35);
    border-color: rgba(101, 127, 163, .22);
}
html.dark-mode .notification-grid a {
    border-top-color: rgba(101, 127, 163, .18);
    color: #edf5ff;
}
html.dark-mode .notification-grid span,
html.dark-mode .notification-grid p {
    color: #dbe8ff;
}
.notification-tabs {
    align-items: center;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    gap: 8px;
    margin: -4px 0 16px;
    padding-bottom: 14px;
}
.notification-tabs a {
    border-radius: 8px;
    color: #64748b;
    font-weight: 850;
    padding: 9px 12px;
    text-decoration: none;
}
.notification-tabs a.active,
.notification-tabs a:hover {
    background: #eef4ff;
    color: #1857d6;
}
.notification-center-list {
    display: grid;
    gap: 10px;
}
.mobile-check-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mobile-check-grid article {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    padding: 14px;
}
.mobile-check-grid strong,
.mobile-check-grid span {
    display: block;
}
.mobile-check-grid span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 6px;
}
html.dark-mode .mobile-check-grid article {
    background: rgba(8, 17, 31, .35);
    border-color: rgba(101, 127, 163, .22);
}
html.dark-mode .mobile-check-grid span {
    color: #dbe8ff;
}
.notification-row {
    align-items: start;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    display: grid;
    gap: 14px;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    padding: 16px;
}
.notification-row.is-read {
    opacity: .68;
}
.notification-row strong {
    display: block;
    margin-bottom: 5px;
}
.notification-row p {
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 8px;
}
.notification-row aside {
    align-items: end;
    display: grid;
    gap: 8px;
    justify-items: end;
}
.notification-row aside > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}
.notification-row button {
    min-height: 34px;
    padding: 0 12px;
}
.notification-dot {
    border-radius: 999px;
    display: block;
    height: 10px;
    margin-top: 5px;
    width: 10px;
}
.severity-warning .notification-dot { background: #f59e0b; }
.severity-danger .notification-dot { background: #ef4444; }
.severity-info .notification-dot { background: #1857d6; }
.empty-notification-state {
    border: 1px dashed #d8e0ea;
    border-radius: 10px;
    padding: 48px 20px;
    text-align: center;
}
.empty-notification-state h2 {
    margin: 0 0 8px;
}
.empty-notification-state p {
    color: #64748b;
    margin: 0;
}
html.dark-mode .notification-tabs {
    border-bottom-color: rgba(101, 127, 163, .2);
}
html.dark-mode .notification-tabs a {
    color: #dbe8ff;
}
html.dark-mode .notification-tabs a.active,
html.dark-mode .notification-tabs a:hover {
    background: rgba(33, 167, 224, .14);
    color: #21a7e0;
}
html.dark-mode .notification-row,
html.dark-mode .empty-notification-state {
    background: rgba(8, 17, 31, .35);
    border-color: rgba(101, 127, 163, .22);
}
html.dark-mode .notification-row p,
html.dark-mode .notification-row aside > span,
html.dark-mode .empty-notification-state p {
    color: #dbe8ff;
}
.notification-updates-panel {
    background: #2b2b2d;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
    color: #fff;
    overflow: hidden;
}
.notification-updates-head {
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.12);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 20px 24px;
}
.notification-updates-head h2 {
    color: #fff;
    font-size: 24px;
    margin: 0;
}
.notification-updates-head p {
    color: rgba(255,255,255,.58);
    margin: 4px 0 0;
}
.notification-updates-head a {
    color: #00b894;
    font-weight: 900;
    text-decoration: none;
}
.notification-updates-panel .notification-tabs {
    border-bottom-color: rgba(255,255,255,.1);
    margin: 0;
    padding: 14px 24px;
}
.notification-updates-panel .notification-tabs a {
    color: rgba(255,255,255,.72);
}
.notification-updates-panel .notification-tabs a.active,
.notification-updates-panel .notification-tabs a:hover {
    background: rgba(0, 184, 148, .14);
    color: #00d0a5;
}
.notification-bulk-form {
    margin: 0;
}
.notification-bulk-toolbar {
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.1);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 14px 24px;
}
.notification-check-all {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-weight: 850;
    gap: 10px;
}
.notification-check-all input,
.notification-row-check input {
    accent-color: #00b894;
    cursor: pointer;
    height: 17px;
    width: 17px;
}
.notification-updates-panel .notification-center-list {
    gap: 0;
    max-height: 62vh;
    overflow-y: auto;
}
.notification-updates-panel .notification-row {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    color: #fff;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 18px 24px;
}
.notification-updates-panel .notification-row:hover {
    background: rgba(255,255,255,.04);
}
.notification-updates-panel .notification-row.is-read {
    opacity: .56;
}
.notification-updates-panel .notification-row strong {
    color: #fff;
    font-size: 16px;
}
.notification-updates-panel .notification-row p {
    color: rgba(255,255,255,.78);
    font-size: 14px;
}
.notification-updates-panel .notification-row .table-action {
    color: #00b894;
    font-size: 14px;
    font-weight: 900;
}
.notification-updates-panel .notification-row aside {
    align-items: center;
    grid-template-columns: auto 10px;
}
.notification-updates-panel .notification-row aside > span {
    color: rgba(255,255,255,.78);
}
.notification-updates-panel .notification-row.is-read .notification-dot {
    background: transparent;
    border: 1px solid rgba(255,255,255,.28);
}
.notification-updates-panel .notification-dot {
    background: #e11d48;
    height: 9px;
    margin: 0;
    width: 9px;
}
.notification-updates-panel .empty-notification-state {
    background: transparent;
    border-color: rgba(255,255,255,.14);
    margin: 24px;
}
.notification-updates-panel .empty-notification-state h2 {
    color: #fff;
}
.notification-updates-panel .empty-notification-state p {
    color: rgba(255,255,255,.68);
}
.topbar { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.action-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }

.metrics { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(130px, 1fr)); }
.metrics article, .panel {
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(24, 87, 194, .08);
}
html.dark-mode .metrics article,
html.dark-mode .panel {
    background: rgba(16, 28, 49, .88);
    border-color: rgba(101, 127, 163, .22);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
}
.metrics article { padding: 18px; }
.metrics article {
    position: relative;
    overflow: hidden;
}
.metrics article::after {
    background: linear-gradient(135deg, rgba(14, 131, 148, .18), transparent 55%);
    content: "";
    inset: 0;
    position: absolute;
}
body.light-mode .metrics article::after,
html.light-mode .metrics article::after {
    display: none;
}
.metrics article span, .metrics article strong { position: relative; z-index: 1; }
.metrics span { display: block; font-size: 30px; font-weight: 850; line-height: 1; }
.metrics strong { color: var(--muted); display: block; font-size: 13px; margin-top: 10px; }
.panel { padding: 18px; }
.two-column { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 360px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.form-grid.compact { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
.form-note, .notice { border-radius: 10px; font-weight: 750; line-height: 1.45; padding: 12px 14px; }
.form-note { background: #eef4fb; border: 1px solid var(--line); color: #123f8b; margin: 0 0 16px; }
.flat-note {
    background: #fff;
    border-color: #e5e7eb;
    color: #4b5563;
}
.notice.success { background: #e8f7ef; border: 1px solid #b8e3ca; color: var(--green); }
.notice.error { background: #fdecec; border: 1px solid #efb5b1; color: #b42318; margin-bottom: 14px; }
html.dark-mode .form-note { background: rgba(33, 167, 224, .12); color: #bcecff; }
html.dark-mode .notice.success { background: rgba(72, 213, 151, .12); border-color: rgba(72, 213, 151, .34); }
html.dark-mode .notice.error { background: rgba(255, 95, 95, .12); border-color: rgba(255, 95, 95, .32); color: #ffb6b6; }
.filters { display: grid; gap: 10px; grid-template-columns: 1fr 210px 110px; margin-bottom: 16px; }
.inventory-filters { grid-template-columns: minmax(260px, 1fr) 180px 160px 160px 110px; }
.report-filters { grid-template-columns: 220px 200px 160px 160px 110px; }
.filters input, .filters select { margin-top: 0; }
.table-wrap { overflow-x: auto; }
.small-table { max-height: 420px; overflow: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); font-size: 14px; padding: 14px 10px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.badge { background: #fff3e1; border-radius: 999px; color: var(--orange); display: inline-block; font-size: 12px; font-weight: 850; padding: 6px 9px; white-space: nowrap; }
.status-pill {
    background: #eef4fb;
    border-radius: 999px;
    color: #1857c2;
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 9px;
    text-transform: capitalize;
    white-space: nowrap;
}
.status-available, .status-matched { background: #e8f7ef; color: #128553; }
.status-assigned { background: #eef4fb; color: #1857c2; }
.status-maintenance, .status-unmatched { background: #fff3e1; color: #b85d00; }
.status-sold { background: #edf0f5; color: #647287; }
.status-damaged { background: #fdecec; color: #b42318; }
html.dark-mode .status-pill { background: rgba(33, 167, 224, .12); color: #bcecff; }
html.dark-mode .status-available, html.dark-mode .status-matched { background: rgba(72, 213, 151, .14); color: #81e7b3; }
html.dark-mode .status-maintenance, html.dark-mode .status-unmatched { background: rgba(255, 194, 102, .14); color: #ffd08a; }
html.dark-mode .status-damaged { background: rgba(255, 95, 95, .14); color: #ffb6b6; }
.table-action { color: var(--primary); font-weight: 850; text-decoration: none; white-space: nowrap; }
.table-action:hover { text-decoration: underline; }
.spec-preview { align-self: start; background: #f9fbfe; }
html.dark-mode .badge { background: rgba(255, 194, 102, .14); }
html.dark-mode .spec-preview { background: rgba(16, 28, 49, .88); }
.spec-preview h2, .panel h2 { font-size: 19px; margin: 0 0 14px; }
.spec-preview dl { display: grid; gap: 12px; margin: 0; }
.spec-preview dt { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.spec-preview dd { background: #fff; border: 1px solid var(--line); border-radius: 10px; font-weight: 750; line-height: 1.45; margin: -6px 0 0; padding: 10px 12px; }
html.dark-mode .spec-preview dd { background: rgba(8, 17, 31, .72); }

.settings-workspace { gap: 18px; }
.settings-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}
.control-panel { overflow: hidden; }
.wide-panel { grid-row: span 2; }
.system-panel {
    background:
        radial-gradient(circle at 92% 12%, rgba(14, 131, 148, .16), transparent 28%),
        rgba(255,255,255,.88);
}
html.dark-mode .system-panel {
    background:
        radial-gradient(circle at 92% 12%, rgba(33, 167, 224, .15), transparent 28%),
        rgba(16, 28, 49, .88);
}
.panel-heading {
    border-bottom: 1px solid rgba(216, 225, 236, .72);
    margin: -2px -2px 18px;
    padding-bottom: 14px;
}
.panel-heading span {
    color: #0e8394;
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.panel-heading h2 { margin-bottom: 0; }
.mini-table {
    max-height: 260px;
    overflow: auto;
    margin-top: 14px;
}
.compact-metrics { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.dashboard-metrics { grid-template-columns: repeat(6, minmax(130px, 1fr)); }
.dashboard-workspace {
    background: #fff;
}
.unified-dashboard {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
}
.unified-card {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
    min-height: 286px;
    padding: 22px;
}
.unified-card h2 {
    color: #172033;
    font-size: 19px;
    line-height: 1.2;
    margin: 0 0 6px;
}
.unified-card > p {
    color: #7d8794;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 20px;
}
.unified-empty {
    align-items: center;
    border: 1px dashed #d8e0ea;
    border-radius: 10px;
    display: grid;
    justify-items: center;
    min-height: 222px;
    padding: 24px;
    text-align: center;
}
.unified-empty-icon {
    align-items: center;
    background: #f4f6f8;
    border-radius: 16px;
    color: #98a3b3;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-bottom: 8px;
    width: 42px;
}
.unified-empty-icon svg,
.unified-tile svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.unified-empty-icon svg {
    height: 22px;
    width: 22px;
}
.unified-empty strong,
.unified-order-summary strong {
    color: #101828;
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
}
.unified-empty small {
    color: #7d8794;
    display: block;
    font-size: 14px;
    line-height: 1.45;
    max-width: 260px;
}
.unified-empty a,
.unified-order-summary a {
    align-self: start;
    border: 1px solid #d8e0ea;
    border-radius: 7px;
    color: #172033;
    display: inline-flex;
    font-size: 13px;
    justify-self: start;
    margin-top: 16px;
    padding: 8px 14px;
    text-decoration: none;
}
.unified-order-summary {
    align-content: center;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    display: grid;
    min-height: 222px;
    padding: 24px;
}
.unified-order-summary strong {
    font-size: 40px;
    line-height: 1;
}
.unified-order-summary span {
    color: #7d8794;
    font-size: 14px;
}
.unified-tile-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.unified-tile {
    border-radius: 12px;
    min-height: 118px;
    padding: 14px 14px 12px;
}
.unified-tile svg {
    height: 20px;
    margin-bottom: 8px;
    width: 20px;
}
.unified-tile strong {
    color: #101828;
    display: block;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 8px;
}
.unified-tile span {
    color: #172033;
    display: block;
    font-size: 13px;
    font-weight: 750;
    margin-bottom: 3px;
}
.unified-tile small {
    color: #8792a2;
    display: block;
    font-size: 11px;
    line-height: 1.25;
}
.unified-tile.green { background: #e2f3e2; color: #16a34a; }
.unified-tile.blue { background: #dfe8fa; color: #145de1; }
.unified-tile.yellow { background: #fbf3df; color: #f59e0b; }
.unified-tile.red { background: #f7e2e4; color: #dc2626; }
.unified-tile.neutral { background: #f1f3f6; color: #8a95a6; }
html.dark-mode .dashboard-workspace {
    background: #0b3d91;
}
html.dark-mode .unified-card {
    background: rgba(16, 28, 49, .96);
    border-color: rgba(101, 127, 163, .22);
    box-shadow: none;
}
html.dark-mode .unified-card h2,
html.dark-mode .unified-empty strong,
html.dark-mode .unified-order-summary strong {
    color: #edf5ff;
}
html.dark-mode .unified-card > p,
html.dark-mode .unified-empty small,
html.dark-mode .unified-order-summary span {
    color: #dbe8ff;
}
html.dark-mode .unified-tile strong,
html.dark-mode .unified-tile span {
    color: #101828;
}
html.dark-mode .unified-tile small {
    color: #667085;
}
html.dark-mode .unified-empty,
html.dark-mode .unified-order-summary {
    border-color: rgba(101, 127, 163, .24);
}
html.dark-mode .unified-empty a,
html.dark-mode .unified-order-summary a {
    border-color: rgba(219, 232, 255, .48);
    color: #edf5ff;
}
html.dark-mode .unified-empty-icon {
    background: rgba(255, 255, 255, .08);
}
.product-type-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.product-type-metrics article { padding: 14px; }
.staff-workspace,
.staff-form-workspace {
    align-content: start;
    background: #fff;
    color: #172033;
    gap: 28px;
    min-height: 100vh;
}
.staff-page-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.staff-title-row {
    align-items: center;
    display: flex;
    gap: 14px;
}
.staff-title-row h1 {
    font-size: 28px;
    line-height: 1.15;
    margin: 0;
}
.staff-back-button {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    color: #233550;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    width: 34px;
}
.staff-back-button svg {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 20px;
}
.staff-add-button,
.button.primary.staff-add-button {
    align-items: center;
    background: #1857d6;
    border: 0;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 850;
    justify-content: center;
    min-height: 36px;
    padding: 9px 18px;
    text-decoration: none;
}
.staff-permissions-layout {
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(260px, 340px) minmax(460px, 760px);
    justify-content: center;
}
.staff-copy {
    padding-top: 24px;
}
.staff-copy h2 {
    font-size: 20px;
    margin: 0 0 14px;
}
.staff-copy p {
    color: #8a95a6;
    margin: 0;
}
.staff-list-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    overflow: hidden;
}
.staff-list-row {
    align-items: center;
    color: #172033;
    display: grid;
    gap: 14px;
    grid-template-columns: 34px minmax(180px, 1fr) 110px 96px;
    min-height: 70px;
    padding: 12px 20px;
    text-decoration: none;
}
.staff-list-row + .staff-list-row {
    border-top: 1px solid #eef1f5;
}
.staff-list-row:hover {
    background: #f8fafc;
}
.staff-avatar {
    align-items: center;
    background: #e9eef5;
    border-radius: 50%;
    color: #526071;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}
.staff-list-row:first-child .staff-avatar {
    background: #005b31;
    color: #fff;
}
.staff-person {
    display: grid;
    gap: 4px;
}
.staff-person strong {
    color: #1d5fd0;
    font-size: 15px;
    font-weight: 750;
}
.staff-person small {
    color: #8a95a6;
    font-size: 14px;
}
.staff-role-label {
    color: #26334a;
    font-size: 14px;
}
.staff-status-pill {
    background: #eaf1ff;
    border-radius: 999px;
    color: #0d55ff;
    display: inline-flex;
    font-size: 14px;
    justify-content: center;
    padding: 6px 14px;
}
.staff-status-pill.is-inactive {
    background: #f3f4f6;
    color: #6b7280;
}
.staff-editor {
    display: grid;
    gap: 20px;
}
.staff-form-card,
.permissions-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px;
}
.staff-form-card {
    display: grid;
    gap: 20px 28px;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    padding: 22px;
}
.staff-form-card label,
.permissions-card label {
    color: #101828;
    font-size: 14px;
    font-weight: 500;
}
.staff-form-card input,
.staff-form-card select {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 7px;
    color: #172033;
    height: 34px;
    margin-top: 8px;
}
.staff-form-card input::placeholder {
    color: #b3bdca;
}
.staff-form-card .wide-field {
    grid-column: span 3;
}
.permissions-card {
    padding: 24px 22px 28px;
}
.permissions-card h2 {
    font-size: 16px;
    margin: 0 0 28px;
}
.permissions-grid {
    display: grid;
    gap: 52px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    margin-top: 28px;
}
.permission-column {
    display: grid;
    gap: 24px;
    align-content: start;
}
.permission-group {
    display: grid;
    gap: 14px;
    align-content: start;
}
.permission-option {
    align-items: center;
    display: flex;
    gap: 10px;
}
.permission-option input {
    accent-color: #1857d6;
    height: 17px;
    margin: 0;
    width: 17px;
}
.permission-option span {
    color: #101828;
    font-size: 15px;
    line-height: 1.25;
}
.permission-parent span {
    font-weight: 700;
}
.permission-child {
    padding-left: 18px;
}
.full-access {
    margin-bottom: 10px;
}
html.dark-mode .staff-workspace,
html.dark-mode .staff-form-workspace {
    background: #061b42;
    color: #fff;
}
html.dark-mode .staff-copy p,
html.dark-mode .staff-person small {
    color: #b7c4dd;
}
html.dark-mode .staff-back-button,
html.dark-mode .staff-list-card,
html.dark-mode .staff-form-card,
html.dark-mode .permissions-card {
    background: rgba(16, 28, 49, .88);
    border-color: rgba(101, 127, 163, .24);
}
html.dark-mode .staff-list-row,
html.dark-mode .staff-role-label,
html.dark-mode .staff-form-card label,
html.dark-mode .permissions-card label,
html.dark-mode .permission-option span {
    color: #f7fbff;
}
html.dark-mode .staff-list-row + .staff-list-row {
    border-top-color: rgba(101, 127, 163, .2);
}
html.dark-mode .staff-list-row:hover {
    background: rgba(33, 167, 224, .08);
}
html.dark-mode .staff-form-card input,
html.dark-mode .staff-form-card select {
    background: rgba(8, 17, 31, .72);
    border-color: rgba(101, 127, 163, .32);
    color: #fff;
}
.inbox-workspace {
    background: #fff;
    color: #172033;
    gap: 18px;
    padding-top: 96px;
}
.inbox-hero {
    align-items: start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding-right: 260px;
}
.inbox-hero span {
    color: #0f766e;
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.inbox-hero h1 {
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 10px;
}
.inbox-hero p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    max-width: 680px;
}
.inbox-manage-button {
    flex: 0 0 auto;
    margin-top: 2px;
    min-width: 154px;
}
.inbox-feature-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.inbox-feature-grid article,
.inbox-sidebar-card,
.inbox-board {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
}
.inbox-feature-grid article {
    align-items: center;
    display: flex;
    gap: 14px;
    min-height: 88px;
    padding: 18px;
}
.inbox-feature-grid svg,
.inbox-empty-state svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.inbox-feature-grid svg {
    color: #1857d6;
    flex: 0 0 auto;
    height: 26px;
    width: 26px;
}
.inbox-feature-grid strong {
    font-size: 15px;
    line-height: 1.35;
}
.inbox-plan-card {
    align-items: start;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    padding: 22px;
}
.inbox-plan-copy span {
    color: #0f766e;
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.inbox-plan-copy h2 {
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 10px;
}
.inbox-plan-copy p {
    color: #64748b;
    line-height: 1.58;
    margin: 0;
}
.inbox-plan-steps {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.inbox-plan-steps article {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    padding: 16px;
}
.inbox-plan-steps strong {
    align-items: center;
    background: #e8f1ff;
    border-radius: 999px;
    color: #1857d6;
    display: flex;
    font-size: 13px;
    height: 28px;
    justify-content: center;
    margin-bottom: 12px;
    width: 28px;
}
.inbox-plan-steps h3 {
    font-size: 14px;
    margin: 0 0 7px;
}
.inbox-plan-steps p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
.inbox-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: 320px minmax(0, 1fr);
}
.inbox-sidebar-card,
.inbox-board {
    padding: 20px;
}
.inbox-sidebar-card h2,
.inbox-board h2 {
    font-size: 19px;
    margin: 0 0 14px;
}
.inbox-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 22px;
}
.inbox-stats article {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    padding: 12px;
}
.inbox-stats strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 8px;
}
.inbox-stats span,
.inbox-channel-list span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}
.inbox-channel-list {
    border-top: 1px solid #eef1f5;
    padding-top: 18px;
}
.inbox-channel-list p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}
.inbox-channel-list a,
.inbox-empty-state a {
    color: #1857d6;
    font-weight: 850;
    text-decoration: none;
}
.inbox-toolbar {
    align-items: start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}
.inbox-toolbar p {
    color: #64748b;
    margin: 0;
}
.inbox-toolbar input {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    min-width: 260px;
}
.inbox-conversation-list {
    display: grid;
}
.inbox-conversation {
    align-items: center;
    border-top: 1px solid #eef1f5;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 16px 0;
}
.inbox-conversation span {
    color: #1857d6;
    font-size: 12px;
    font-weight: 900;
}
.inbox-conversation h3 {
    font-size: 16px;
    margin: 5px 0;
}
.inbox-conversation p,
.inbox-conversation small {
    color: #64748b;
    margin: 0;
}
.inbox-conversation aside {
    text-align: right;
}
.inbox-empty-state {
    align-items: center;
    border: 1px dashed #d8e0ea;
    border-radius: 10px;
    display: grid;
    justify-items: center;
    min-height: 360px;
    padding: 36px;
    text-align: center;
}
.inbox-empty-state span {
    align-items: center;
    background: #f4f6f8;
    border-radius: 18px;
    color: #98a3b3;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    margin-bottom: 14px;
    width: 58px;
}
.inbox-empty-state svg {
    height: 30px;
    width: 30px;
}
.inbox-empty-state h3 {
    font-size: 19px;
    margin: 0 0 8px;
}
.inbox-empty-state p {
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 440px;
}
html.dark-mode .inbox-workspace {
    background: #0b3d91;
    color: #edf5ff;
}
html.dark-mode .inbox-hero p,
html.dark-mode .inbox-toolbar p,
html.dark-mode .inbox-channel-list p,
html.dark-mode .inbox-conversation p,
html.dark-mode .inbox-conversation small,
html.dark-mode .inbox-empty-state p {
    color: #dbe8ff;
}
html.dark-mode .inbox-feature-grid article,
html.dark-mode .inbox-sidebar-card,
html.dark-mode .inbox-board,
html.dark-mode .inbox-plan-card {
    background: rgba(16, 28, 49, .96);
    border-color: rgba(101, 127, 163, .22);
}
html.dark-mode .inbox-stats article,
html.dark-mode .inbox-empty-state,
html.dark-mode .inbox-plan-steps article {
    background: rgba(8, 17, 31, .3);
    border-color: rgba(101, 127, 163, .24);
}
html.dark-mode .inbox-plan-copy p,
html.dark-mode .inbox-plan-steps p {
    color: #dbe8ff;
}
html.dark-mode .inbox-plan-steps strong {
    background: rgba(33, 167, 224, .16);
    color: #21a7e0;
}
html.dark-mode .inbox-toolbar input {
    background: rgba(8, 17, 31, .72);
    border-color: rgba(101, 127, 163, .32);
    color: #fff;
}
.product-form {
    display: grid;
    gap: 18px;
}
.form-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
}
.form-section-head {
    align-items: start;
    border-bottom: 1px solid #eef0f3;
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
}
.form-section-head > span {
    align-items: center;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    color: #374151;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}
.form-section-head h2 {
    font-size: 17px;
    line-height: 1.2;
    margin: 0 0 4px;
}
.form-section-head p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}
html.dark-mode .form-section {
    border-color: rgba(101, 127, 163, .22);
}
html.dark-mode .form-section-head {
    border-bottom-color: rgba(101, 127, 163, .2);
}
html.dark-mode .form-section-head > span {
    background: rgba(33, 167, 224, .12);
    border-color: rgba(33, 167, 224, .24);
    color: #bcecff;
}
.product-detail-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.status-card {
    background: rgba(24, 87, 194, .08);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    padding: 16px;
}
.status-card strong { font-size: 20px; }
.status-card small { color: var(--muted); }
.device-gallery {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}
.device-gallery img {
    aspect-ratio: 4 / 3;
    background: rgba(8, 17, 31, .22);
    border: 1px solid var(--line);
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
}
.alert-panel {
    border-color: rgba(184, 93, 0, .34);
}
.alert-list {
    display: grid;
    gap: 10px;
}
.alert-list a {
    align-items: center;
    background: #fff7ed;
    border: 1px solid rgba(184, 93, 0, .2);
    border-radius: 10px;
    color: #7c2d12;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
    text-decoration: none;
}
.alert-list span {
    color: #b85d00;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}
html.dark-mode .alert-list a {
    background: rgba(255, 194, 102, .12);
    border-color: rgba(255, 194, 102, .24);
    color: #ffdfaa;
}
html.dark-mode .alert-list span {
    color: #ffc266;
}
.customer-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
}
.customer-profile-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 360px;
}
.customer-main-card {
    align-items: center;
    display: grid;
    gap: 22px;
    grid-template-columns: 112px minmax(180px, 1fr) minmax(160px, .7fr);
}
.customer-avatar {
    align-items: center;
    aspect-ratio: 1;
    background: #075430;
    border-radius: 24px;
    color: #fff;
    display: flex;
    font-size: 44px;
    font-weight: 500;
    justify-content: center;
    letter-spacing: 0;
}
.customer-stat span {
    color: var(--muted);
    display: block;
    font-size: 13px;
    font-weight: 850;
    margin-bottom: 8px;
}
.customer-stat strong {
    display: block;
    font-size: 28px;
    line-height: 1;
}
.customer-stat small { color: var(--muted); }
.customer-details {
    display: grid;
    gap: 10px;
    grid-column: 2 / -1;
    grid-template-columns: 150px minmax(0, 1fr);
    margin: 0;
}
.customer-details dt {
    color: var(--muted);
    font-weight: 850;
}
.customer-details dd {
    font-weight: 750;
    margin: 0;
}
.customer-side {
    display: grid;
    gap: 18px;
}
.quick-contact {
    display: flex;
    gap: 10px;
}
.quick-contact a {
    background: var(--primary);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    padding: 10px 14px;
    text-decoration: none;
}
.customer-purchases,
.customer-edit {
    grid-column: 1 / -1;
}
.orders-workspace {
    background: #fff;
    gap: 14px;
    padding: 14px 20px 20px;
}
html.dark-mode .orders-workspace {
    background: #0b3d91;
}
.orders-page-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 42px;
}
.orders-page-head h1 {
    color: #1f2d3d;
    font-size: 26px;
    line-height: 1;
    margin: 0;
}
html.dark-mode .orders-page-head h1 {
    color: #edf5ff;
}
.orders-head-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}
.orders-more {
    background: #fff;
    border: 1px solid #d8e1ec;
    border-radius: 7px;
    color: #647287;
    font-weight: 900;
    min-height: 30px;
    padding: 0 9px;
}
.orders-add {
    border-radius: 7px;
    font-size: 13px;
    min-height: 32px;
    padding: 0 14px;
}
.orders-board {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}
html.dark-mode .orders-board {
    background: rgba(16, 28, 49, .96);
    border-color: rgba(101, 127, 163, .22);
}
.orders-toolbar {
    align-items: center;
    border-bottom: 1px solid #eef2f6;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 14px;
}
html.dark-mode .orders-toolbar {
    border-bottom-color: rgba(101, 127, 163, .2);
}
.orders-search {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 12px;
    margin: 0;
}
.orders-search svg,
.orders-filter svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}
.orders-search svg {
    color: #b8c3d2;
}
.orders-search input {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #243244;
    margin: 0;
    min-height: 42px;
    padding: 0;
}
.orders-search input::placeholder {
    color: #b8c3d2;
}
.orders-search input:focus {
    outline: none;
}
.orders-toolbar-meta {
    align-items: center;
    color: #1f2d3d;
    display: flex;
    font-size: 13px;
    font-weight: 850;
    gap: 12px;
}
.orders-filter {
    background: transparent;
    border: 0;
    color: #4b5f78;
    min-height: 28px;
    padding: 0;
}
.orders-table-wrap {
    overflow-x: hidden;
}
.orders-table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}
.orders-table th,
.orders-table td {
    border-bottom: 1px solid #edf1f5;
    color: #26364a;
    font-size: 13px;
    height: 44px;
    overflow-wrap: anywhere;
    padding: 8px 12px;
    vertical-align: middle;
}
.orders-table th {
    background: #fff;
    color: #a2adbc;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}
.orders-table th:first-child,
.orders-table td:first-child {
    text-align: center;
    width: 34px;
}
.orders-table th:nth-child(2),
.orders-table td:nth-child(2) {
    text-align: center;
    width: 46px;
}
.orders-table th:nth-child(3) { width: 230px; }
.orders-table th:nth-child(4) { width: 170px; }
.orders-table th:nth-child(5) { width: 190px; }
.orders-table th:nth-child(6) { width: 160px; }
.orders-table th:nth-child(7) { width: 170px; }
.orders-table th:nth-child(8),
.orders-table td:nth-child(8) {
    text-align: right;
    width: 145px;
}
.orders-table input[type="checkbox"] {
    appearance: none;
    background: #fff;
    border: 1px solid #d8e1ec;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(31, 45, 61, .06);
    height: 15px;
    margin: 0;
    min-height: 15px;
    padding: 0;
    width: 15px;
}
.order-source-icon {
    align-items: center;
    background: #aab4c2;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 950;
    height: 24px;
    justify-content: center;
    width: 24px;
}
.order-source-icon.easystore {
    background: #ff6633;
}
.order-source-icon.manual {
    background: #9aa6b5;
}
.order-number,
.order-customer {
    color: #2563c9;
    font-weight: 750;
    text-decoration: none;
}
.order-number.danger {
    color: #ef4444;
}
.orders-table small {
    color: #9aa6b5;
    display: block;
    font-size: 11px;
    margin-top: 2px;
}
.order-pill {
    background: #f0f2f5;
    border-radius: 999px;
    color: #8a95a5;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    min-width: 58px;
    justify-content: center;
    padding: 4px 12px;
}
.payment-unpaid {
    background: #fff1a8;
    color: #7c6500;
}
.payment-refunded {
    background: #eef1f5;
    color: #7b8797;
}
.fulfill-restocked {
    background: #eef1f5;
    color: #8a95a5;
}
.danger-text {
    color: #ef4444 !important;
}
.strike-total {
    color: #ef4444 !important;
    text-decoration: line-through;
}
html.dark-mode .orders-table th,
html.dark-mode .orders-table td {
    border-bottom-color: rgba(101, 127, 163, .18);
    color: #dbe8ff;
}
html.dark-mode .orders-table th {
    background: rgba(8, 17, 31, .5);
    color: #8fa2bf;
}
html.dark-mode .orders-search input {
    color: #edf5ff;
}
html.dark-mode .orders-toolbar-meta,
html.dark-mode .orders-filter {
    color: #dbe8ff;
}
.analysis-workspace {
    background: #fff;
    color: #1f2d3d;
    gap: 18px;
    padding: 34px 32px 32px;
}
html.dark-mode .analysis-workspace {
    background: #0b3d91;
    color: #edf5ff;
}
.analysis-head {
    align-items: end;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
}
.analysis-head h1 {
    font-size: 28px;
    line-height: 1;
    margin: 0 0 28px;
}
.analysis-export {
    align-items: center;
    color: #334155;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    text-decoration: none;
}
.analysis-export svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}
.analysis-filters {
    align-items: end;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(180px, 240px) minmax(180px, 240px) minmax(260px, 330px) 80px;
}
.analysis-filters label {
    color: #43536a;
    font-size: 13px;
    font-weight: 800;
    margin: 0;
}
html.dark-mode .analysis-filters label,
html.dark-mode .analysis-export {
    color: #dbe8ff;
}
.analysis-filters select,
.analysis-filters input {
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(31, 45, 61, .04);
    color: #334155;
    margin-top: 7px;
    min-height: 34px;
}
.analysis-date-range {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 7px;
    display: grid;
    grid-template-columns: 1fr 18px 1fr;
    margin-top: 7px;
    min-height: 34px;
    padding: 0 9px;
}
.analysis-date-range input {
    border: 0;
    box-shadow: none;
    margin: 0;
    min-height: 32px;
    padding: 0;
}
.analysis-date-range i {
    background: #647287;
    display: block;
    height: 1px;
    width: 10px;
}
.analysis-filters button {
    border-radius: 7px;
    min-height: 34px;
    padding: 0 12px;
}
.inventory-report-callout {
    align-items: stretch;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(280px, 1.35fr) minmax(260px, .9fr);
    margin-left: min(360px, 24vw);
    padding: 24px;
}
.inventory-report-callout > div:first-child {
    max-width: 760px;
}
.inventory-report-callout span {
    color: #0f766e;
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.inventory-report-callout h2 {
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 10px;
}
.inventory-report-callout p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 16px;
}
.inventory-report-callout a {
    color: #1857d6;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}
.inventory-report-callout a:hover {
    text-decoration: underline;
}
.inventory-value-grid {
    display: grid;
    gap: 10px;
}
.inventory-value-grid article {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
}
.inventory-value-grid strong {
    color: #172033;
    display: block;
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 8px;
}
.inventory-value-grid span {
    color: #64748b;
    font-size: 12px;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}
html.dark-mode .inventory-report-callout {
    background: rgba(16, 28, 49, .96);
    border-color: rgba(101, 127, 163, .22);
}
html.dark-mode .inventory-report-callout p,
html.dark-mode .inventory-value-grid span {
    color: #dbe8ff;
}
html.dark-mode .inventory-value-grid article {
    background: rgba(8, 17, 31, .5);
    border-color: rgba(101, 127, 163, .22);
}
html.dark-mode .inventory-value-grid strong {
    color: #edf5ff;
}
.analysis-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: min(360px, 24vw);
}
.analysis-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: none;
    min-height: 280px;
    padding: 22px 18px 16px;
}
html.dark-mode .analysis-card {
    background: rgba(16, 28, 49, .96);
    border-color: rgba(101, 127, 163, .22);
}
.analysis-card header {
    align-items: start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.analysis-card header span {
    color: #97a4b5;
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 8px;
}
.analysis-card header strong {
    color: #1f2d3d;
    display: block;
    font-size: 18px;
    line-height: 1.15;
}
html.dark-mode .analysis-card header strong {
    color: #edf5ff;
}
.analysis-card header small {
    color: #ef4444;
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    margin-top: 6px;
}
.analysis-card header a {
    color: #8b5cf6;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.analysis-chart {
    display: block;
    height: 210px;
    width: 100%;
}
.analysis-grid-line {
    stroke: #e8edf4;
    stroke-width: 1;
}
.analysis-axis-label {
    fill: #6b7280;
    font-size: 12px;
}
.analysis-area {
    fill: rgba(37, 99, 235, .1);
}
.analysis-line {
    fill: none;
    stroke: #2563eb;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}
html.dark-mode .analysis-grid-line {
    stroke: rgba(219, 232, 255, .12);
}
html.dark-mode .analysis-axis-label {
    fill: #b9c8df;
}
.analysis-detail-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: min(360px, 24vw);
}
.analysis-table-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: none;
    padding: 18px;
}
.analysis-table-card.wide {
    grid-column: 1 / -1;
}
html.dark-mode .analysis-table-card {
    background: rgba(16, 28, 49, .96);
    border-color: rgba(101, 127, 163, .22);
}
.analysis-table-card header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.analysis-table-card h2 {
    color: #1f2d3d;
    font-size: 15px;
    margin: 0;
}
.analysis-table-card header strong {
    color: #1f2d3d;
    font-size: 22px;
}
.analysis-table-card header a {
    color: #8b5cf6;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.analysis-table-card table {
    min-width: 0;
}
.analysis-table-card th,
.analysis-table-card td {
    border-bottom: 1px solid #edf1f5;
    color: #334155;
    font-size: 13px;
    padding: 11px 8px;
}
.analysis-table-card th {
    color: #98a5b5;
    font-size: 12px;
    text-transform: none;
}
.analysis-table-card td:last-child,
.analysis-table-card th:last-child {
    text-align: right;
}
html.dark-mode .analysis-table-card h2,
html.dark-mode .analysis-table-card header strong {
    color: #edf5ff;
}
html.dark-mode .analysis-table-card th,
html.dark-mode .analysis-table-card td {
    border-bottom-color: rgba(101, 127, 163, .18);
    color: #dbe8ff;
}
.timeline { display: grid; gap: 12px; }
.timeline article {
    border-left: 3px solid var(--primary);
    padding-left: 12px;
}
.timeline strong { display: block; font-size: 14px; }
.timeline span { color: var(--muted); display: block; font-size: 12px; margin: 3px 0; }
.timeline p { margin: 0; }
.compact-timeline { max-height: 380px; overflow: auto; }
.report-sheet { background: #fff; color: #162033; }
html.dark-mode .report-sheet { background: rgba(255,255,255,.94); color: #162033; }
.report-head {
    align-items: center;
    border-bottom: 1px solid #d8e1ec;
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
    padding-bottom: 14px;
}
.report-head img { max-width: 130px; }
.report-head h2 { margin: 0 0 4px; }
.report-head p { color: #647287; margin: 0; }
.report-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    margin-bottom: 16px;
}
.report-summary article {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
}
.report-summary strong { display: block; font-size: 22px; }
.report-summary span { color: #647287; font-size: 12px; font-weight: 850; }
.stock-report-wrap {
    border: 1px solid #2d9fcc;
    border-radius: 0;
    max-height: 68vh;
}
.stock-report-table {
    border-collapse: collapse;
    min-width: 1420px;
    table-layout: fixed;
}
.stock-report-table th,
.stock-report-table td {
    border: 1px solid #2d9fcc;
    color: #000;
    font-size: 12px;
    height: 22px;
    line-height: 1.15;
    padding: 2px 6px;
    text-align: center;
    vertical-align: middle;
}
.stock-report-table th {
    border-color: #2f6e83;
    font-weight: 900;
    height: 20px;
    position: sticky;
    text-transform: none;
    top: 0;
    z-index: 2;
}
.stock-report-table td:nth-child(2),
.stock-report-table td:nth-child(3),
.stock-report-table td:nth-child(4),
.stock-report-table td:nth-child(6),
.stock-report-table td:nth-child(7) {
    text-align: left;
}
.stock-report-table tbody td { background: #fff; }
.stock-report-table th:nth-child(1) { width: 44px; }
.stock-report-table th:nth-child(2) { width: 90px; }
.stock-report-table th:nth-child(3) { width: 180px; }
.stock-report-table th:nth-child(4) { width: 220px; }
.stock-report-table th:nth-child(5) { width: 80px; }
.stock-report-table th:nth-child(6) { width: 82px; }
.stock-report-table th:nth-child(7) { width: 100px; }
.stock-report-table th:nth-child(8) { width: 120px; }
.stock-report-table th:nth-child(9) { width: 88px; }
.stock-report-table th:nth-child(10) { width: 120px; }
.stock-report-table th:nth-child(11) { width: 130px; }
.stock-report-table th:nth-child(12) { width: 120px; }
.stock-report-table th:nth-child(13) { width: 160px; }
.stock-report-table th:nth-child(14) { width: 130px; }
.stock-head-0,
.stock-head-7,
.stock-head-10,
.stock-head-12,
.stock-head-13 { background: #d9e2f3; }
.stock-head-1,
.stock-head-2,
.stock-head-3,
.stock-head-4,
.stock-head-11 { background: #f8cbad; }
.stock-head-5,
.stock-head-6,
.stock-head-8 { background: #156082; color: #fff !important; }
.stock-head-9 { background: #f4c2d7; }
.filter-caret {
    background: #eef3f8;
    border: 1px solid #8fa7b5;
    display: inline-block;
    height: 15px;
    margin-left: 6px;
    position: relative;
    top: 3px;
    width: 15px;
}
.filter-caret::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #3b4a56;
    content: "";
    left: 3px;
    position: absolute;
    top: 5px;
}
.stock-invoice-link {
    color: #0b57d0;
    font-weight: 850;
    text-decoration: none;
}
.stock-invoice-link:hover { text-decoration: underline; }
small { color: var(--muted); }

.receipt-workspace {
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.85), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
    min-height: 100vh;
    padding: 28px;
}
.receipt-actions {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 auto 24px;
    max-width: 980px;
}
.receipt-actions h1 {
    color: #162033;
    font-size: 26px;
    line-height: 1.1;
    margin: 0 0 6px;
}
.receipt-actions p {
    color: #647287;
    margin: 0;
}
.receipt-share-status {
    color: #647287;
    font-size: 13px;
    font-weight: 750;
    margin: 10px 0 0;
    text-align: right;
}
.receipt-stage {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 118px);
}
.receipt-ticket {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(22, 32, 51, .12);
    color: #111827;
    max-width: 520px;
    overflow: hidden;
    padding: 42px 44px 34px;
    position: relative;
    width: min(100%, 520px);
}
.receipt-ticket::after {
    background:
        radial-gradient(circle at 24px 24px, transparent 0 23px, #fff 24px) 0 0 / 56px 56px repeat-x;
    bottom: -28px;
    content: "";
    height: 56px;
    left: 24px;
    position: absolute;
    right: 24px;
}
.receipt-cutout {
    background: #eef3f8;
    border-radius: 999px;
    height: 44px;
    position: absolute;
    top: 300px;
    width: 44px;
    z-index: 2;
}
.receipt-cutout.left { left: -22px; }
.receipt-cutout.right { right: -22px; }
.receipt-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}
.receipt-brand img {
    display: block;
    max-width: 156px;
    width: 42%;
}
.receipt-success {
    font-size: 30px;
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
}
.receipt-subtitle {
    color: #697386;
    font-size: 16px;
    line-height: 1.45;
    margin: 12px auto 30px;
    max-width: 270px;
    text-align: center;
}
.receipt-dash {
    border-top: 2px dashed #d7dde8;
    margin: 0 0 30px;
}
.receipt-dash.lower { margin: 30px -44px 28px; }
.receipt-info-grid {
    display: grid;
    gap: 26px 30px;
    grid-template-columns: 1fr 1fr;
}
.receipt-info-grid span,
.receipt-product span {
    color: #7a8495;
    display: block;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .02em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.receipt-info-grid strong {
    display: block;
    font-size: 20px;
    line-height: 1.2;
}
.receipt-customer-card {
    align-items: center;
    background: #f7f9fc;
    border: 1px solid #edf1f7;
    border-radius: 18px;
    display: flex;
    gap: 14px;
    margin: 34px 0 28px;
    padding: 18px 20px;
}
.receipt-card-mark {
    align-items: center;
    background: #020b4d;
    border-radius: 16px;
    color: #14b3df;
    display: flex;
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 950;
    height: 46px;
    justify-content: center;
    width: 46px;
}
.receipt-customer-card strong,
.receipt-customer-card span {
    display: block;
}
.receipt-customer-card strong {
    font-size: 18px;
    margin-bottom: 4px;
}
.receipt-customer-card span {
    color: #4b5563;
    font-size: 15px;
}
.receipt-product {
    background: #fbfcfe;
    border: 1px solid #edf1f7;
    border-radius: 16px;
    padding: 18px 20px;
}
.receipt-product strong {
    display: block;
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 8px;
}
.receipt-product small {
    color: #697386;
    display: block;
    font-size: 13px;
    line-height: 1.45;
}
.receipt-barcode {
    background:
        repeating-linear-gradient(90deg,
            #111827 0 2px,
            transparent 2px 5px,
            #111827 5px 6px,
            transparent 6px 10px,
            #111827 10px 14px,
            transparent 14px 17px);
    height: 92px;
    margin: 0 auto 10px;
    max-width: 330px;
    width: 78%;
}
.receipt-barcode-number {
    color: #111827;
    font-family: "Courier New", monospace;
    font-size: 13px;
    letter-spacing: .12em;
    text-align: center;
}
.receipt-error {
    margin: 12vh auto 0;
    max-width: 520px;
}

@media (max-width: 1180px) {
    .app, .two-column, .customer-profile-grid { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .app-top-actions {
        left: 18px;
        right: 18px;
        top: 14px;
    }
    .global-search {
        flex: 1 1 auto;
        width: auto;
    }
    .metrics, .form-grid, .settings-grid, .inventory-filters, .report-filters { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .inbox-feature-grid,
    .inbox-layout { grid-template-columns: 1fr; }
    .inventory-report-callout,
    .analysis-grid {
        margin-left: 0;
    }
    .inventory-report-callout {
        grid-template-columns: 1fr;
    }
    .staff-permissions-layout { grid-template-columns: 1fr; }
    .staff-form-card { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .staff-form-card .wide-field { grid-column: span 2; }
    .wide-panel { grid-column: 1 / -1; grid-row: auto; }
    .notification-grid,
    .mobile-check-grid,
    .search-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .login-command-card { grid-template-columns: 1fr; }
    .login-brand-panel { border-right: 0; min-height: 560px; padding: 56px 42px 170px; }
    .login-brand-logo { max-width: 520px; }
    .login-features { left: 38px; right: 38px; }
}
@media (max-width: 900px) {
    .unified-dashboard { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .login-card, .workspace { padding: 24px; }
    .workspace,
    .inbox-workspace {
        gap: 14px;
        padding: 118px 14px 18px;
    }
    .app-top-actions {
        gap: 8px;
        left: 12px;
        right: 12px;
        top: 10px;
    }
    .app-theme-toggle {
        font-size: 12px;
        min-height: 38px;
        padding: 0 10px;
    }
    .notification-button {
        height: 38px;
        width: 38px;
    }
    .global-search {
        border-radius: 9px;
        height: 38px;
        padding: 0 10px;
    }
    .global-search svg {
        height: 16px;
        width: 16px;
    }
    .topbar h1,
    .orders-page-head h1,
    .staff-title-row h1 {
        font-size: 24px;
    }
    .topbar p {
        font-size: 13px;
        margin-bottom: 0;
    }
    .panel,
    .metrics article,
    .unified-card,
    .inbox-feature-grid article,
    .inbox-sidebar-card,
    .inbox-board,
    .inbox-plan-card {
        border-radius: 10px;
    }
    .panel,
    .unified-card,
    .inbox-sidebar-card,
    .inbox-board,
    .inbox-plan-card {
        padding: 14px;
    }
    .metrics {
        gap: 10px;
    }
    .metrics span {
        font-size: 24px;
    }
    .metrics strong {
        font-size: 12px;
    }
    input,
    select,
    textarea,
    button,
    .button {
        min-height: 42px;
    }
    .form-section {
        padding: 14px;
    }
    .form-section-head {
        gap: 10px;
    }
    .form-section-head h2 {
        font-size: 17px;
    }
    .form-section-head p,
    label small {
        font-size: 12px;
    }
    .table-wrap,
    .orders-table-wrap,
    .stock-report-wrap {
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
        max-width: 100%;
        overflow-x: auto;
    }
    table {
        min-width: 760px;
    }
    .orders-table {
        min-width: 0;
    }
    .stock-report-table {
        min-width: 1180px;
    }
    .customer-main-card {
        gap: 16px;
    }
    .customer-avatar {
        height: 72px;
        width: 72px;
    }
    .receipt-actions {
        margin-bottom: 14px;
    }
    .receipt-actions .action-row {
        width: 100%;
    }
    .receipt-actions .button,
    .receipt-actions button {
        flex: 1 1 140px;
    }
    .login-split-card { grid-template-columns: 1fr; }
    .login-visual-panel { min-height: 280px; }
    .login-card { padding: 30px 20px; }
    .techora-login { padding: 16px; }
    .login-command-card { border-radius: 18px; min-height: auto; }
    .login-brand-panel { min-height: auto; padding: 34px 24px 24px; }
    .login-brand-logo { width: 100%; }
    .login-brand-copy { margin-top: 30px; }
    .login-brand-copy h2 { font-size: 42px; }
    .login-brand-copy p { font-size: 16px; }
    .login-wave { display: none; }
    .login-features { grid-template-columns: repeat(2, 1fr); margin-top: 32px; position: static; }
    .login-features article { border-right: 0; min-height: 96px; padding: 0 10px; }
    .command-login-card { padding: 34px 24px; }
    .command-theme-toggle { position: static; margin-left: auto; }
    .command-login-card h1 { font-size: 30px; margin-top: 30px; }
    .command-login-card p { font-size: 16px; margin-bottom: 28px; }
    .input-shell { min-height: 56px; }
    .command-login-card button[type="submit"] { font-size: 19px; min-height: 58px; }
    .topbar, .filters, .action-row { align-items: stretch; display: flex; flex-direction: column; }
    .metrics, .form-grid, .form-grid.compact, .settings-grid, .report-summary, .customer-main-card, .customer-details { grid-template-columns: 1fr; }
    .app-top-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr 42px auto;
    }
    .global-search {
        min-width: 0;
    }
    .global-search input {
        font-size: 12px;
    }
    .inbox-hero,
    .inbox-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .inbox-hero {
        padding-right: 0;
    }
    .inbox-manage-button {
        width: 100%;
    }
    .inbox-toolbar input {
        min-width: 0;
        width: 100%;
    }
    .inbox-stats { grid-template-columns: 1fr; }
    .inbox-plan-card,
    .inbox-plan-steps {
        grid-template-columns: 1fr;
    }
    .unified-tile-grid { grid-template-columns: 1fr; }
    .analysis-grid,
    .analysis-head,
    .analysis-filters,
    .inventory-report-callout,
    .notification-grid,
    .mobile-check-grid,
    .search-results-grid,
    .search-page-form {
        grid-template-columns: 1fr;
    }
    .notification-row {
        grid-template-columns: 12px minmax(0, 1fr);
    }
    .notification-row aside {
        grid-column: 2;
        justify-items: start;
    }
    .staff-page-header { align-items: stretch; flex-direction: column; }
    .staff-title-row h1 { font-size: 24px; }
    .staff-list-row { grid-template-columns: 34px minmax(0, 1fr); }
    .staff-role-label, .staff-status-pill { margin-left: 48px; }
    .staff-form-card, .permissions-grid { grid-template-columns: 1fr; }
    .staff-form-card .wide-field { grid-column: auto; }
    .receipt-workspace { padding: 18px; }
    .receipt-actions { align-items: stretch; display: flex; flex-direction: column; }
    .receipt-stage { min-height: auto; }
    .receipt-ticket { border-radius: 22px; padding: 32px 24px 30px; }
    .receipt-brand img { width: 54%; }
    .receipt-info-grid { grid-template-columns: 1fr; }
    .receipt-info-grid strong { font-size: 18px; }
    .receipt-dash.lower { margin-left: -24px; margin-right: -24px; }
    .receipt-cutout { top: 328px; }
    table { min-width: 950px; }
    .orders-workspace .orders-table {
        min-width: 0;
    }
}

@media print {
    body { background: #fff; }
    .no-print, .sidebar, .app-bg { display: none !important; }
    .app { display: block; min-height: auto; }
    .workspace, .receipt-workspace { background: #fff; padding: 0; }
    .receipt-stage { min-height: auto; }
    .receipt-ticket { box-shadow: none; margin: 0 auto; max-width: 480px; }
    .receipt-cutout { background: #fff; }
    .panel, .report-sheet { border: 0; box-shadow: none; padding: 0; }
    table { min-width: 0; }
    th, td { font-size: 10px; padding: 7px 6px; }
}

/* Motion polish */
:root {
    --motion-fast: 160ms;
    --motion-medium: 280ms;
    --motion-slow: 620ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@keyframes pageRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cardRise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes subtleShine {
    from { transform: translateX(-120%) skewX(-18deg); }
    to { transform: translateX(220%) skewX(-18deg); }
}

@keyframes chartDraw {
    from { stroke-dashoffset: 980; }
    to { stroke-dashoffset: 0; }
}

@keyframes activePulse {
    0%, 100% { box-shadow: inset 3px 0 0 rgba(33, 167, 224, .95), 0 0 0 rgba(33, 167, 224, 0); }
    50% { box-shadow: inset 3px 0 0 rgba(33, 167, 224, .95), 0 0 22px rgba(33, 167, 224, .16); }
}

.workspace,
.orders-workspace,
.analysis-workspace,
.staff-workspace,
.staff-form-workspace,
.receipt-workspace {
    animation: pageRise var(--motion-slow) var(--ease-out) both;
}

.topbar,
.orders-page-head,
.analysis-head,
.staff-page-header {
    animation: softFade 520ms ease both;
}

.panel,
.metrics article,
.unified-card,
.analysis-card,
.analysis-table-card,
.inventory-report-callout,
.staff-list-card,
.staff-editor,
.customer-main-card,
.customer-side article,
.orders-board,
.receipt-ticket {
    animation: cardRise 520ms var(--ease-out) both;
    transition:
        border-color var(--motion-medium) ease,
        box-shadow var(--motion-medium) ease,
        transform var(--motion-medium) var(--ease-out),
        background-color var(--motion-medium) ease;
}

.metrics article:nth-child(2),
.unified-card:nth-child(2),
.analysis-card:nth-child(2) { animation-delay: 60ms; }
.metrics article:nth-child(3),
.unified-card:nth-child(3),
.analysis-card:nth-child(3) { animation-delay: 120ms; }
.metrics article:nth-child(4),
.analysis-card:nth-child(4) { animation-delay: 180ms; }
.metrics article:nth-child(5) { animation-delay: 240ms; }
.metrics article:nth-child(6) { animation-delay: 300ms; }

.panel:hover,
.metrics article:hover,
.unified-card:hover,
.analysis-card:hover,
.analysis-table-card:hover,
.inventory-report-callout:hover,
.staff-list-card:hover,
.customer-main-card:hover,
.customer-side article:hover,
.orders-board:hover {
    border-color: rgba(24, 87, 194, .28);
    box-shadow: 0 18px 38px rgba(22, 32, 51, .10);
    transform: translateY(-2px);
}

html.dark-mode .panel:hover,
html.dark-mode .metrics article:hover,
html.dark-mode .unified-card:hover,
html.dark-mode .analysis-card:hover,
html.dark-mode .analysis-table-card:hover,
html.dark-mode .inventory-report-callout:hover,
html.dark-mode .staff-list-card:hover,
html.dark-mode .customer-main-card:hover,
html.dark-mode .customer-side article:hover,
html.dark-mode .orders-board:hover {
    border-color: rgba(33, 167, 224, .32);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}

button,
.button,
.secondary-button,
.table-action,
.orders-add,
.staff-add-button,
.theme-toggle,
.notification-button {
    transition:
        background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        color var(--motion-fast) ease,
        transform var(--motion-fast) var(--ease-out);
}

button:hover,
.button:hover,
.secondary-button:hover,
.orders-add:hover,
.staff-add-button:hover,
.theme-toggle:hover,
.notification-button:hover {
    transform: translateY(-1px);
}

button:active,
.button:active,
.secondary-button:active,
.orders-add:active,
.staff-add-button:active,
.theme-toggle:active,
.notification-button:active {
    transform: translateY(0) scale(.985);
}

.sidebar a {
    position: relative;
    transition:
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease,
        transform var(--motion-fast) var(--ease-out);
}

.sidebar a:hover {
    transform: translateX(3px);
}

.sidebar a.active {
    animation: activePulse 2.8s ease-in-out infinite;
}

tbody tr,
.orders-table tbody tr,
.staff-list-row {
    transition:
        background-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        transform var(--motion-fast) var(--ease-out);
}

tbody tr:hover,
.orders-table tbody tr:hover {
    background: rgba(24, 87, 194, .045);
    transform: translateX(2px);
}

html.dark-mode tbody tr:hover,
html.dark-mode .orders-table tbody tr:hover {
    background: rgba(33, 167, 224, .07);
}

.status-pill,
.badge,
.order-pill,
.staff-status-pill {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) ease;
}

.status-pill:hover,
.badge:hover,
.order-pill:hover,
.staff-status-pill:hover {
    transform: translateY(-1px);
}

.metrics article,
.unified-tile,
.receipt-ticket {
    overflow: hidden;
    position: relative;
}

.metrics article::before,
.unified-tile::before,
.receipt-ticket::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
    content: "";
    height: 140%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -20%;
    transform: translateX(-120%) skewX(-18deg);
    width: 34%;
}

.metrics article:hover::before,
.unified-tile:hover::before,
.receipt-ticket:hover::before {
    animation: subtleShine 850ms ease;
    opacity: 1;
}

.analysis-line {
    stroke-dasharray: 980;
    stroke-dashoffset: 980;
}

.analysis-line.is-visible,
.analysis-card:hover .analysis-line {
    animation: chartDraw 1.2s var(--ease-out) forwards;
}

.analysis-area {
    transition: opacity 520ms ease;
}

.analysis-card:not(:hover) .analysis-area {
    opacity: .82;
}

.notification-button span {
    animation: activePulse 2.4s ease-in-out infinite;
}

.motion-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms ease, transform 520ms var(--ease-out);
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}