:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: #172f26;
    background: #f5f8f6;
    font-synthesis: none;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(ellipse at 10% 0%, #e6f3ed 0, transparent 34rem),
        #f5f8f6;
}

header {
    position: relative;
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    padding: 24px max(24px, calc((100% - 1200px) / 2));
    color: white;
    background: linear-gradient(110deg, #064d39, #087754 72%, #0b8060);
}

header::after {
    position: absolute;
    top: -100px;
    right: max(20px, calc((100% - 1200px) / 2));
    width: 280px;
    height: 280px;
    border: 1px solid #ffffff20;
    border-radius: 50%;
    box-shadow: 0 0 0 28px #ffffff0b, 0 0 0 58px #ffffff08;
    content: "";
    pointer-events: none;
}

header > div,
header > a { z-index: 1; }

header h1 {
    margin: 0;
    font-size: 23px;
    font-weight: 650;
    letter-spacing: -.35px;
}

header p {
    margin: 7px 0 0;
    color: #d3eee3;
    font-size: 13px;
}

header a.swagger-link {
    padding: 9px 13px;
    border: 1px solid #ffffff45;
    border-radius: 8px;
    color: white;
    background: #ffffff10;
    font-size: 13px;
    text-decoration: none;
}

header a:hover { background: #ffffff20; }

main {
    width: min(1200px, calc(100% - 48px));
    margin: 28px auto 48px;
}

.card {
    margin-bottom: 18px;
    padding: 23px;
    border: 1px solid #e4ebe7;
    border-radius: 13px;
    background: white;
    box-shadow: 0 8px 26px #173a2b0a, 0 1px 3px #173a2b08;
}

.toolbar,
.filters,
.actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar { justify-content: space-between; }

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.stat {
    min-width: 0;
    min-height: 85px;
    padding: 15px 18px;
    border: 1px solid #e3ebe6;
    border-radius: 10px;
    background: #fff;
}

.stat strong {
    display: block;
    margin-bottom: 4px;
    color: #046449;
    font-size: 24px;
    font-weight: 650;
}

.stat span { color: #687a72; font-size: 12px; }

h2 {
    margin: 0 0 17px;
    color: #18352b;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.1px;
}

label {
    display: block;
    margin-bottom: 6px;
    color: #53685f;
    font-size: 12px;
}

input,
select {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #d5e0da;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 2px #173a2b08;
    color: inherit;
    font: inherit;
    font-size: 13px;
}

input::placeholder { color: #9aa8a1; }
input:focus,
select:focus { outline: 2px solid #8bcbb0; outline-offset: 1px; }

button {
    min-height: 39px;
    padding: 8px 13px;
    border: 0;
    border-radius: 8px;
    color: white;
    background: #087653;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

button:hover { background: #035d41; }
button:disabled { opacity: .6; cursor: wait; }
button:not(:disabled):hover { box-shadow: 0 3px 8px #04644924; transform: translateY(-1px); }
button:focus-visible,
a:focus-visible { outline: 3px solid #77c8a4; outline-offset: 2px; }
button.secondary { border: 1px solid #d7e5dd; color: #046449; background: #fff; }
button.secondary:hover { background: #f2f8f4; }
button.danger { border: 1px solid #f0cac7; color: #a32119; background: #fff8f7; }
button.danger:hover { background: #ffefed; }

.login {
    display: flex;
    max-width: 720px;
    align-items: end;
    gap: 10px;
    margin-top: 14px;
}

.login .field { min-width: 0; flex: 1; }

.create-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.license-type-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.license-type-picker legend {
    margin-bottom: 7px;
    color: #53685f;
    font-size: 12px;
}

.license-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.license-type-option {
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #d5e0da;
    border-radius: 9px;
    background: white;
    cursor: pointer;
}

.license-type-option:has(input:checked) {
    border-color: #087653;
    background: #f0f8f4;
    box-shadow: 0 0 0 1px #087653 inset;
}

.license-type-option input {
    width: 16px;
    min-height: 16px;
    margin: 0;
    accent-color: #087653;
}

.license-type-option span { display: grid; gap: 3px; }
.license-type-option strong { color: #18352b; font-size: 13px; }
.license-type-option small { color: #61736b; font-size: 11px; }

.notice {
    grid-column: 1 / -1;
    margin: 0;
    color: #61736b;
    font-size: 12px;
    line-height: 1.5;
}

.message {
    display: none;
    margin: 14px 0 0;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.message.error { display: block; border-color: #f4d0cd; color: #8d1d17; background: #fff0ef; }
.message.success { display: block; border-color: #cde7d8; color: #075b40; background: #eaf6f0; }
.filter-row { margin: 10px 0 14px; }
.filters input[type="search"] { width: min(360px, 100%); }
.filters select { min-width: 160px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }

th,
td {
    padding: 13px 11px;
    border-bottom: 1px solid #e9efec;
    text-align: left;
    white-space: nowrap;
}

th {
    color: #61736b;
    background: #f7faf8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}

tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #f7faf8; }
td.id {
    max-width: 190px;
    overflow: hidden;
    color: #61736b;
    font-family: Consolas, monospace;
    font-size: 11px;
    text-overflow: ellipsis;
}

td .actions { gap: 6px; flex-wrap: nowrap; }
td button { min-height: 32px; padding: 6px 9px; font-size: 11px; }

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 99px;
    color: #40564c;
    background: #edf2ef;
    font-size: 11px;
    font-weight: 600;
}

.badge.active { color: #075b40; background: #e5f5ec; }
.badge.pending { color: #80540a; background: #fff5dc; }
.badge.revoked,
.badge.expired { color: #9c2820; background: #fff0ef; }
.empty { padding: 28px; color: #61736b; text-align: center; }
.hidden { display: none !important; }

.code-output {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #b9ddca;
    border-radius: 10px;
    background: #f1faf5;
}

.code-output strong { display: block; margin-bottom: 8px; color: #075b40; }
.code-value { display: flex; align-items: center; gap: 8px; }
.code-value code { flex: 1; overflow-wrap: anywhere; color: #18352b; font-size: 16px; font-weight: 700; letter-spacing: .5px; }

@media (max-width: 900px) {
    main { width: min(100% - 36px, 760px); margin-top: 20px; }
    header { padding-right: 18px; padding-left: 18px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .create-grid { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 600px) {
    body { min-width: 320px; }
    header { min-height: 98px; gap: 10px; padding: 17px 14px; }
    header h1 { font-size: 18px; }
    header p { max-width: 230px; font-size: 12px; }
    header a.swagger-link { padding: 8px 9px; font-size: 11px; }
    main { width: calc(100% - 20px); margin-top: 14px; }
    .card { padding: 16px; }
    .toolbar { align-items: flex-start; }
    .toolbar h2 { margin-top: 8px; }
    .stats { gap: 8px; margin: 12px 0; }
    .stat { min-height: 76px; padding: 12px; }
    .stat strong { font-size: 21px; }
    .stat span { font-size: 11px; }
    .login,
    .create-grid { display: flex; align-items: stretch; flex-direction: column; }
    .login button,
    .create-grid button { width: 100%; }
    .filters { align-items: stretch; }
    .filters input[type="search"],
    .filters select { width: 100%; min-width: 100%; }
    td .actions { flex-wrap: wrap; }
    .code-value { align-items: stretch; flex-direction: column; }
}