:root {
    --bg: #f4f7fa;
    --panel: #fff;
    --panel-soft: #f8fafc;
    --ink: #152536;
    --ink-2: #26394c;
    --muted: #718096;
    --muted-2: #94a3b8;
    --line: #e3e9ef;
    --line-strong: #d6dee6;
    --navy: #0b1f33;
    --navy-2: #102a43;
    --navy-3: #163a5c;
    --blue: #1f6feb;
    --blue-soft: #eaf2ff;
    --gold: #b48a45;
    --gold-soft: #f8f1e5;
    --green: #18794e;
    --green-soft: #e7f6ee;
    --red: #c2414b;
    --red-soft: #fdebed;
    --orange: #b96b1d;
    --orange-soft: #fff1df;
    --purple: #6554c0;
    --purple-soft: #eeebff;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
    --shadow: 0 10px 30px rgba(15,31,51,.06);
    --shadow-lg: 0 26px 70px rgba(9,30,66,.14);
    --radius: 16px;
    --radius-sm: 10px;
    --sidebar: 286px;
    --topbar: 88px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

button,input,select,textarea {
    font: inherit
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%
}

.ui-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.app-shell {
    min-height: 100vh;
    display: flex
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar);
    z-index: 50;
    background: linear-gradient(180deg,#0b1f33 0%,#0a1b2c 54%,#081725 100%);
    color: #dbe7f1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.06);
    box-shadow: 18px 0 45px rgba(3,15,28,.08);
    overflow-y: auto;
    overflow-x: hidden
}

.sidebar::-webkit-scrollbar {
    width: 5px
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: 20px
}

.sidebar-top {
    height: 82px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0
}

.brand-mark {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: linear-gradient(145deg,#d1b06b,#aa7d35);
    color: #0b1f33;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .5px;
    box-shadow: 0 8px 20px rgba(180,138,69,.22);
    overflow: hidden
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: 4px
}

.brand-copy {
    min-width: 0
}

.brand-copy b {
    display: block;
    color: #fff;
    font-size: 13px;
    letter-spacing: .75px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 185px
}

.brand-copy small {
    display: block;
    margin-top: 2px;
    color: #8fa4b7;
    font-size: 9px;
    letter-spacing: 1.55px;
    font-weight: 700
}

.sidebar-mobile-close {
    display: none;
    margin-left: auto;
    background: transparent;
    color: #fff;
    border: 0;
    font-size: 28px;
    cursor: pointer
}

.sidebar-context {
    margin: 16px 16px 8px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #33c481;
    box-shadow: 0 0 0 4px rgba(51,196,129,.1)
}

.sidebar-context strong {
    display: block;
    font-size: 11px;
    color: #eaf3fa
}

.sidebar-context small {
    display: block;
    font-size: 9px;
    color: #7890a4;
    margin-top: 1px
}

.nav-menu {
    padding: 4px 12px 18px
}

.nav-section {
    padding: 20px 12px 7px
}

.nav-section span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.55px;
    text-transform: uppercase;
    color: #58728a
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 43px;
    padding: 9px 11px;
    border-radius: 10px;
    color: #9eb0c1;
    font-size: 12.5px;
    font-weight: 620;
    margin: 2px 0;
    transition: .18s ease
}

.nav-link:hover {
    background: rgba(255,255,255,.055);
    color: #fff
}

.nav-link.active {
    background: linear-gradient(90deg,rgba(31,111,235,.18),rgba(31,111,235,.08));
    color: #fff
}

.nav-link.active:before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #5b9cff
}

.nav-link .nav-icon {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #7893aa;
    transition: .18s
}

.nav-link .nav-icon .ui-icon {
    width: 17px;
    height: 17px
}

.nav-link:hover .nav-icon,.nav-link.active .nav-icon {
    color: #87b7ff;
    background: rgba(68,139,243,.1)
}

.nav-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #dc5a62;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    display: grid;
    place-items: center
}

.sidebar-foot {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 15px 16px 18px
}

.sidebar-version {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 3px 12px
}

.sidebar-version>span {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #d7b56f;
    font-size: 10px;
    font-weight: 900
}

.sidebar-version strong,.sidebar-version small {
    display: block
}

.sidebar-version strong {
    font-size: 10px;
    color: #bac9d5
}

.sidebar-version small {
    font-size: 9px;
    color: #60798f;
    margin-top: 1px
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 9px;
    color: #849bad;
    font-size: 11.5px
}

.sidebar-logout .ui-icon {
    width: 17px
}

.sidebar-logout:hover {
    background: rgba(220,90,98,.08);
    color: #ffc6ca
}

.main {
    margin-left: var(--sidebar);
    width: calc(100% - var(--sidebar));
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.topbar {
    min-height: var(--topbar);
    padding: 17px 28px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 35
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
}

.page-heading {
    min-width: 0
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #95a2b0;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .35px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden
}

.breadcrumb .ui-icon {
    width: 10px;
    height: 10px
}

.breadcrumb strong {
    color: #6f8193;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-heading h1 {
    font-size: 21px;
    line-height: 1.2;
    margin: 4px 0 2px;
    color: #13263a;
    letter-spacing: -.25px
}

.page-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 11px
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: #fff;
    display: grid;
    place-items: center;
    color: #4e6175;
    cursor: pointer;
    transition: .18s;
    position: relative
}

.icon-btn:hover {
    border-color: #c8d5e2;
    background: #f8fbfd;
    color: #1c4f7f;
    box-shadow: var(--shadow-sm)
}

.icon-btn .ui-icon {
    width: 18px;
    height: 18px
}

.notification-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 10px;
    background: #d8535d;
    color: #fff;
    border: 2px solid #fff;
    display: grid;
    place-items: center;
    font-size: 8px;
    font-weight: 900
}

.notification-count:empty {
    display: none
}

.mobile-menu {
    display: none
}

.user-menu-wrap {
    position: relative
}

.userbox {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px 5px 5px;
    cursor: pointer;
    min-height: 43px;
    text-align: left;
    transition: .18s
}

.userbox:hover {
    border-color: #cdd8e2;
    box-shadow: var(--shadow-sm)
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(145deg,#173a5a,#0b1f33);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 850;
    overflow: hidden
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: 2px
}

.userbox-copy {
    display: block;
    min-width: 110px;
    max-width: 180px
}

.userbox-copy strong {
    display: block;
    color: #22374b;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.userbox-copy small {
    display: block;
    color: #8998a7;
    font-size: 8.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px
}

.user-chevron {
    font-size: 13px;
    color: #8d9cab
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: 52px;
    width: 245px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 7px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: .16s;
    z-index: 60
}

.user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.user-dropdown-head {
    padding: 10px 10px 11px;
    border-bottom: 1px solid #eef2f5;
    margin-bottom: 5px
}

.user-dropdown-head strong,.user-dropdown-head span {
    display: block
}

.user-dropdown-head strong {
    font-size: 12px
}

.user-dropdown-head span {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 11px;
    color: #40556a
}

.user-dropdown a:hover {
    background: #f4f7fa;
    color: #163e63
}

.user-dropdown a .ui-icon {
    width: 16px
}

.user-dropdown-sep {
    height: 1px;
    background: #eef2f5;
    margin: 5px 3px
}

.user-dropdown a.logout-link {
    color: #b63e49
}

.page-content {
    padding: 25px 28px 36px;
    flex: 1
}

.app-footer {
    padding: 13px 28px 18px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #98a5b3;
    font-size: 9.5px
}

.btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    min-height: 38px;
    padding: 9px 14px;
    background: var(--navy);
    color: #fff;
    font-weight: 720;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px;
    line-height: 1.1;
    transition: .18s ease;
    box-shadow: none
}

.btn .ui-icon {
    width: 16px;
    height: 16px
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15,31,51,.12)
}

.btn.primary {
    background: linear-gradient(135deg,#236fd5,#1e60bd)
}

.btn.gold {
    background: linear-gradient(135deg,#b99350,#9f783a)
}

.btn.blue {
    background: linear-gradient(135deg,#2a73d2,#185ab1)
}

.btn.danger {
    background: #bf4650
}

.btn.secondary {
    background: #eef3f7;
    color: #334b61
}

.btn.secondary:hover {
    background: #e4ebf1
}

.btn.outline {
    background: #fff;
    border: 1px solid var(--line-strong);
    color: #385169
}

.btn.outline:hover {
    border-color: #b7c8d8;
    background: #f9fbfd
}

.btn.small {
    min-height: 31px;
    padding: 7px 10px;
    font-size: 10px;
    border-radius: 8px
}

.btn.icon-only {
    width: 34px;
    padding: 0
}

.top-create {
    min-height: 40px;
    padding-inline:13px}

.top-create .ui-icon {
    width: 16px
}

.grid {
    display: grid;
    gap: 15px
}

.grid-5 {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.grid-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.grid-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.grid-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm)
}

.card:hover-card {
    box-shadow: var(--shadow)
}

.card.soft {
    background: var(--panel-soft)
}

.card.flat {
    box-shadow: none
}

.card.no-pad {
    padding: 0
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px
}

.card-header h2,.section-head h2 {
    font-size: 14px;
    letter-spacing: -.1px;
    margin: 0;
    color: #1f3448
}

.card-header p {
    font-size: 10.5px;
    color: var(--muted);
    margin: 3px 0 0
}

.card-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eff5fb;
    color: #376c9d;
    display: grid;
    place-items: center
}

.card-header-icon .ui-icon {
    width: 17px
}

.metric-card {
    position: relative;
    overflow: hidden;
    min-height: 132px
}

.metric-card:after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: linear-gradient(145deg,rgba(42,115,210,.06),transparent)
}

.metric-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px
}

.metric-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eef4fb;
    color: #2d679d
}

.metric-icon.good {
    background: var(--green-soft);
    color: var(--green)
}

.metric-icon.warn {
    background: var(--orange-soft);
    color: var(--orange)
}

.metric-icon.bad {
    background: var(--red-soft);
    color: var(--red)
}

.metric-icon.gold {
    background: var(--gold-soft);
    color: #9d7432
}

.metric-icon .ui-icon {
    width: 17px
}

.metric-label {
    font-size: 9.5px;
    color: #75879a;
    font-weight: 790;
    text-transform: uppercase;
    letter-spacing: .55px
}

.metric {
    font-size: 27px;
    line-height: 1.05;
    font-weight: 820;
    letter-spacing: -.7px;
    margin: 12px 0 6px;
    color: #142a40
}

.metric.good {
    color: var(--green)
}

.metric.warn {
    color: var(--orange)
}

.metric.bad {
    color: var(--red)
}

.metric.blue {
    color: #2869b3
}

.metric-sub {
    font-size: 9.5px;
    color: #8b9aaa
}

.metric-foot {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eff3f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: #8c9ba9;
    font-size: 9px
}

.metric-foot strong {
    color: #526b82;
    font-weight: 740
}

.welcome-panel {
    background: linear-gradient(125deg,#0d2740 0%,#123653 58%,#17476d 100%);
    border: 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 165px;
    display: flex;
    align-items: center;
    padding: 23px 25px
}

.welcome-panel:before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
    right: -70px;
    top: -165px
}

.welcome-panel:after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    right: 55px;
    bottom: -145px
}

.welcome-copy {
    position: relative;
    z-index: 2;
    max-width: 720px
}

.welcome-kicker {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9ac8ef;
    font-weight: 800
}

.welcome-panel h2 {
    font-size: 23px;
    margin: 7px 0 6px;
    letter-spacing: -.4px
}

.welcome-panel p {
    max-width: 630px;
    color: #b9cee0;
    font-size: 11px;
    line-height: 1.7;
    margin: 0
}

.welcome-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px
}

.welcome-actions .btn {
    box-shadow: none
}

.welcome-actions .btn.outline {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
    color: #fff
}

.welcome-aside {
    margin-left: auto;
    position: relative;
    z-index: 2;
    min-width: 200px;
    padding-left: 25px
}

.today-box {
    border-left: 1px solid rgba(255,255,255,.14);
    padding-left: 25px
}

.today-box small {
    display: block;
    color: #8eb4d1;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.today-box strong {
    display: block;
    font-size: 17px;
    margin-top: 4px
}

.today-box span {
    font-size: 10px;
    color: #b8cce0
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 11px
}

.section-head>div h2 {
    margin: 0
}

.section-head>div p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10px
}

.section-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.section-title-row .ui-icon {
    width: 17px;
    color: #4e7599
}

.table-wrap {
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm)
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 730px
}

th,td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #edf1f5;
    font-size: 11px;
    vertical-align: middle
}

th {
    position: relative;
    background: #f8fafc;
    color: #7f8fa0;
    text-transform: uppercase;
    letter-spacing: .55px;
    font-size: 8.5px;
    font-weight: 850;
    white-space: nowrap
}

thead th:first-child {
    border-radius: 15px 0 0 0
}

thead th:last-child {
    border-radius: 0 15px 0 0
}

tbody tr {
    transition: .13s
}

tbody tr:hover {
    background: #fbfdff
}

tbody tr:last-child td {
    border-bottom: 0
}

td strong {
    color: #253a4f
}

.table-link {
    color: #185fae;
    font-weight: 760
}

.table-link:hover {
    text-decoration: underline
}

.table-primary {
    font-weight: 760;
    color: #24394d
}

.table-secondary {
    font-size: 9.5px;
    color: #8a99a8;
    margin-top: 2px
}

.table-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px
}

.right {
    text-align: right
}

.nowrap {
    white-space: nowrap
}

.empty {
    padding: 35px 20px;
    text-align: center;
    color: #8b9aa8;
    font-size: 11px
}

.empty-state-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #f0f4f7;
    display: grid;
    place-items: center;
    margin: 0 auto 9px;
    color: #7c92a6
}

.empty-state-icon .ui-icon {
    width: 20px
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 8.5px;
    font-weight: 820;
    white-space: nowrap;
    line-height: 1.4;
    border: 1px solid transparent
}

.badge:before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8
}

.badge.draft {
    background: #f0f3f5;
    color: #687988;
    border-color: #e6ebee
}

.badge.review {
    background: #fff2df;
    color: #9a601d;
    border-color: #f8e5c6
}

.badge.approved,.badge.pass {
    background: #e8f6ef;
    color: #18794e;
    border-color: #d6eee2
}

.badge.rejected,.badge.blocker {
    background: #fdecee;
    color: #b83d48;
    border-color: #f8d9dc
}

.badge.returned {
    background: #eaf2fb;
    color: #336c9e;
    border-color: #dce9f6
}

.badge.info {
    background: #eeedfb;
    color: #5b52a8;
    border-color: #e2dff8
}

.badge.warning {
    background: #fff2df;
    color: #94601f;
    border-color: #f8e3c1
}

.badge.neutral {
    background: #f4f6f8;
    color: #6f7f8e;
    border-color: #e7ecef
}

.filter-card {
    padding: 14px 15px
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(220px,1.25fr) minmax(160px,.75fr) minmax(180px,.8fr) auto;
    gap: 10px;
    align-items: end
}

.search-field {
    position: relative
}

.search-field .ui-icon {
    position: absolute;
    left: 11px;
    bottom: 11px;
    width: 15px;
    color: #8da0b1
}

.search-field input {
    padding-left: 35px
}

.quick-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #edf1f4
}

.filter-chip {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: #607487;
    font-size: 9.5px;
    font-weight: 720
}

.filter-chip:hover,.filter-chip.active {
    border-color: #b9cee2;
    background: #f4f9ff;
    color: #1d5f9c
}

.form-card {
    max-width: 1180px
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px
}

.form-grid.cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.field.full {
    grid-column: 1/-1
}

.field label {
    font-size: 9.5px;
    font-weight: 790;
    color: #485e72;
    letter-spacing: .15px
}

.field input,.field select,.field textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #d7e0e8;
    border-radius: 9px;
    background: #fff;
    color: #23384c;
    font-size: 11.5px;
    outline: none;
    transition: .15s;
    box-shadow: inset 0 1px 1px rgba(17,37,56,.015)
}

.field input::placeholder,.field textarea::placeholder {
    color: #a8b4bf
}

.field input:hover,.field select:hover,.field textarea:hover {
    border-color: #c2d0dc
}

.field input:focus,.field select:focus,.field textarea:focus {
    border-color: #6c9ed1;
    box-shadow: 0 0 0 3px rgba(63,126,191,.1)
}

.field textarea {
    min-height: 92px;
    resize: vertical
}

.field input[type=file] {
    padding: 7px;
    background: #f9fbfc
}

.help {
    font-size: 9.5px;
    color: #8292a2;
    line-height: 1.55
}

.actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 15px
}

.form-section {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm)
}

.form-section+.form-section {
    margin-top: 14px
}

.form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid #eef2f5
}

.form-step {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #edf4fb;
    color: #2e6da7;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900
}

.form-section-head h3 {
    font-size: 13px;
    margin: 0;
    color: #1f354a
}

.form-section-head p {
    font-size: 9.5px;
    margin: 3px 0 0;
    color: #8595a4
}

.form-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 270px;
    gap: 16px
}

.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.form-tip {
    padding: 14px;
    border: 1px solid #e0e8ef;
    border-radius: 12px;
    background: #f8fafc
}

.form-tip .tip-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #edf4fb;
    color: #346c9c;
    display: grid;
    place-items: center;
    margin-bottom: 9px
}

.form-tip .ui-icon {
    width: 16px
}

.form-tip strong {
    font-size: 10.5px;
    display: block
}

.form-tip p {
    font-size: 9.5px;
    color: #7d8d9d;
    line-height: 1.55;
    margin: 4px 0 0
}

.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 15px
}

.stepper-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8a99a7;
    font-size: 9px;
    font-weight: 750
}

.stepper-item span {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #d9e2e9;
    background: #fff;
    font-size: 8px
}

.stepper-item.active {
    color: #255f94
}

.stepper-item.active span {
    background: #225f98;
    color: #fff;
    border-color: #225f98
}

.stepper-line {
    height: 1px;
    background: #dfe6ec;
    flex: 1;
    min-width: 25px;
    margin: 0 8px
}

.notice {
    padding: 11px 13px;
    background: #fff8e9;
    border: 1px solid #f0e1bc;
    border-radius: 10px;
    font-size: 10px;
    color: #765b2d;
    line-height: 1.55
}

.notice.info {
    background: #edf5fc;
    border-color: #d8e8f5;
    color: #32628d
}

.notice.success {
    background: #ebf8f1;
    border-color: #d8efe4;
    color: #216f4c
}

.notice.danger {
    background: #fef0f1;
    border-color: #f6dadd;
    color: #a63f48
}

.flash-wrap {
    position: fixed;
    right: 24px;
    top: 102px;
    width: min(390px,calc(100vw - 30px));
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.flash {
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 10.5px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid;
    box-shadow: 0 14px 35px rgba(20,40,60,.14);
    background: #fff
}

.flash.success {
    background: #eff9f4;
    border-color: #d4ecdf;
    color: #176642
}

.flash.danger {
    background: #fff1f2;
    border-color: #f3d6d9;
    color: #a43b45
}

.flash.warning {
    background: #fff7e8;
    border-color: #f2dfb9;
    color: #866025
}

.flash-icon {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 9px;
    flex: 0 0 auto
}

.flash>span:nth-child(2) {
    flex: 1
}

.flash button {
    border: 0;
    background: transparent;
    color: currentColor;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    opacity: .6
}

.flash button:hover {
    opacity: 1
}

.progress {
    height: 6px;
    background: #edf1f4;
    border-radius: 20px;
    overflow: hidden
}

.progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#286eaa,#52a5d9);
    border-radius: 20px
}

.risk-score {
    font-size: 29px;
    font-weight: 840;
    letter-spacing: -.6px
}

.risk-high {
    color: #c23e48
}

.risk-medium {
    color: #b36a1d
}

.risk-low {
    color: #18794e
}

.risk-ring {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(currentColor var(--risk,0%),#ecf0f3 0);
    position: relative
}

.risk-ring:after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff
}

.risk-ring strong {
    position: relative;
    z-index: 2;
    font-size: 15px
}

.kpi-list {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px
}

.kpi-row strong {
    font-size: 10.5px;
    color: #344a5f
}

.kpi-row small {
    color: #8b9aa8;
    font-size: 9px
}

.mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 125px;
    padding: 15px 0 22px
}

.mini-chart span {
    flex: 1;
    background: linear-gradient(180deg,#5d9ddb,#c8dff2);
    border-radius: 6px 6px 2px 2px;
    min-height: 5px;
    position: relative;
    transition: .2s
}

.mini-chart span:hover {
    filter: brightness(.96)
}

.mini-chart span em {
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #8a9aa9;
    font-style: normal
}

.chart-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 8.5px;
    color: #95a2af
}

.dashboard-row {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
    gap: 15px
}

.attention-list {
    display: flex;
    flex-direction: column
}

.attention-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f4
}

.attention-item:last-child {
    border-bottom: 0
}

.attention-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #fff2e5;
    color: #b3661e
}

.attention-icon.red {
    background: #fcebed;
    color: #b83f48
}

.attention-icon.blue {
    background: #edf4fb;
    color: #326b9f
}

.attention-icon .ui-icon {
    width: 15px
}

.attention-copy {
    flex: 1
}

.attention-copy strong {
    font-size: 10.5px;
    display: block
}

.attention-copy span {
    font-size: 9px;
    color: #8998a6
}

.attention-value {
    font-size: 12px;
    font-weight: 850;
    color: #3b5369
}

.case-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg,#fff 0%,#f9fbfd 100%);
    padding: 21px 22px
}

.case-code {
    font-size: 9px;
    color: #2d6da8;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase
}

.case-hero h2 {
    margin: 4px 0 6px;
    font-size: 20px;
    letter-spacing: -.35px
}

.case-meta {
    color: #7e8e9e;
    font-size: 9.5px;
    line-height: 1.55
}

.case-status-block {
    text-align: right
}

.case-status-block .risk-score {
    margin-top: 8px
}

.case-summary-grid {
    margin-top: 13px
}

.case-summary-card {
    padding: 14px 15px;
    min-height: 95px
}

.case-summary-card .metric {
    font-size: 17px;
    margin: 8px 0 0
}

.case-workspace {
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 15px;
    align-items: start
}

.case-main {
    min-width: 0
}

.case-aside {
    position: sticky;
    top: 105px;
    display: flex;
    flex-direction: column;
    gap: 13px
}

.case-tabbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 6px;
    background: #eaf0f5;
    border-radius: 12px;
    margin: 14px 0
}

.case-tabbar button,.case-tabbar a {
    border: 0;
    background: transparent;
    color: #607489;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 780;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.case-tabbar .ui-icon {
    width: 14px
}

.case-tabbar button:hover,.case-tabbar a:hover {
    background: rgba(255,255,255,.65);
    color: #294f72
}

.case-tabbar button.active {
    background: #fff;
    color: #1f5f98;
    box-shadow: 0 1px 5px rgba(18,52,81,.08)
}

.case-panel {
    display: none
}

.case-panel.active {
    display: block
}

.case-panel>.card+.card {
    margin-top: 14px
}

.case-info-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0
}

.case-info-item {
    padding: 11px 0;
    border-bottom: 1px solid #eef2f5
}

.case-info-item:nth-child(odd) {
    padding-right: 18px
}

.case-info-item span,.case-info-item strong {
    display: block
}

.case-info-item span {
    font-size: 8.5px;
    text-transform: uppercase;
    color: #92a0ad;
    letter-spacing: .45px;
    font-weight: 760
}

.case-info-item strong {
    font-size: 10.5px;
    color: #334a60;
    margin-top: 3px
}

.check-row {
    display: flex;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid #e2e8ee;
    border-radius: 10px;
    margin: 7px 0;
    align-items: flex-start;
    background: #fff;
    transition: .15s
}

.check-row:hover {
    border-color: #cbd8e4;
    background: #fbfdff
}

.check-row input[type=checkbox] {
    margin-top: 3px;
    accent-color: #256da9
}

.check-row>div {
    flex: 1
}

.check-row strong {
    display: block;
    font-size: 10.5px;
    color: #31495f
}

.check-row small {
    color: #8797a6;
    display: block;
    margin-top: 2px;
    font-size: 9px
}

.check-row input[type=text],.check-row input:not([type]) {
    margin-top: 7px
}

.rule-row {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f4
}

.rule-row:last-child {
    border-bottom: 0
}

.rule-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900
}

.rule-icon.PASS {
    background: #e6f5ed;
    color: #18794e
}

.rule-icon.FAIL {
    background: #fcebed;
    color: #b83d48
}

.rule-icon.WARN {
    background: #fff1df;
    color: #a36520
}

.opinion {
    border: 1px solid #e2e8ee;
    border-left: 3px solid #3d79ae;
    padding: 12px 13px;
    background: #fbfdff;
    border-radius: 9px;
    font-size: 10.5px
}

.opinion p {
    margin-bottom: 0
}

.signature-card {
    background: linear-gradient(145deg,#f8fbfe,#fff)
}

.workflow-status-card {
    background: linear-gradient(135deg,#0f2c47,#143a5b);
    color: #fff;
    border: 0
}

.workflow-status-card .card-header h2 {
    color: #fff
}

.workflow-status-card .card-header p {
    color: #a7c0d4
}

.workflow-status-card label {
    color: #b9cede
}

.workflow-status-card select,.workflow-status-card textarea {
    background: rgba(255,255,255,.96)
}

.workflow-status-card .btn.outline {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
    color: #fff
}

.timeline {
    position: relative;
    padding-left: 22px
}

.timeline:before {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: #dce5ec
}

.timeline-item {
    position: relative;
    padding: 0 0 15px 7px;
    font-size: 10px
}

.timeline-item:before {
    content: "";
    position: absolute;
    left: -20px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4f8ec5;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cddbe7
}

.timeline-item strong {
    color: #31495e
}

.timeline-item small {
    display: block;
    color: #8898a7;
    margin-top: 2px;
    font-size: 9px
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(440px,.92fr);
    background: #0b1f33
}

.login-art {
    position: relative;
    padding: 54px 58px;
    color: #fff;
    background: radial-gradient(circle at 12% 10%,rgba(60,122,179,.2),transparent 31%),linear-gradient(135deg,#0a1d30 0%,#0e2942 56%,#123a5b 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.login-art:before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 50%;
    right: -220px;
    top: -210px
}

.login-art:after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 50%;
    right: 20px;
    bottom: -235px
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2
}

.login-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg,#d1b06b,#aa7d35);
    color: #0b1f33;
    display: grid;
    place-items: center;
    font-weight: 900;
    overflow: hidden
}

.login-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: 4px
}

.login-brand strong {
    display: block;
    font-size: 12px;
    letter-spacing: .7px
}

.login-brand small {
    display: block;
    font-size: 8.5px;
    letter-spacing: 1.4px;
    color: #83a6c2;
    margin-top: 2px
}

.login-hero {
    position: relative;
    z-index: 2;
    max-width: 720px
}

.login-hero .eyebrow {
    color: #8dbde2
}

.login-hero h1 {
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -1.4px;
    margin: 10px 0 14px;
    max-width: 680px
}

.login-hero h1 span {
    color: #d0ad66
}

.login-hero p {
    color: #a9c0d2;
    max-width: 600px;
    line-height: 1.75;
    font-size: 12px;
    margin: 0
}

.login-feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 25px;
    max-width: 670px
}

.login-feature {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    padding: 12px;
    border-radius: 11px
}

.login-feature .ui-icon {
    width: 17px;
    color: #8dbde2
}

.login-feature strong {
    display: block;
    font-size: 9.5px;
    margin-top: 8px
}

.login-feature span {
    display: block;
    font-size: 8.5px;
    color: #7999b2;
    margin-top: 2px
}

.login-foot {
    position: relative;
    z-index: 2;
    font-size: 9px;
    color: #6687a0;
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.login-form-wrap {
    background: #f5f8fb;
    display: grid;
    place-items: center;
    padding: 38px
}

.login-box {
    width: min(410px,100%);
    background: #fff;
    border: 1px solid #e2e8ee;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 25px 65px rgba(20,45,70,.1)
}

.login-box .eyebrow {
    color: #2d6da6
}

.login-box h2 {
    font-size: 25px;
    letter-spacing: -.5px;
    margin: 7px 0 5px
}

.login-box>.help {
    margin-bottom: 20px
}

.login-box .field {
    margin: 12px 0
}

.login-box .field input {
    min-height: 44px
}

.login-box .btn {
    width: 100%;
    min-height: 44px;
    margin-top: 5px
}

.login-security {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 0;
    margin-top: 14px;
    border-top: 1px solid #eef2f5;
    color: #8796a4;
    font-size: 9px
}

.login-security .ui-icon {
    width: 15px;
    color: #4d7ba4
}

.password-wrap {
    position: relative
}

.password-wrap input {
    padding-right: 48px
}

.password-toggle {
    position: absolute;
    right: 7px;
    bottom: 6px;
    width: 32px;
    height: 32px;
    border: 0;
    background: #f2f5f7;
    border-radius: 8px;
    color: #687d8f;
    cursor: pointer;
    display: grid;
    place-items: center
}

.password-toggle .ui-icon {
    width: 15px
}

.eyebrow {
    font-size: 8.5px;
    letter-spacing: 1.55px;
    color: #a17a3d;
    font-weight: 850;
    text-transform: uppercase
}

.print-only {
    display: none
}

.sidebar-backdrop {
    display: none
}

@media(max-width: 1350px) {
    :root {
        --sidebar:252px
    }

    .grid-5 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .userbox-copy {
        display: none
    }

    .welcome-aside {
        min-width: 170px
    }

    .case-workspace {
        grid-template-columns: minmax(0,1fr) 280px
    }
}

@media(max-width: 1080px) {
    :root {
        --sidebar:78px
    }

    .brand-copy,.sidebar-context,.nav-section span,.nav-link>span:not(.nav-icon),.sidebar-foot .sidebar-version div,.sidebar-logout span {
        display: none
    }

    .sidebar-top {
        padding: 0 17px
    }

    .brand {
        justify-content: center
    }

    .brand-mark {
        width: 42px
    }

    .nav-menu {
        padding-inline:10px}

    .nav-section {
        height: 12px;
        padding: 7px 0
    }

    .nav-section:after {
        content: "";
        display: block;
        height: 1px;
        background: rgba(255,255,255,.08);
        margin: 0 8px
    }

    .nav-link {
        justify-content: center;
        padding: 7px
    }

    .nav-link.active:before {
        left: -10px
    }

    .sidebar-foot {
        padding-inline:12px}

    .sidebar-version {
        justify-content: center
    }

    .sidebar-logout {
        justify-content: center
    }

    .main {
        margin-left: var(--sidebar);
        width: calc(100% - var(--sidebar))
    }

    .dashboard-row,.case-workspace,.form-layout {
        grid-template-columns: 1fr
    }

    .case-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .login-page {
        grid-template-columns: 1fr 470px
    }

    .login-art {
        padding: 45px
    }

    .login-hero h1 {
        font-size: 37px
    }

    .login-feature-grid {
        grid-template-columns: 1fr
    }

    .login-feature {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .login-feature strong {
        margin-top: 0
    }

    .login-feature span {
        display: none
    }
}

@media(max-width: 820px) {
    :root {
        --sidebar:286px
    }

    .sidebar {
        transform: translateX(-102%);
        transition: transform .22s ease
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 35px 0 70px rgba(4,18,31,.28)
    }

    .sidebar .brand-copy,.sidebar .sidebar-context,.sidebar .nav-section span,.sidebar .nav-link>span:not(.nav-icon),.sidebar .sidebar-foot .sidebar-version div,.sidebar .sidebar-logout span {
        display: block
    }

    .sidebar .nav-link {
        justify-content: flex-start;
        padding: 9px 11px
    }

    .sidebar .nav-section {
        height: auto;
        padding: 20px 12px 7px
    }

    .sidebar .nav-section:after {
        display: none
    }

    .sidebar .sidebar-logout {
        justify-content: flex-start
    }

    .sidebar-mobile-close {
        display: block
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(4,16,28,.46);
        backdrop-filter: blur(2px);
        z-index: 45
    }

    .sidebar-backdrop.open {
        display: block
    }

    .main {
        margin-left: 0;
        width: 100%
    }

    .mobile-menu {
        display: grid
    }

    .topbar {
        padding: 13px 16px;
        min-height: 74px
    }

    .page-heading p,.breadcrumb {
        display: none
    }

    .page-heading h1 {
        font-size: 18px;
        margin: 0
    }

    .page-content {
        padding: 18px 14px 28px
    }

    .app-footer {
        padding-inline:14px}

    .grid-5,.grid-4 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .grid-3 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .filter-bar {
        grid-template-columns: 1fr 1fr
    }

    .filter-bar .search-field {
        grid-column: 1/-1
    }

    .welcome-panel {
        align-items: flex-start
    }

    .welcome-aside {
        display: none
    }

    .login-page {
        display: block;
        background: #f5f8fb
    }

    .login-art {
        display: none
    }

    .login-form-wrap {
        min-height: 100vh;
        padding: 25px 16px
    }

    .login-box {
        padding: 25px 20px
    }

    .case-aside {
        grid-template-columns: 1fr 1fr
    }

    .form-grid.cols-3 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width: 590px) {
    .top-create span {
        display:none
    }

    .top-create {
        width: 40px;
        padding: 0
    }

    .top-actions {
        gap: 6px
    }

    .userbox {
        padding: 4px
    }

    .user-chevron {
        display: none
    }

    .page-heading h1 {
        font-size: 16px
    }

    .grid-5,.grid-4,.grid-3,.grid-2,.form-grid,.form-grid.cols-3,.case-info-list,.case-aside {
        grid-template-columns: 1fr
    }

    .metric-card {
        min-height: 118px
    }

    .metric {
        font-size: 24px
    }

    .welcome-panel {
        padding: 20px
    }

    .welcome-panel h2 {
        font-size: 20px
    }

    .welcome-actions {
        flex-wrap: wrap
    }

    .filter-bar {
        grid-template-columns: 1fr
    }

    .filter-bar .search-field {
        grid-column: auto
    }

    .form-section {
        padding: 16px
    }

    .stepper-item:not(.active) b {
        display: none
    }

    .case-hero {
        grid-template-columns: 1fr
    }

    .case-status-block {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 14px
    }

    .case-summary-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .case-tabbar {
        overflow-x: auto;
        flex-wrap: nowrap
    }

    .case-tabbar button,.case-tabbar a {
        white-space: nowrap
    }

    .flash-wrap {
        right: 10px;
        top: 82px
    }

    .app-footer {
        flex-direction: column;
        gap: 3px
    }

    .user-dropdown {
        right: -2px;
        width: 230px
    }
}

@media print {
    body {
        background: #fff
    }

    .sidebar,.topbar,.no-print,.flash-wrap,.app-footer {
        display: none!important
    }

    .main {
        margin: 0;
        width: 100%;
        padding: 0
    }

    .page-content {
        padding: 0
    }

    .card,.table-wrap {
        box-shadow: none;
        border-color: #ddd
    }

    .print-only {
        display: block
    }

    .page-break {
        page-break-before: always
    }

    .case-panel {
        display: block!important
    }
}

/* ===== V4 Enterprise Control / Decision Support ===== */
.executive-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 24px 25px;
    background: linear-gradient(120deg,#fff 0%,#fbfdff 57%,#f2f7fb 100%);
    position: relative;
    overflow: hidden
}

.executive-hero:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid #e2ebf2;
    right: -105px;
    top: -125px
}

.executive-hero>div {
    position: relative;
    z-index: 1
}

.executive-hero h2 {
    font-size: 25px;
    letter-spacing: -.5px;
    margin: 5px 0 6px
}

.executive-hero p {
    margin: 0;
    color: var(--muted);
    max-width: 740px;
    font-size: 11px;
    line-height: 1.7
}

.executive-context {
    min-width: 190px;
    padding: 14px 16px;
    border: 1px solid #dfe8ef;
    background: rgba(255,255,255,.78);
    border-radius: 13px;
    text-align: right
}

.executive-context span,.executive-context strong,.executive-context small {
    display: block
}

.executive-context span {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8192a1;
    font-weight: 850
}

.executive-context strong {
    font-size: 18px;
    color: #143653;
    margin: 4px 0 1px
}

.executive-context small {
    font-size: 9px;
    color: #8b9aa8
}

.welcome-kicker {
    font-size: 8.5px;
    letter-spacing: 1.45px;
    color: #4f7fa9;
    font-weight: 850;
    text-transform: uppercase
}

.welcome-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px
}

.risk-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800
}

.risk-score-pill strong {
    font-size: 13px
}

.risk-score-pill span {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .35px
}

.risk-score-pill.low {
    background: #e8f7ef;
    color: #18794e
}

.risk-score-pill.medium {
    background: #fff3df;
    color: #9b651f
}

.risk-score-pill.high {
    background: #fdeee5;
    color: #b45b24
}

.risk-score-pill.critical {
    background: #fdebed;
    color: #b33f49
}

.risk-number {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 10px
}

.risk-number.low {
    background: #e8f7ef;
    color: #18794e
}

.risk-number.medium {
    background: #fff3df;
    color: #9b651f
}

.risk-number.high {
    background: #fdeee5;
    color: #b45b24
}

.risk-number.critical {
    background: #fdebed;
    color: #b33f49
}

.progress.compact {
    height: 5px;
    margin-top: 5px
}

.inline-details {
    position: relative
}

.inline-details summary {
    cursor: pointer;
    list-style: none;
    color: #28699f;
    font-weight: 750;
    font-size: 10px;
    border: 1px solid #d9e4ec;
    padding: 6px 8px;
    border-radius: 7px;
    background: #fff
}

.inline-details summary::-webkit-details-marker {
    display: none
}

.inline-assess {
    position: absolute;
    right: 0;
    top: 35px;
    width: 260px;
    background: #fff;
    border: 1px solid #dbe4eb;
    border-radius: 12px;
    padding: 12px;
    z-index: 20;
    box-shadow: 0 18px 45px rgba(14,35,53,.16)
}

.inline-assess label {
    display: block;
    font-size: 8.5px;
    font-weight: 750;
    color: #687c8e;
    margin: 6px 0
}

.inline-assess input,.inline-assess select,.inline-assess textarea {
    width: 100%;
    margin-top: 3px
}

.integrity-hash {
    display: inline-block;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 9px;
    padding: 4px 6px;
    border: 1px solid #dfe6ec;
    background: #f8fafc;
    border-radius: 6px;
    color: #4e6275
}

.matrix-toolbar .filter-bar {
    align-items: end
}

.matrix-summary {
    grid-column: span 2;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap
}

.matrix-summary span {
    padding: 8px 10px;
    border: 1px solid #e0e7ed;
    border-radius: 9px;
    background: #f9fbfc;
    color: #687b8d;
    font-size: 9px
}

.matrix-summary strong {
    color: #173b5a;
    font-size: 12px;
    margin-right: 3px
}

.matrix-legend {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

.matrix-legend span {
    font-size: 8px;
    font-weight: 800;
    padding: 4px 7px;
    border-radius: 8px
}

.matrix-legend .low {
    background: #e8f7ef;
    color: #18794e
}

.matrix-legend .medium {
    background: #fff3df;
    color: #93601e
}

.matrix-legend .high {
    background: #fdeee5;
    color: #b65a23
}

.matrix-legend .critical {
    background: #fdebed;
    color: #b43e48
}

.risk-matrix-wrap {
    display: grid;
    grid-template-columns: 105px minmax(520px,1fr);
    gap: 10px;
    overflow-x: auto;
    padding-top: 8px
}

.risk-matrix {
    display: grid;
    grid-template-columns: repeat(5,minmax(95px,1fr));
    grid-template-rows: repeat(5,88px);
    gap: 5px;
    min-width: 520px
}

.risk-cell {
    border-radius: 10px;
    padding: 8px;
    position: relative;
    border: 1px solid rgba(20,40,60,.06);
    transition: .16s
}

.risk-cell.low {
    background: #e8f7ef;
    color: #176b47
}

.risk-cell.medium {
    background: #fff2d8;
    color: #895817
}

.risk-cell.high {
    background: #fde6d9;
    color: #a44d1f
}

.risk-cell.critical {
    background: #fbdcdf;
    color: #a63742
}

.risk-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15,30,45,.13);
    z-index: 12
}

.risk-cell-score {
    position: absolute;
    right: 8px;
    top: 7px;
    font-size: 8px;
    opacity: .72;
    font-weight: 800
}

.risk-cell-count {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    margin-top: 17px
}

.risk-cell-count:after {
    content: " risk";
    font-size: 8px;
    font-weight: 700;
    opacity: .7
}

.risk-cell-pop {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 7px;
    display: flex;
    gap: 3px;
    flex-wrap: wrap
}

.risk-cell-pop a {
    display: none
}

.risk-cell:hover .risk-cell-pop {
    position: absolute;
    left: 5px;
    right: auto;
    bottom: 5px;
    width: 230px;
    background: #fff;
    color: #2b4256;
    border: 1px solid #dbe4eb;
    border-radius: 9px;
    padding: 7px;
    box-shadow: 0 15px 35px rgba(14,35,53,.18);
    display: block;
    z-index: 30
}

.risk-cell:hover .risk-cell-pop a {
    display: block;
    padding: 5px;
    border-bottom: 1px solid #eef2f5
}

.risk-cell-pop a:last-child {
    border-bottom: 0
}

.risk-cell-pop strong,.risk-cell-pop small {
    display: block
}

.risk-cell-pop strong {
    font-size: 9px
}

.risk-cell-pop small {
    font-size: 8px;
    color: #8392a0
}

.risk-axis-y {
    display: grid;
    grid-template-rows: 25px repeat(5,88px);
    gap: 5px;
    align-items: center;
    text-align: right;
    color: #778998;
    font-size: 8px
}

.risk-axis-y b {
    align-self: end;
    font-size: 8px;
    letter-spacing: 1px;
    color: #536b7d
}

.risk-axis-x {
    margin-left: 115px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 5px;
    min-width: 520px;
    padding-top: 6px;
    color: #778998;
    font-size: 8px;
    text-align: center
}

.risk-axis-x b {
    grid-column: 1/-1;
    letter-spacing: 1px;
    color: #536b7d
}

.risk-axis-x span {
    white-space: nowrap
}

.process-map-summary {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    grid-column: span 3
}

.process-map-summary span {
    border: 1px solid #e0e7ed;
    background: #f9fbfc;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 9px;
    color: #6a7d8f
}

.process-map-summary strong {
    color: #153b5a;
    font-size: 12px
}

.process-department {
    margin-top: 18px
}

.process-map-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.process-node {
    background: #fff;
    border: 1px solid #dfe7ed;
    border-radius: 15px;
    padding: 15px;
    box-shadow: var(--shadow-sm);
    position: relative;
    min-width: 0
}

.process-node:before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background: #3f7eb3;
    border-radius: 0 3px 3px 0
}

.process-node-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.process-code {
    font-size: 8px;
    letter-spacing: .7px;
    font-weight: 900;
    color: #49789f;
    background: #edf5fb;
    border-radius: 7px;
    padding: 4px 6px
}

.process-node h3 {
    font-size: 13px;
    margin: 9px 0 5px;
    color: #193a56
}

.process-node>p {
    font-size: 9px;
    color: #748697;
    line-height: 1.55;
    min-height: 29px
}

.process-owner {
    padding: 8px 0;
    border-top: 1px solid #edf1f4;
    border-bottom: 1px solid #edf1f4
}

.process-owner strong,.process-owner span {
    display: block
}

.process-owner strong {
    font-size: 9px;
    color: #3e5366
}

.process-owner span {
    font-size: 8px;
    color: #91a0ad
}

.process-kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    margin-top: 9px
}

.process-kpis span {
    text-align: center;
    padding: 7px 4px;
    border: 1px solid #e5ebf0;
    border-radius: 8px;
    font-size: 8px;
    color: #788a99
}

.process-kpis b {
    display: block;
    font-size: 12px;
    color: #183b59
}

.process-legal {
    margin-top: 8px;
    background: #f8fafc;
    border-radius: 7px;
    padding: 7px;
    font-size: 8px;
    color: #6f8292
}

.process-children {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px dashed #cbd8e2;
    display: grid;
    gap: 6px
}

.process-child {
    border: 1px solid #e2e9ef;
    border-radius: 8px;
    padding: 7px 8px;
    background: #fafcfd
}

.process-child span {
    font-size: 7px;
    font-weight: 900;
    color: #68859b
}

.process-child strong {
    display: block;
    font-size: 9px;
    margin: 2px 0
}

.process-child small {
    font-size: 8px;
    color: #8797a5
}

.risk-portfolio {
    display: grid;
    gap: 11px
}

.portfolio-row {
    display: grid;
    grid-template-columns: 160px 1fr 34px;
    gap: 10px;
    align-items: center
}

.portfolio-row>div:first-child strong,.portfolio-row>div:first-child small {
    display: block
}

.portfolio-row>div:first-child strong {
    font-size: 9.5px;
    color: #40566a
}

.portfolio-row>div:first-child small {
    font-size: 8px;
    color: #8c9aa7
}

.portfolio-bar {
    height: 7px;
    background: #edf2f6;
    border-radius: 7px;
    overflow: hidden
}

.portfolio-bar span {
    display: block;
    height: 100%;
    border-radius: 7px
}

.portfolio-bar span.low {
    background: #4aa775
}

.portfolio-bar span.medium {
    background: #d4a149
}

.portfolio-bar span.high {
    background: #d47b44
}

.portfolio-bar span.critical {
    background: #c8565f
}

.portfolio-row>b {
    font-size: 10px;
    text-align: right
}

.portfolio-row>b.low {
    color: #18794e
}

.portfolio-row>b.medium {
    color: #a36a20
}

.portfolio-row>b.high {
    color: #b65a23
}

.portfolio-row>b.critical {
    color: #b43e48
}

.priority-queue {
    padding: 7px
}

.priority-item {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #edf1f4;
    border-radius: 8px
}

.priority-item:last-child {
    border-bottom: 0
}

.priority-item:hover {
    background: #f8fafc
}

.priority-score {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 10px
}

.priority-score.low {
    background: #e8f7ef;
    color: #18794e
}

.priority-score.medium {
    background: #fff3df;
    color: #9b651f
}

.priority-score.high {
    background: #fdeee5;
    color: #b45b24
}

.priority-score.critical {
    background: #fdebed;
    color: #b33f49
}

.priority-copy {
    min-width: 0
}

.priority-copy strong,.priority-copy small {
    display: block
}

.priority-copy strong {
    font-size: 9.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.priority-copy small {
    font-size: 8px;
    color: #8797a6;
    margin-top: 2px
}

.v4-chart span {
    position: relative
}

.v4-chart span b {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #557087
}

.report-bars {
    display: grid;
    gap: 10px
}

.report-bar-row {
    display: grid;
    grid-template-columns: 70px 1fr 70px 125px;
    gap: 8px;
    align-items: center;
    font-size: 8.5px
}

.report-bar-row>div {
    height: 8px;
    background: #edf2f6;
    border-radius: 6px;
    overflow: hidden
}

.report-bar-row i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#2b6eaa,#4c8bc0);
    border-radius: 6px
}

.report-bar-row strong {
    font-size: 9px;
    color: #40576a
}

.report-bar-row small {
    text-align: right;
    color: #738696
}

.decision-list {
    display: grid;
    gap: 0
}

.decision-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f4
}

.decision-list div:last-child {
    border-bottom: 0
}

.decision-list span {
    font-size: 9px;
    color: #718396
}

.decision-list strong {
    font-size: 11px;
    color: #173b59
}

.audit-explain {
    grid-column: span 2;
    align-self: end;
    border: 1px solid #dfe7ed;
    background: #f8fafc;
    border-radius: 10px;
    padding: 8px 10px
}

.audit-explain strong,.audit-explain span {
    display: block
}

.audit-explain strong {
    font-size: 9px;
    color: #38536a
}

.audit-explain span {
    font-size: 8px;
    color: #8797a4;
    margin-top: 2px
}

@media(max-width: 1250px) {
    .process-map-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .matrix-summary,.process-map-summary {
        grid-column: 1/-1;
        justify-content: flex-start
    }

    .executive-context {
        min-width: 160px
    }
}

@media(max-width: 820px) {
    .executive-hero {
        align-items:flex-start
    }

    .executive-context {
        display: none
    }

    .process-map-grid {
        grid-template-columns: 1fr
    }

    .portfolio-row {
        grid-template-columns: 125px 1fr 30px
    }

    .report-bar-row {
        grid-template-columns: 62px 1fr 58px
    }

    .report-bar-row small {
        display: none
    }

    .inline-assess {
        position: fixed;
        left: 15px;
        right: 15px;
        top: 100px;
        width: auto;
        max-height: 70vh;
        overflow: auto
    }

    .risk-matrix-wrap {
        grid-template-columns: 88px minmax(520px,1fr)
    }

    .risk-axis-x {
        margin-left: 98px
    }

    .audit-explain {
        grid-column: 1/-1
    }
}

@media(max-width: 590px) {
    .executive-hero {
        padding:19px
    }

    .executive-hero h2 {
        font-size: 20px
    }

    .risk-matrix-wrap {
        grid-template-columns: 70px minmax(500px,1fr)
    }

    .risk-axis-y {
        font-size: 7px
    }

    .risk-axis-x {
        margin-left: 80px
    }

    .portfolio-row {
        grid-template-columns: 95px 1fr 28px
    }

    .priority-item {
        grid-template-columns: 36px 1fr
    }

    .priority-item>.badge {
        grid-column: 2
    }

    .matrix-legend {
        display: none
    }
}

/* =========================================================
   V5 KOLAY MEVZUAT — sade, görev odaklı belediye arayüzü
   ========================================================= */
.simple-nav .nav-section {
    margin-top: 18px
}

.simple-nav .nav-link {
    min-height: 46px
}

.simple-nav .nav-link span:last-child {
    font-weight: 600
}

.welcome-strip {
    background: linear-gradient(115deg,#0b2947,#123f68);
    color: #fff;
    border: 0;
    padding: 28px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    position: relative
}

.welcome-strip:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    right: 12%;
    top: -160px
}

.welcome-strip h2 {
    font-size: 29px;
    margin: 4px 0 7px
}

.welcome-strip p {
    margin: 0;
    color: #d7e5f2
}

.eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #8ebde6
}

.btn.big {
    padding: 13px 18px;
    font-size: 14px;
    white-space: nowrap
}

.easy-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
    gap: 14px;
    margin-top: 16px
}

.easy-kpi {
    background: #fff;
    border: 1px solid #e4eaf1;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(15,35,56,.035)
}

.easy-kpi>span {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #edf5fb;
    color: #155d91;
    flex: 0 0 auto
}

.easy-kpi>span svg {
    width: 21px
}

.easy-kpi small,.easy-kpi em {
    display: block;
    font-style: normal;
    color: #718096
}

.easy-kpi strong {
    display: block;
    font-size: 25px;
    line-height: 1.1;
    margin: 3px 0
}

.easy-kpi.danger>span {
    background: #fff0f0;
    color: #b42318
}

.easy-kpi.danger strong {
    color: #b42318
}

.easy-kpi.warning>span {
    background: #fff8e6;
    color: #a66a00
}

.home-grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(280px,.75fr);
    gap: 18px;
    margin-top: 22px
}

.easy-queue {
    padding: 4px 16px
}

.easy-queue-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px 2px;
    border-bottom: 1px solid #edf1f5;
    color: inherit;
    text-decoration: none
}

.easy-queue-row:last-child {
    border-bottom: 0
}

.easy-queue-row:hover strong {
    color: #0e5f9c
}

.queue-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #eef5fb;
    color: #195c8c
}

.queue-icon.rejected {
    background: #fff0f0;
    color: #b42318
}

.queue-icon.returned {
    background: #fff7e8;
    color: #b26a00
}

.easy-queue-row strong,.quick-type-list strong {
    display: block;
    font-size: 14px
}

.easy-queue-row small,.quick-type-list small {
    color: #78889a
}

.queue-reason {
    text-align: right
}

.queue-reason>b {
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
    color: #b42318
}

.quick-type-list {
    display: grid;
    gap: 8px
}

.quick-type-list>a {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid #e4eaf1;
    border-radius: 13px;
    background: #fff;
    color: inherit;
    text-decoration: none
}

.quick-type-list>a>span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef5fb;
    color: #165f96;
    display: grid;
    place-items: center
}

.quick-type-list>a:hover {
    border-color: #b9cfdf;
    transform: translateY(-1px)
}

.easy-create {
    max-width: 1180px;
    margin: auto;
    display: grid;
    gap: 16px
}

.easy-step {
    padding: 25px
}

.easy-step-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 20px
}

.easy-step-head>span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0e3d67;
    color: #fff;
    font-weight: 800
}

.easy-step-head h2 {
    margin: 0 0 4px;
    font-size: 20px
}

.easy-step-head p {
    margin: 0;
    color: #718096
}

.control-type-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 10px
}

.control-type-card {
    appearance: none;
    border: 1px solid #e1e8ef;
    background: #fff;
    border-radius: 14px;
    padding: 16px 12px;
    text-align: left;
    cursor: pointer;
    transition: .15s;
    min-height: 120px;
    color: #1d3146
}

.control-type-card:hover {
    border-color: #9ebcd3;
    box-shadow: 0 5px 16px rgba(15,45,70,.07)
}

.control-type-card.selected {
    border: 2px solid #12699f;
    background: #f2f9fd;
    box-shadow: 0 0 0 3px rgba(18,105,159,.08)
}

.type-card-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #edf5fb;
    color: #12699f;
    margin-bottom: 11px
}

.control-type-card strong {
    display: block;
    font-size: 13px;
    line-height: 1.35
}

.control-type-card small {
    display: block;
    color: #7b8b9d;
    font-size: 11px;
    margin-top: 6px
}

.easy-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 26px
}

.easy-final>div {
    display: grid;
    grid-template-columns: 42px auto;
    column-gap: 12px
}

.easy-final h2 {
    margin: 0;
    font-size: 18px
}

.easy-final p {
    grid-column: 2;
    margin: 5px 0 0;
    color: #718096
}

.easy-ready {
    grid-row: 1/3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eaf8ef;
    color: #168447;
    font-weight: 900
}

.simple-case-head {
    padding: 20px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px
}

.case-number {
    font-size: 11px;
    letter-spacing: .09em;
    font-weight: 800;
    color: #12699f
}

.simple-case-head h2 {
    margin: 4px 0 4px;
    font-size: 21px
}

.simple-case-head p {
    margin: 0;
    color: #728295
}

.simple-head-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

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

.command-card {
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 15px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center
}

.command-card>span {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #edf5fb;
    color: #155f96
}

.command-card small,.command-card em {
    display: block;
    color: #78889a;
    font-style: normal;
    font-size: 11px
}

.command-card strong {
    display: block;
    font-size: 14px;
    margin: 2px 0
}

.command-card.needs {
    border-color: #f1c6c4;
    background: #fffafa
}

.command-card.needs>span {
    background: #fff0f0;
    color: #b42318
}

.command-card.done>span,.command-card.approved>span {
    background: #ebf8ef;
    color: #168447
}

.command-card.returned>span {
    background: #fff7e6;
    color: #a96800
}

.simple-tabs {
    display: flex;
    gap: 5px;
    padding: 5px;
    background: #eaf0f5;
    border-radius: 12px;
    margin: 15px 0;
    overflow: auto
}

.simple-tabs button {
    border: 0;
    background: transparent;
    padding: 10px 15px;
    border-radius: 9px;
    white-space: nowrap;
    color: #516579;
    font-weight: 700;
    cursor: pointer
}

.simple-tabs button.active {
    background: #fff;
    color: #123e64;
    box-shadow: 0 2px 8px rgba(20,45,70,.08)
}

.simple-tabs button b {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #c93737;
    color: #fff;
    margin-left: 4px;
    font-size: 10px
}

.simple-case-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 285px;
    gap: 16px;
    align-items: start
}

.simple-panel {
    display: none
}

.simple-panel.active {
    display: block
}

.case-tools {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 92px
}

.case-tools .card {
    padding: 16px
}

.case-tools h3 {
    margin: 0 0 11px;
    font-size: 14px
}

.case-tools form {
    display: grid;
    gap: 8px
}

.case-tools select,.case-tools input,.case-tools textarea {
    width: 100%
}

.side-big {
    font-weight: 800;
    color: #173b5e;
    font-size: 18px
}

.case-tools details {
    border-top: 1px solid #edf1f5;
    margin-top: 11px;
    padding-top: 9px
}

.case-tools summary {
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    color: #176492
}

.decision-box {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border-radius: 13px;
    background: #f1f8fc;
    border: 1px solid #d4e8f5
}

.decision-box>span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e0eff9;
    color: #12699f
}

.decision-box.required {
    background: #eef9f2;
    border-color: #d0ead8
}

.decision-box.required>span {
    background: #dff2e6;
    color: #168447
}

.decision-box strong {
    display: block;
    font-size: 15px
}

.decision-box p {
    margin: 4px 0 0;
    color: #607487;
    line-height: 1.55
}

.summary-facts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: #e8edf2;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 14px
}

.summary-facts>div {
    background: #fff;
    padding: 14px
}

.summary-facts span {
    display: block;
    color: #7c8c9e;
    font-size: 11px
}

.summary-facts strong {
    display: block;
    margin-top: 3px;
    font-size: 13px
}

.next-step-list {
    display: grid;
    gap: 9px
}

.next-step {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 20px;
    align-items: center;
    text-align: left;
    gap: 11px;
    border: 1px solid #dce5ec;
    background: #fff;
    border-radius: 13px;
    padding: 13px;
    cursor: pointer;
    color: inherit
}

.next-step>span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eaf4fb;
    color: #13689e;
    font-weight: 800
}

.next-step strong,.next-step small {
    display: block
}

.next-step small {
    color: #75869a;
    margin-top: 3px
}

.next-step.success {
    background: #f1fbf4;
    border-color: #d2ead9
}

.next-step.success>span {
    background: #dff3e5;
    color: #168447
}

.next-step.warning {
    background: #fff9ed;
    border-color: #f1dfb5
}

.requirement-list {
    display: grid
}

.requirement-row {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 11px;
    padding: 12px 4px;
    border-bottom: 1px solid #edf1f5
}

.requirement-row:last-child {
    border-bottom: 0
}

.req-state {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800
}

.requirement-row.present .req-state {
    background: #e6f7eb;
    color: #168447
}

.requirement-row.missing .req-state {
    background: #fff0f0;
    color: #b42318
}

.requirement-row.optional .req-state {
    background: #f1f4f6;
    color: #7b8794
}

.requirement-row strong,.requirement-row small {
    display: block
}

.requirement-row small {
    color: #7b8998;
    margin-top: 3px
}

.progress-pill {
    font-weight: 800;
    color: #0f649b;
    background: #edf7fc;
    padding: 6px 10px;
    border-radius: 15px
}

.check-scope-title {
    font-size: 12px;
    letter-spacing: .07em;
    color: #50667b;
    background: #f6f8fa;
    padding: 9px 12px;
    border-radius: 8px;
    margin: 15px 0 5px
}

.easy-check {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid #edf1f5;
    cursor: pointer
}

.easy-check>input {
    position: absolute;
    opacity: 0
}

.check-box {
    width: 22px;
    height: 22px;
    border: 2px solid #bdc9d3;
    border-radius: 6px;
    margin-top: 2px
}

.easy-check>input:checked+.check-box {
    background: #168447;
    border-color: #168447;
    box-shadow: inset 0 0 0 4px #fff
}

.easy-check strong,.easy-check small {
    display: block
}

.easy-check small {
    color: #77889a;
    margin: 3px 0 7px
}

.easy-check input[name^="note"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e3e8ed;
    background: #fafbfc;
    border-radius: 8px
}

.opinion-choice {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 14px
}

.opinion-choice input {
    display: none
}

.opinion-choice span {
    display: block;
    padding: 12px;
    border: 2px solid transparent;
    border-radius: 10px;
    text-align: center;
    font-weight: 800;
    cursor: pointer
}

.opinion-green {
    background: #edf9f1;
    color: #167943
}

.opinion-yellow {
    background: #fff7e8;
    color: #9b6508
}

.opinion-red {
    background: #fff0f0;
    color: #a92d29
}

.opinion-choice input:checked+span {
    border-color: currentColor
}

.danger-outline {
    border-color: #f0c7c5
}

.history-line {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr);
    gap: 9px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f5
}

.history-line.compact {
    padding: 9px 0
}

.history-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2275a8;
    margin-top: 5px
}

.history-line small {
    display: block;
    color: #7a8999;
    margin-top: 2px
}

.history-line p {
    margin: 7px 0 0
}

.participant-line {
    padding: 7px 0;
    border-bottom: 1px solid #edf1f5
}

.participant-line strong,.participant-line small {
    display: block
}

.participant-line small {
    color: #7b8998
}

.catalog-intro {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    padding: 25px
}

.catalog-intro h2 {
    margin: 4px 0 6px
}

.catalog-intro p {
    max-width: 760px;
    color: #6e7f91;
    line-height: 1.6
}

.catalog-year {
    min-width: 145px;
    padding: 15px;
    border-radius: 14px;
    background: #f0f7fb;
    text-align: center
}

.catalog-year small,.catalog-year span {
    display: block;
    color: #6f8194
}

.catalog-year strong {
    display: block;
    font-size: 30px;
    color: #124d78
}

.limit-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.limit-card {
    padding: 16px;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    gap: 10px
}

.limit-card>span {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #edf5fb;
    color: #12699f;
    display: grid;
    place-items: center
}

.limit-card small,.limit-card em {
    display: block;
    color: #76869a;
    font-style: normal
}

.limit-card strong {
    display: block;
    font-size: 18px;
    margin: 4px 0
}

.limit-card details {
    grid-column: 2
}

.catalog-list {
    display: grid;
    gap: 9px
}

.catalog-row {
    display: grid;
    grid-template-columns: 45px minmax(0,1fr) auto;
    gap: 13px;
    padding: 16px
}

.catalog-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #edf5fb;
    color: #12699f;
    display: grid;
    place-items: center
}

.catalog-main>strong {
    font-size: 14px
}

.catalog-main>small {
    display: block;
    color: #6f8194;
    margin-top: 2px
}

.catalog-main>p {
    margin: 6px 0;
    color: #596f82;
    font-size: 12px
}

.catalog-meta {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.catalog-meta span {
    background: #f4f7f9;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 10px;
    color: #53697c
}

.catalog-edit {
    min-width: 100px
}

.catalog-edit form {
    display: grid;
    gap: 7px;
    margin-top: 8px
}

.catalog-edit label {
    font-size: 11px
}

.admin-shortcuts {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px
}

.admin-shortcuts h3 {
    margin: 0 0 3px
}

.admin-shortcuts p {
    margin: 0;
    color: #718096
}

.report-shortcuts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.shortcut-card {
    padding: 18px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 20px;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none
}

.shortcut-card>span {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #edf5fb;
    color: #12699f;
    display: grid;
    place-items: center
}

.shortcut-card strong,.shortcut-card small {
    display: block
}

.shortcut-card small {
    color: #74869a;
    margin-top: 3px
}

@media(max-width: 1100px) {
    .control-type-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .case-command-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .simple-case-layout {
        grid-template-columns: 1fr
    }

    .case-tools {
        position: static;
        grid-template-columns: repeat(2,1fr)
    }

    .easy-kpis {
        grid-template-columns: repeat(2,1fr)
    }

    .home-grid {
        grid-template-columns: 1fr
    }

    .limit-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width: 700px) {
    .welcome-strip,.easy-final,.simple-case-head,.catalog-intro,.admin-shortcuts {
        display:block
    }

    .welcome-strip .btn,.easy-final .btn {
        margin-top: 16px;
        width: 100%;
        justify-content: center
    }

    .easy-kpis,.case-command-grid,.case-tools,.limit-grid,.report-shortcuts {
        grid-template-columns: 1fr
    }

    .control-type-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .control-type-card {
        min-height: 105px
    }

    .summary-facts {
        grid-template-columns: 1fr 1fr
    }

    .requirement-row {
        grid-template-columns: 30px minmax(0,1fr)
    }

    .requirement-row>.badge,.requirement-row>.btn {
        grid-column: 2;
        width: max-content
    }

    .opinion-choice {
        grid-template-columns: 1fr
    }

    .simple-head-actions {
        margin-top: 12px;
        justify-content: flex-start
    }

    .catalog-row {
        grid-template-columns: 42px minmax(0,1fr)
    }

    .catalog-edit {
        grid-column: 2
    }

    .easy-queue-row {
        grid-template-columns: 38px minmax(0,1fr)
    }

    .queue-reason {
        grid-column: 2;
        text-align: left
    }

    .page-content {
        padding-left: 12px;
        padding-right: 12px
    }
}

.detailed-review {
    margin-top: 14px;
    padding: 0;
    overflow: hidden
}

.detailed-review>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px
}

.detailed-review>summary::-webkit-details-marker {
    display: none
}

.detailed-review>summary strong,.detailed-review>summary small {
    display: block
}

.detailed-review>summary small {
    color: #77889a;
    margin-top: 3px
}

.detailed-review>summary>span {
    font-size: 12px;
    color: #12699f;
    font-weight: 800
}

.detailed-review[open]>summary {
    border-bottom: 1px solid #e7edf2;
    background: #f8fafc
}

.detailed-review>form {
    padding: 18px
}

.detailed-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.detail-field {
    padding: 12px;
    border: 1px solid #e4e9ee;
    border-radius: 11px;
    background: #fbfcfd
}

.detail-field label {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 700;
    color: #43596c;
    margin-bottom: 7px
}

.detail-field label b {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #eaf3f9;
    color: #145f91;
    margin-right: 5px
}

.detail-field input,.detail-field textarea {
    width: 100%;
    background: #fff
}

.detail-field textarea {
    min-height: 72px
}

.approval-mini-list {
    display: grid;
    gap: 7px;
    margin-top: 13px;
    border-top: 1px solid #edf1f5;
    padding-top: 11px
}

.approval-mini-list>div {
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.approval-mini-list strong {
    font-size: 12px
}

.approval-mini-list small {
    color: #76889a
}

@media(max-width: 700px) {
    .detailed-form-grid {
        grid-template-columns:1fr
    }

    .approval-mini-list>div {
        display: block
    }
}

.case-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px
}

.mini-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.mini-stats span {
    background: #fff;
    border: 1px solid #e2e9ef;
    border-radius: 20px;
    padding: 8px 12px;
    color: #65788b;
    font-size: 12px
}

.mini-stats b {
    color: #183d5d;
    font-size: 14px;
    margin-right: 3px
}

.mini-stats .red {
    background: #fff5f5;
    color: #a52b2b;
    border-color: #f1d1d1
}

.mini-stats .red b {
    color: #b42318
}

.mini-stats .amber {
    background: #fff9ec;
    color: #936409;
    border-color: #f0e0b9
}

.compact-filter {
    padding: 14px;
    margin-bottom: 14px
}

.easy-case-table .table-primary {
    margin-top: 3px
}

.easy-case-table td {
    vertical-align: middle
}

@media(max-width: 700px) {
    .case-list-head {
        display:block
    }

    .case-list-head .btn {
        margin-top: 12px;
        width: 100%;
        justify-content: center
    }

    .easy-case-table {
        overflow: auto
    }
}

.calendar-add {
    display: grid;
    grid-template-columns: 180px minmax(0,1fr) auto;
    gap: 9px
}

.calendar-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 13px
}

.calendar-chip {
    display: flex;
    align-items: center;
    background: #f4f7f9;
    border: 1px solid #e2e8ed;
    border-radius: 18px;
    padding: 5px 6px 5px 10px
}

.calendar-chip span {
    font-size: 11px;
    color: #52687a
}

.calendar-chip button {
    border: 0;
    background: #fff;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    margin-left: 5px;
    cursor: pointer;
    color: #9b3131
}

@media(max-width: 700px) {
    .calendar-add {
        grid-template-columns:1fr
    }
}

.delegation-row {
    padding: 9px 0;
    border-top: 1px solid #edf1f5;
    margin-top: 10px
}

.delegation-row strong,.delegation-row small {
    display: block
}

.delegation-row small {
    color: #74869a;
    margin-top: 3px
}

/* =========================================================
   V6 PRODUCTION & ENTERPRISE — task first, security first
   ========================================================= */
.sidebar-user-context {
    margin: 10px 16px 0;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.075);
    display: flex;
    align-items: center;
    gap: 9px
}

.sidebar-user-context .ui-icon {
    width: 16px;
    color: #7fb5ef
}

.sidebar-user-context strong {
    display: block;
    font-size: 10px;
    color: #e8f0f6
}

.sidebar-user-context small {
    display: block;
    font-size: 8.5px;
    color: #7f97aa;
    margin-top: 2px
}

.v6-welcome {
    background: linear-gradient(135deg,#0e2b46 0%,#163f62 70%,#1d5078 100%);
    border: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 23px 25px;
    overflow: hidden;
    position: relative
}

.v6-welcome:after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    right: -110px;
    top: -120px;
    box-shadow: 0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018)
}

.v6-welcome>* {
    position: relative;
    z-index: 1
}

.v6-welcome h2 {
    margin: 0;
    font-size: 22px
}

.v6-welcome p {
    margin: 6px 0 0;
    color: #bdd0df;
    max-width: 700px;
    font-size: 12px
}

.v6-welcome-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.v6-welcome-actions .btn.outline {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #fff
}

.today-strip {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1.1fr repeat(4,minmax(0,1fr));
    gap: 10px
}

.today-title {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    gap: 11px
}

.today-title .ui-icon {
    color: #1e6fcc
}

.today-title strong {
    display: block;
    font-size: 12px
}

.today-title span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    margin-top: 2px
}

.today-strip>a,.today-strip>div:not(.today-title) {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 14px;
    transition: .17s
}

.today-strip>a:hover {
    border-color: #bfcfdd;
    transform: translateY(-1px);
    box-shadow: var(--shadow)
}

.today-strip b {
    display: block;
    font-size: 21px;
    line-height: 1;
    color: #153a5b
}

.today-strip small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px
}

.v6-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,.72fr);
    gap: 15px;
    margin-top: 15px
}

.v6-side-stack {
    display: grid;
    gap: 15px;
    align-content: start
}

.priority-queue {
    display: grid;
    gap: 8px
}

.priority-row {
    border: 1px solid #e6ecf1;
    border-radius: 12px;
    padding: 11px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    transition: .16s
}

.priority-row:hover {
    background: #f8fbfd;
    border-color: #cedbe6
}

.priority-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #edf5ff;
    color: #2268b2;
    display: grid;
    place-items: center
}

.priority-icon .ui-icon {
    width: 17px
}

.priority-copy {
    min-width: 0
}

.priority-copy strong {
    display: block;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.priority-copy small {
    display: block;
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px
}

.priority-badges {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap
}

.priority-next {
    font-size: 9px;
    color: #1e63a6;
    font-weight: 750;
    white-space: nowrap
}

.big-shortcuts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

.big-shortcuts a {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    display: flex;
    gap: 9px;
    align-items: center
}

.big-shortcuts a:hover {
    background: #f8fbfd;
    border-color: #cbd8e3
}

.big-shortcuts .ui-icon {
    color: #1d68b4;
    width: 18px
}

.big-shortcuts strong {
    font-size: 10.5px;
    display: block
}

.big-shortcuts small {
    display: block;
    color: var(--muted);
    font-size: 8.5px;
    margin-top: 1px
}

.security-mini {
    display: flex;
    align-items: center;
    gap: 11px
}

.security-mini-icon {
    width: 39px;
    height: 39px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #edf8f2;
    color: #19754e
}

.security-mini-icon.warn {
    background: #fff2e2;
    color: #a75e13
}

.security-mini h3 {
    margin: 0;
    font-size: 12px
}

.security-mini p {
    margin: 3px 0 0;
    font-size: 9px;
    color: var(--muted)
}

.v6-kpis {
    margin-top: 15px
}

.task-hero {
    background: linear-gradient(135deg,#fff,#f8fbfe);
    border: 1px solid #dce7ef;
    border-radius: 18px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.task-main h2 {
    margin: 0;
    font-size: 20px
}

.task-main p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px
}

.task-hero-count {
    min-width: 100px;
    text-align: center;
    border-left: 1px solid var(--line);
    padding-left: 20px
}

.task-hero-count strong {
    display: block;
    font-size: 31px;
    color: #164c78;
    line-height: 1
}

.task-hero-count span {
    display: block;
    font-size: 9px;
    color: var(--muted);
    margin-top: 5px
}

.task-filter-pills {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 14px 0
}

.task-filter-pills button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 99px;
    padding: 7px 11px;
    color: #617487;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer
}

.task-filter-pills button.active,.task-filter-pills button:hover {
    background: #153b5d;
    color: #fff;
    border-color: #153b5d
}

.task-board {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) minmax(270px,.7fr);
    gap: 15px
}

.task-list-card {
    padding: 0;
    overflow: hidden
}

.task-list {
    display: grid
}

.task-row {
    padding: 13px 15px;
    border-bottom: 1px solid #edf1f4;
    display: grid;
    grid-template-columns: 5px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center
}

.task-row:last-child {
    border-bottom: 0
}

.task-priority {
    align-self: stretch;
    border-radius: 5px;
    background: #4a8fcd
}

.task-row.urgent .task-priority {
    background: #ce4f58
}

.task-row.warning .task-priority {
    background: #d58c32
}

.task-row.ready .task-priority {
    background: #2a9363
}

.task-row:hover {
    background: #fafcfd
}

.task-row strong {
    font-size: 11px
}

.task-row p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 9px
}

.task-tags {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap
}

.task-next {
    white-space: nowrap;
    text-align: right
}

.task-next small {
    display: block;
    color: var(--muted);
    font-size: 8px;
    margin-bottom: 4px
}

.task-side {
    display: grid;
    gap: 15px;
    align-content: start
}

.mini-task {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    margin-top: 7px
}

.mini-task strong {
    font-size: 10px
}

.mini-task small {
    display: block;
    color: var(--muted);
    font-size: 8.5px;
    margin-top: 2px
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px
}

.security-state {
    display: flex;
    gap: 11px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: #f9fbfc
}

.security-state .health-dot {
    flex: 0 0 auto
}

.security-check-list {
    display: grid;
    gap: 7px;
    margin-top: 10px
}

.security-check-list>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eef2f5;
    font-size: 10px
}

.security-check-list>div:last-child {
    border-bottom: 0
}

.setup-secret {
    background: #0d2236;
    color: #d8e6f1;
    border-radius: 12px;
    padding: 12px;
    margin: 9px 0;
    word-break: break-all;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 10px
}

.otp-input {
    font-size: 23px!important;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 800;
    max-width: 210px
}

.token-inline {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap
}

.token-reveal {
    background: #0d2236;
    color: #e5f1fa;
    border-radius: 12px;
    padding: 13px;
    word-break: break-all;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 10px;
    margin: 10px 0
}

.copy-ok {
    outline: 2px solid #5ab584!important;
    outline-offset: 2px
}

.legislation-layout {
    display: grid;
    grid-template-columns: minmax(290px,.72fr) minmax(0,1.4fr);
    gap: 15px
}

.legislation-list {
    display: grid;
    gap: 8px
}

.legislation-row {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: start
}

.legislation-row:hover {
    background: #fafcfd
}

.legislation-row h3 {
    font-size: 11.5px;
    margin: 0
}

.legislation-row p {
    margin: 4px 0;
    color: var(--muted);
    font-size: 9px
}

.legislation-type {
    display: inline-flex;
    border-radius: 99px;
    background: #edf4fa;
    color: #31638d;
    padding: 4px 7px;
    font-size: 8px;
    font-weight: 800
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px
}

.health-item {
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 13px;
    background: #fff
}

.health-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.health-item strong {
    display: block;
    font-size: 10.5px
}

.health-item p {
    font-size: 8.8px;
    color: var(--muted);
    margin: 5px 0 0;
    word-break: break-word
}

.health-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2d9c68;
    box-shadow: 0 0 0 4px #e8f7ef
}

.health-dot.warn {
    background: #d38a31;
    box-shadow: 0 0 0 4px #fff2df
}

.health-dot.bad {
    background: #c84d57;
    box-shadow: 0 0 0 4px #fdebed
}

.storage-number {
    font-size: 25px;
    font-weight: 850;
    color: #143b5c;
    margin-top: 6px
}

.storage-bar {
    height: 8px;
    background: #edf1f4;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 8px
}

.storage-bar span {
    display: block;
    height: 100%;
    background: #2c77c6;
    border-radius: inherit
}

.settings-sections {
    display: grid;
    gap: 15px
}

.settings-section {
    padding: 20px
}

.settings-section-title {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f4
}

.settings-section-title>span {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #edf5fc;
    color: #1f65a4;
    display: grid;
    place-items: center
}

.settings-section-title .ui-icon {
    width: 18px
}

.settings-section-title h2 {
    font-size: 14px;
    margin: 0
}

.settings-section-title p {
    font-size: 9px;
    color: var(--muted);
    margin: 2px 0 0
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f4
}

.toggle-row:last-child {
    border-bottom: 0
}

.toggle-row strong {
    font-size: 10.5px
}

.toggle-row small {
    font-size: 8.5px;
    color: var(--muted);
    display: block;
    margin-top: 2px
}

.user-role-help {
    display: grid;
    gap: 7px
}

.user-role-help>div {
    padding: 9px 10px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px
}

.user-role-help strong {
    font-size: 9.5px
}

.user-role-help small {
    display: block;
    color: var(--muted);
    font-size: 8px;
    margin-top: 1px
}

.user-row-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

.password-reset-box {
    padding: 10px;
    border-radius: 10px;
    background: #fff4df;
    border: 1px solid #f1d8ab;
    font-size: 9px
}

.document-drop-zone {
    border: 1.5px dashed #c7d5e1!important;
    border-radius: 11px!important;
    padding: 9px!important;
    background: #f9fbfd;
    transition: .16s
}

.document-drop-zone.dragover {
    border-color: #2a73bd!important;
    background: #edf6ff;
    box-shadow: inset 0 0 0 1px #2a73bd22
}

.document-drop-zone input[type=file] {
    width: 100%
}

.document-drop-zone:after {
    content: "Dosyayı buraya sürükleyip bırakabilirsiniz";
    display: block;
    font-size: 8px;
    color: #8798a8;
    margin-top: 5px
}

.doc-validation-form {
    display: grid;
    gap: 5px;
    min-width: 180px
}

.doc-validation-form textarea {
    min-height: 46px;
    font-size: 9px
}

.v6-status-ribbon {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dce8f1;
    background: #f7fbfe;
    border-radius: 12px;
    padding: 10px 12px
}

.v6-status-ribbon strong {
    font-size: 10.5px
}

.v6-status-ribbon small {
    font-size: 8.5px;
    color: var(--muted)
}

@media(max-width: 1180px) {
    .today-strip {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .today-title {
        grid-column: 1/-1
    }

    .v6-dashboard-grid,.task-board,.legislation-layout {
        grid-template-columns: 1fr
    }

    .health-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width: 760px) {
    .v6-welcome {
        align-items:flex-start;
        flex-direction: column;
        padding: 18px
    }

    .v6-welcome-actions {
        width: 100%
    }

    .v6-welcome-actions .btn {
        flex: 1
    }

    .today-strip {
        grid-template-columns: 1fr 1fr
    }

    .today-title {
        grid-column: 1/-1
    }

    .task-hero {
        align-items: flex-start
    }

    .task-hero-count {
        border-left: 0;
        padding-left: 0
    }

    .task-row {
        grid-template-columns: 4px minmax(0,1fr)
    }

    .task-next {
        grid-column: 2;
        text-align: left
    }

    .security-grid,.health-grid {
        grid-template-columns: 1fr
    }

    .big-shortcuts {
        grid-template-columns: 1fr
    }

    .legislation-row {
        grid-template-columns: 1fr
    }

    .settings-section {
        padding: 15px
    }
}

@media print {
    .v6-welcome-actions,.task-filter-pills,.topbar,.sidebar,.app-footer {
        display: none!important
    }

    .main {
        margin: 0!important;
        width: 100%!important
    }

    .page-content {
        padding: 0!important
    }

    .card {
        box-shadow: none!important
    }
}

/* ===== V7 Doküman & Karar Merkezi ===== */
.nav-open-dot {
    margin-left: auto;
    color: #6ea8ff;
    font-size: 18px
}

.nav-submenu {
    display: grid;
    gap: 2px;
    margin: -4px 10px 8px 46px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,.13)
}

.nav-submenu a {
    color: #9eb0c8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
    padding: 6px 8px;
    border-radius: 7px
}

.nav-submenu a:hover,.nav-submenu a.active {
    color: #fff;
    background: rgba(255,255,255,.08)
}

.doc-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 24px 26px;
    background: linear-gradient(135deg,#fff 0%,#f5f9ff 100%);
    border-color: #dbe7f5
}

.doc-hero h2 {
    font-size: 25px;
    margin: 5px 0 7px
}

.doc-hero p {
    margin: 0;
    color: var(--muted)
}

.hero-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap
}

.hero-actions form {
    margin: 0
}

.quick-doc-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
    margin-top: 15px
}

.quick-doc-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 4px 16px rgba(19,42,71,.04);
    transition: .18s
}

.quick-doc-card:hover {
    transform: translateY(-2px);
    border-color: #b9d0ec;
    box-shadow: 0 10px 24px rgba(19,42,71,.09)
}

.quick-doc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #edf5ff;
    color: #1b5cad;
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.quick-doc-icon .ui-icon {
    width: 20px
}

.quick-doc-card>div {
    min-width: 0;
    flex: 1
}

.quick-doc-card strong,.quick-doc-card small {
    display: block
}

.quick-doc-card strong {
    font-size: 13px
}

.quick-doc-card small {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px
}

.quick-doc-card>.ui-icon {
    width: 15px;
    color: #a2adba
}

.doc-tools-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 18px
}

.tool-card {
    text-decoration: none;
    color: var(--text);
    padding: 17px
}

.tool-card b,.tool-card span {
    display: block
}

.tool-card b {
    font-size: 14px
}

.tool-card span {
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
    line-height: 1.45
}

.tool-card:hover {
    border-color: #bcd0e7;
    background: #fbfdff
}

.doc-type-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.doc-type-card {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    text-decoration: none;
    color: var(--text);
    padding: 20px;
    min-height: 112px
}

.doc-type-card>span {
    width: 42px;
    height: 42px;
    background: #edf5ff;
    color: #1c5dad;
    border-radius: 12px;
    display: grid;
    place-items: center
}

.doc-type-card>span .ui-icon {
    width: 21px
}

.doc-type-card b,.doc-type-card small {
    display: block
}

.doc-type-card b {
    font-size: 15px
}

.doc-type-card small {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45
}

.doc-type-card:hover {
    border-color: #adc9e8;
    box-shadow: 0 10px 25px rgba(18,52,92,.08)
}

.wizard-strip {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    background: #eef3f8;
    border-radius: 12px;
    padding: 4px;
    overflow: auto
}

.wizard-strip span {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 9px 12px;
    border-radius: 9px;
    color: #718095;
    font-size: 12px;
    font-weight: 750
}

.wizard-strip .active {
    background: #fff;
    color: #173e75;
    box-shadow: 0 2px 7px rgba(17,42,72,.08)
}

.form-card {
    padding: 22px
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line)
}

.inline-fields {
    display: flex;
    gap: 8px
}

.inline-fields>* {
    min-width: 0
}

.check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650
}

.check-line input {
    width: auto!important
}

.document-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 22px
}

.document-titlebar h2 {
    margin: 8px 0 4px;
    font-size: 21px
}

.document-titlebar p {
    margin: 0;
    color: var(--muted)
}

.doc-no-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.doc-no {
    font-weight: 850;
    color: #173e75;
    letter-spacing: .02em
}

.document-workspace {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 16px;
    margin-top: 16px
}

.document-main,.document-side {
    display: grid;
    gap: 14px;
    align-content: start
}

.sticky-card {
    position: sticky;
    top: 94px
}

.official-preview {
    border: 1px solid #d7dfe9;
    border-radius: 8px;
    padding: 22px 26px;
    background: #fff;
    min-height: 380px;
    font-family: Georgia,"Times New Roman",serif;
    color: #161d27
}

.official-preview-head {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border-bottom: 1px solid #283343;
    padding-bottom: 12px;
    margin-bottom: 16px
}

.official-preview-head strong {
    display: block;
    line-height: 1.5
}

.official-preview-head span {
    text-align: right;
    font-family: Arial,sans-serif;
    font-size: 11px;
    color: #48566b
}

.official-preview h4 {
    text-align: center;
    margin: 13px 0 20px;
    font-size: 15px
}

.doc-body {
    line-height: 1.75;
    font-size: 14px
}

.doc-body p {
    margin: 0 0 12px
}

.edit-version summary,.create-panel summary {
    cursor: pointer;
    font-weight: 800;
    color: #173e75
}

.meta-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.attachment-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 9px;
    align-items: end;
    margin-bottom: 14px
}

.attachment-list {
    display: grid;
    gap: 8px
}

.attachment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px
}

.attachment-no {
    font-size: 11px;
    font-weight: 850;
    background: #edf4fb;
    color: #225b98;
    padding: 6px 8px;
    border-radius: 7px
}

.attachment-row>div {
    min-width: 0;
    flex: 1
}

.attachment-row b,.attachment-row small {
    display: block
}

.attachment-row small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
    word-break: break-all
}

.timeline {
    display: grid;
    gap: 0
}

.timeline-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 9px;
    padding: 7px 0
}

.timeline-item>span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3778c6;
    margin-top: 5px;
    box-shadow: 0 0 0 4px #e8f2ff
}

.timeline-item b,.timeline-item small {
    display: block
}

.timeline-item small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px
}

.approval-steps {
    display: grid;
    gap: 12px;
    margin-top: 12px
}

.approval-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 9px;
    position: relative
}

.approval-step>span {
    width: 27px;
    height: 27px;
    border: 1px solid #ccd7e4;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 850;
    background: #fff;
    color: #697b90
}

.approval-step.done>span {
    background: #e8f8ef;
    color: #187145;
    border-color: #bfe7d0
}

.approval-step.active>span {
    background: #1c5ca5;
    color: #fff;
    border-color: #1c5ca5
}

.approval-step b,.approval-step small {
    display: block
}

.approval-step small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px
}

.approval-form {
    margin-top: 8px;
    display: grid;
    gap: 7px
}

.approval-form textarea {
    min-height: 55px
}

.approval-form>div {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

.mini-assign {
    display: flex;
    gap: 5px;
    margin-top: 7px
}

.mini-assign select {
    min-width: 0;
    flex: 1;
    padding: 6px
}

.qr-mini {
    display: grid;
    place-items: center;
    margin: 8px 0
}

.qr-mini svg {
    max-width: 170px;
    width: 100%;
    height: auto
}

.document-side code {
    display: block;
    font-size: 10px;
    word-break: break-all;
    padding: 7px;
    background: #f3f6fa;
    border-radius: 7px
}

.linked-docs {
    display: grid;
    gap: 6px
}

.linked-docs a {
    display: block;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px
}

.linked-docs b,.linked-docs small {
    display: block
}

.linked-docs small {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px
}

.link-form {
    display: grid;
    gap: 6px;
    margin-top: 10px
}

.danger-zone {
    border-color: #f0c7c7;
    background: #fffafa
}

.full {
    width: 100%
}

.bulk-toolbar {
    display: flex;
    gap: 8px;
    margin: 10px 0
}

.archive-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px
}

.archive-result {
    display: block;
    text-decoration: none;
    color: var(--text);
    padding: 10px 0;
    border-bottom: 1px solid var(--line)
}

.archive-result:last-child {
    border-bottom: 0
}

.archive-result b,.archive-result span,.archive-result small {
    display: block
}

.archive-result span {
    font-size: 13px;
    margin-top: 2px
}

.archive-result small {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px
}

.changed-row {
    background: #fff9ed
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px
}

.compare-body {
    max-height: 520px;
    overflow: auto;
    white-space: pre-wrap
}

.template-help code {
    background: #edf3f9;
    padding: 2px 5px;
    border-radius: 5px
}

.template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.template-card summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer
}

.template-card summary h3 {
    margin: 6px 0 2px
}

.template-edit {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.nc-inline {
    display: grid;
    grid-template-columns: 120px 150px 150px 120px 120px auto;
    gap: 5px;
    min-width: 640px
}

.nc-inline input,.nc-inline select {
    padding: 6px;
    font-size: 11px
}

.committee-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.committee-card h3 {
    margin: 10px 0 6px
}

.committee-card p {
    color: var(--muted);
    font-size: 13px
}

.committee-head {
    display: flex;
    justify-content: space-between
}

.committee-meta {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    margin: 12px 0
}

.committee-meta span {
    background: #f5f8fb;
    border-radius: 8px;
    padding: 8px;
    font-size: 11px
}

.committee-meta b {
    display: block;
    color: #6c7c90;
    font-size: 9px;
    text-transform: uppercase
}

.committee-members {
    font-size: 12px;
    line-height: 1.6;
    color: #46566a
}

.member-form {
    display: grid;
    grid-template-columns: 1fr 120px auto auto;
    gap: 6px;
    align-items: center;
    margin-top: 8px
}

.meeting-list {
    display: grid;
    gap: 14px
}

.meeting-head {
    display: flex;
    justify-content: space-between;
    gap: 15px
}

.meeting-head h3 {
    margin: 6px 0 3px
}

.meeting-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px
}

.agenda-list {
    margin-top: 15px;
    border-top: 1px solid var(--line)
}

.agenda-row {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto minmax(0,280px);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line)
}

.agenda-no {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: #edf4fb;
    color: #205a97;
    display: grid;
    place-items: center;
    font-weight: 850
}

.agenda-main b,.agenda-main small {
    display: block
}

.agenda-main small {
    color: var(--muted);
    margin-top: 3px
}

.agenda-action summary {
    cursor: pointer;
    color: #1d5c9f;
    font-weight: 700;
    font-size: 12px
}

.agenda-action form {
    display: grid;
    gap: 5px;
    margin-top: 6px
}

.add-agenda summary {
    cursor: pointer;
    color: #1d5c9f;
    font-weight: 750;
    margin-top: 10px
}

.agenda-form {
    display: grid;
    grid-template-columns: 1fr 1fr 180px auto;
    gap: 7px;
    margin-top: 8px
}

.info-panel p {
    color: var(--muted);
    line-height: 1.55
}

.simple-flow {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap
}

.simple-flow span {
    background: #edf4fb;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750
}

.simple-flow i {
    font-style: normal;
    color: #8795a7
}

.doc-task-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 14px 0
}

/* A4 official print */
.official-sheet {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    color: #101820;
    padding: 18mm 18mm 16mm;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    font-family: "Times New Roman",Georgia,serif;
    font-size: 12pt
}

.print-letterhead {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    border-bottom: 1.2px solid #18212b;
    padding-bottom: 9px
}

.print-letterhead img {
    width: 62px;
    height: 62px;
    object-fit: contain
}

.print-letterhead strong,.print-letterhead span {
    display: block;
    line-height: 1.35
}

.print-letterhead span {
    font-size: 10pt
}

.print-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
    font-family: Arial,sans-serif;
    font-size: 9.5pt
}

.print-subject {
    margin-top: 7px;
    font-family: Arial,sans-serif;
    font-size: 9.5pt
}

.print-doc-title {
    text-align: center;
    font-size: 14pt;
    margin: 24px 0 20px;
    text-transform: uppercase
}

.print-body {
    font-size: 12pt;
    line-height: 1.65;
    text-align: justify;
    min-height: 120mm
}

.print-body p {
    margin: 0 0 12px
}

.print-signatures {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse
}

.print-signatures td {
    text-align: center;
    vertical-align: top;
    padding: 10px;
    border: 0;
    font-size: 10pt
}

.print-signatures small {
    color: #555
}

.print-verification {
    margin-top: 25px;
    border-top: 1px solid #aaa;
    padding-top: 9px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: Arial,sans-serif;
    font-size: 8.5pt
}

.print-qr svg {
    width: 82px;
    height: 82px
}

.print-verification small {
    word-break: break-all;
    color: #555
}

@media(max-width: 1250px) {
    .quick-doc-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .document-workspace {
        grid-template-columns: 1fr
    }

    .sticky-card {
        position: static
    }

    .doc-tools-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .nc-inline {
        grid-template-columns: 1fr 1fr;
        min-width: 360px
    }

    .agenda-row {
        grid-template-columns: 34px 1fr auto
    }

    .agenda-action {
        grid-column: 2/-1
    }

    .agenda-form {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 760px) {
    .doc-hero,.document-titlebar,.meeting-head {
        align-items:flex-start;
        flex-direction: column
    }

    .quick-doc-grid,.doc-type-grid,.doc-tools-grid,.template-grid,.committee-grid,.archive-related-grid,.compare-grid,.doc-task-strip {
        grid-template-columns: 1fr
    }

    .meta-edit-grid {
        grid-template-columns: 1fr
    }

    .attachment-form,.agenda-form,.member-form {
        grid-template-columns: 1fr
    }

    .committee-meta {
        grid-template-columns: 1fr 1fr
    }

    .agenda-row {
        grid-template-columns: 30px 1fr
    }

    .agenda-row>.badge {
        grid-column: 2
    }

    .agenda-action {
        grid-column: 2
    }

    .official-preview {
        padding: 16px
    }

    .official-preview-head {
        display: block;
        text-align: center
    }

    .official-preview-head span {
        display: block;
        text-align: center;
        margin-top: 8px
    }

    .official-sheet {
        width: 100%;
        min-height: auto;
        padding: 20px
    }

    .archive-filter .field {
        min-width: 100%
    }

    .inline-fields {
        flex-direction: column
    }
}

/* V7 final usability additions */
.readonly-field {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: #f7f9fc;
    color: #52647a;
    font-weight: 750
}

.archive-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: -4px 0 10px
}

.advanced-settings {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
    padding: 0 14px
}

.advanced-settings summary {
    cursor: pointer;
    padding: 13px 2px;
    font-weight: 800;
    color: #27405f
}

.advanced-settings[open] {
    padding-bottom: 14px
}

@media(max-width: 760px) {
    .archive-actions {
        justify-content:stretch
    }

    .archive-actions .btn {
        flex: 1;
        justify-content: center
    }
}

.print-annexes {
    margin: 22px 0 14px;
    font-size: 11px
}

.print-annexes>b {
    display: block;
    margin-bottom: 7px
}

.print-annexes table {
    width: 100%;
    border-collapse: collapse
}

.print-annexes th,.print-annexes td {
    border: 1px solid #c5ccd5;
    padding: 6px;
    text-align: left;
    vertical-align: top
}

.print-custom-footer {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #c6ccd4;
    text-align: center;
    font-size: 9px;
    color: #687588;
    line-height: 1.45
}

/* V7 document administration polish */
.meeting-status-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.meeting-status-form {
    display: flex;
    gap: 6px;
    align-items: center
}

.meeting-status-form select {
    min-height: 32px;
    padding: 5px 8px
}

.template-history {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line)
}

.template-history>summary {
    cursor: pointer;
    font-weight: 750;
    color: #32577e
}

.row-editor {
    position: relative
}

.row-editor>summary {
    list-style: none
}

.row-editor>summary::-webkit-details-marker {
    display: none
}

.row-editor-panel {
    position: absolute;
    right: 0;
    z-index: 20;
    width: min(440px,80vw);
    display: grid;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 14px;
    box-shadow: var(--shadow-lg);
    margin-top: 6px
}

.row-editor-panel textarea {
    min-height: 70px
}

.row-editor-panel .check-line {
    font-size: 11px
}

.nav-submenu {
    margin: 3px 0 7px 39px;
    padding-left: 9px;
    border-left: 1px solid rgba(255,255,255,.09);
    display: grid
}

.nav-submenu a {
    color: #7f96aa;
    font-size: 10.5px;
    padding: 6px 8px;
    border-radius: 7px
}

.nav-submenu a:hover,.nav-submenu a.active {
    color: #fff;
    background: rgba(255,255,255,.05)
}

.nav-open-dot {
    margin-left: auto;
    color: #6fa8f4
}

.sidebar-user-context {
    margin: 14px 16px 3px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    display: flex;
    gap: 9px;
    align-items: center;
    background: rgba(255,255,255,.025)
}

.sidebar-user-context strong,.sidebar-user-context small {
    display: block
}

.sidebar-user-context strong {
    font-size: 10.5px;
    color: #e7eef5
}

.sidebar-user-context small {
    font-size: 9px;
    color: #7690a6
}

.simple-nav .nav-section {
    padding-top: 15px
}

@media(max-width: 760px) {
    .meeting-status-box {
        justify-content:flex-start
    }

    .meeting-status-form {
        width: 100%
    }

    .meeting-status-form select {
        flex: 1
    }

    .row-editor-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 90px;
        width: auto;
        max-height: 75vh;
        overflow: auto
    }
}

/* =========================================================
   V8 — Kurumsal Operasyon & Kullanım Kolaylığı
   ========================================================= */
.doc-create-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    background: linear-gradient(135deg,#fff 0%,#f6f9fd 100%);
    padding: 24px
}

.doc-create-hero h2 {
    font-size: 25px;
    margin: 5px 0 5px
}

.doc-create-hero p {
    margin: 0;
    color: var(--muted);
    max-width: 720px
}

.doc-create-time {
    min-width: 140px;
    text-align: right
}

.doc-create-time strong,.doc-create-time span {
    display: block
}

.doc-create-time strong {
    font-size: 23px;
    color: #1e60bd
}

.doc-create-time span {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em
}

.v8-doc-types .doc-type-card {
    position: relative
}

.v8-doc-types .doc-type-card>i {
    margin-left: auto;
    font-style: normal;
    color: #9aacbd;
    font-size: 20px
}

.v8-doc-types .doc-type-card:hover>i {
    color: #1f6feb;
    transform: translateX(2px)
}

.v8-wizard {
    display: grid;
    gap: 14px
}

.v8-wizard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 21px
}

.v8-wizard-head h2 {
    margin: 4px 0 2px;
    font-size: 23px
}

.v8-wizard-head p {
    margin: 0;
    color: var(--muted)
}

.back-link {
    font-size: 10px;
    color: #55708a;
    font-weight: 750
}

.v8-wizard-progress {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.v8-wizard-progress button {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    color: #7a8998;
    cursor: pointer
}

.v8-wizard-progress button b {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #edf2f7;
    display: grid;
    place-items: center;
    font-size: 11px
}

.v8-wizard-progress button span {
    font-size: 10px;
    font-weight: 750
}

.v8-wizard-progress button.active {
    border-color: #b8d1ef;
    background: #f4f8fd;
    color: #1a507f
}

.v8-wizard-progress button.active b {
    background: #1f6feb;
    color: #fff
}

.v8-wizard-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 15px;
    align-items: start
}

.v8-wizard-main {
    display: grid;
    gap: 12px
}

.wizard-panel {
    display: none;
    min-height: 390px
}

.wizard-panel.active {
    display: block
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    position: sticky;
    bottom: 12px;
    z-index: 14;
    box-shadow: 0 12px 35px rgba(15,31,51,.08)
}

.v8-live-preview {
    position: sticky;
    top: 105px
}

.live-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 11px;
    margin-bottom: 12px
}

.live-preview-head small,.live-preview-head b {
    display: block
}

.live-preview-head small {
    font-size: 9px;
    color: #7f8fa0;
    letter-spacing: .08em
}

.live-preview-head b {
    font-size: 12px;
    margin-top: 2px
}

.mini-a4 {
    aspect-ratio: 210/297;
    background: #fff;
    border: 1px solid #d7dee7;
    box-shadow: 0 10px 24px #0c233a12;
    padding: 27px 24px;
    font-family: Georgia,"Times New Roman",serif;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.mini-letterhead {
    text-align: center;
    border-bottom: 1px solid #24384c;
    padding-bottom: 8px
}

.mini-letterhead strong,.mini-letterhead b,.mini-letterhead span {
    display: block
}

.mini-letterhead strong {
    font-size: 10px
}

.mini-letterhead b {
    font-size: 11px
}

.mini-letterhead span {
    font-size: 8px;
    margin-top: 3px
}

.mini-meta {
    display: flex;
    justify-content: space-between;
    font-family: Arial,sans-serif;
    font-size: 7px;
    margin-top: 10px
}

.mini-a4 h3 {
    text-align: center;
    font-size: 10px;
    margin: 18px 0 14px
}

.mini-body {
    font-size: 8px;
    line-height: 1.6;
    text-align: justify;
    flex: 1
}

.mini-body b {
    display: block;
    margin-bottom: 8px
}

.mini-sign {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    text-align: center;
    font-size: 7px;
    border-top: 1px solid #e1e5ea;
    padding-top: 13px
}

.upload-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.info-box {
    padding: 14px;
    border: 1px solid #dce8f5;
    border-radius: 12px;
    background: #f4f8fd
}

.info-box b {
    display: block;
    color: #254f7c
}

.info-box p {
    margin: 3px 0 0;
    color: #64788e;
    font-size: 11px
}

.wizard-review {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-bottom: 18px
}

.wizard-review>div {
    background: #f6f8fb;
    border: 1px solid #e5ebf2;
    padding: 11px;
    border-radius: 10px
}

.wizard-review small,.wizard-review b {
    display: block
}

.wizard-review small {
    font-size: 8px;
    color: #8795a5;
    letter-spacing: .08em
}

.wizard-review b {
    font-size: 11px;
    margin-top: 3px
}

.approval-preview {
    display: grid;
    gap: 7px;
    margin: 10px 0 18px
}

.approval-preview>div {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px
}

.approval-preview>div>span {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #eaf2ff;
    color: #1e60bd;
    font-weight: 850
}

.approval-preview b,.approval-preview small {
    font-size: 10px
}

.approval-preview small {
    color: var(--muted)
}

.template-designer-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg,#fff,#f6f9fd)
}

.template-designer-intro h2 {
    margin: 4px 0
}

.template-designer-intro p {
    margin: 0;
    color: var(--muted)
}

.token-cloud {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    max-width: 360px;
    justify-content: flex-end
}

.token-cloud code,.template-token-picker button {
    font-family: ui-monospace,monospace;
    font-size: 9px;
    padding: 5px 7px;
    border-radius: 7px;
    background: #edf4fb;
    color: #245b91;
    border: 1px solid #d7e6f4
}

.v8-template-list {
    display: grid;
    gap: 12px
}

.v8-template-card>summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.v8-template-card>summary h3 {
    margin: 4px 0
}

.visual-template-form {
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 16px
}

.visual-template-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 400px;
    gap: 16px
}

.designer-controls {
    display: grid;
    gap: 12px
}

.editor-toolbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 7px;
    background: #f5f7fa;
    border: 1px solid var(--line);
    border-radius: 10px 10px 0 0
}

.editor-toolbar button {
    border: 1px solid #dce3eb;
    background: #fff;
    border-radius: 6px;
    min-width: 31px;
    height: 30px;
    font-size: 10px;
    cursor: pointer
}

.visual-editor {
    min-height: 260px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fff;
    padding: 18px;
    outline: none;
    line-height: 1.65
}

.visual-editor:focus {
    box-shadow: inset 0 0 0 2px #dcecff
}

.template-token-picker {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px
}

.template-token-picker>b {
    font-size: 10px
}

.template-token-picker>div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px
}

.template-token-picker button {
    cursor: pointer
}

.layout-settings {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px
}

.template-options {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    font-size: 10px
}

.template-live-sheet {
    aspect-ratio: 210/297;
    background: #fff;
    border: 1px solid #d7dee7;
    box-shadow: 0 15px 40px #11243a12;
    padding: 35px 32px;
    font-family: Georgia,"Times New Roman",serif;
    position: sticky;
    top: 105px;
    overflow: auto
}

.sheet-brand {
    text-align: center;
    border-bottom: 1px solid #222;
    padding-bottom: 9px
}

.sheet-brand strong,.sheet-brand b,.sheet-brand span {
    display: block
}

.sheet-brand strong {
    font-size: 11px
}

.sheet-brand b {
    font-size: 13px
}

.sheet-brand span {
    font-size: 9px;
    margin-top: 3px
}

.sheet-meta {
    display: flex;
    justify-content: space-between;
    font-family: Arial,sans-serif;
    font-size: 8px;
    margin: 13px 0
}

.template-live-sheet h4 {
    text-align: center;
    font-size: 11px;
    margin: 20px 0
}

.template-live-sheet article {
    font-size: 9px;
    line-height: 1.65;
    min-height: 55%
}

.sheet-signatures {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    text-align: center;
    gap: 12px;
    font-size: 8px;
    margin-top: 22px;
    border-top: 1px solid #ddd;
    padding-top: 15px
}

.template-live-sheet>small {
    display: block;
    text-align: center;
    color: #7c8794;
    font-family: Arial,sans-serif;
    font-size: 7px;
    margin-top: 20px
}

.v8-lifecycle {
    margin: 13px 0
}

.v8-life-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 7px 2px 5px
}

.v8-life-event {
    min-width: 190px;
    position: relative;
    padding: 0 16px 0 20px
}

.v8-life-event:before {
    content: "";
    position: absolute;
    left: 8px;
    right: -8px;
    top: 7px;
    height: 2px;
    background: #dfe7f0
}

.v8-life-event>span {
    position: absolute;
    left: 3px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2b6ec4;
    border: 3px solid #e8f1fb;
    z-index: 2
}

.v8-life-event b,.v8-life-event small {
    display: block
}

.v8-life-event b {
    font-size: 10px;
    margin-top: 21px
}

.v8-life-event small {
    font-size: 8.5px;
    color: var(--muted);
    margin-top: 3px
}

.control-center-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border-radius: 18px;
    background: linear-gradient(135deg,#102a43,#173f67);
    color: #fff;
    margin-bottom: 14px
}

.control-center-hero h2 {
    font-size: 26px;
    margin: 5px 0
}

.control-center-hero p {
    margin: 0;
    color: #b9cade
}

.control-center-actions {
    display: flex;
    gap: 8px
}

.control-center-hero .btn.outline {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    color: #fff
}

.control-kpis {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-bottom: 14px
}

.control-kpis .card {
    display: block
}

.control-kpis small,.control-kpis strong,.control-kpis span {
    display: block
}

.control-kpis small {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    font-weight: 800
}

.control-kpis strong {
    font-size: 29px;
    margin: 5px 0;
    color: #173f67
}

.control-kpis span {
    font-size: 9px;
    color: #7d8c9b
}

.control-center-grid {
    margin-top: 14px
}

.cc-bars,.status-stack,.department-bars {
    display: grid;
    gap: 9px
}

.cc-bars>div,.status-stack>div {
    display: grid;
    grid-template-columns: 60px 1fr 36px;
    align-items: center;
    gap: 8px;
    font-size: 9px
}

.cc-bars i,.status-stack i,.department-bars i {
    height: 8px;
    background: #eef2f6;
    border-radius: 999px;
    overflow: hidden
}

.cc-bars i b,.status-stack i b,.department-bars i b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#2b70c7,#6aa4e8);
    border-radius: 999px
}

.rank-list {
    display: grid;
    gap: 6px
}

.rank-list>div {
    display: grid;
    grid-template-columns: 30px 1fr 36px;
    gap: 9px;
    align-items: center;
    border-bottom: 1px solid #eef2f5;
    padding: 8px 0
}

.rank-list>div>span {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #eef4fa;
    color: #315e8a;
    font-weight: 850
}

.rank-list b,.rank-list small {
    display: block
}

.rank-list small {
    color: var(--muted);
    font-size: 9px
}

.department-bars>div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: center
}

.department-bars b,.department-bars small {
    display: block
}

.department-bars small {
    font-size: 8px;
    color: var(--muted)
}

.manager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid #edf1f5
}

.manager-row b,.manager-row small {
    display: block
}

.manager-row b {
    font-size: 10.5px
}

.manager-row small {
    font-size: 8.5px;
    color: var(--muted);
    margin-top: 3px
}

.manager-row>span {
    color: #3371b4;
    font-size: 18px
}

.danger-row>span {
    color: #c2414b
}

.dashboard-manager-cta {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg,#fff,#f5f9fd)
}

.dashboard-manager-cta h2 {
    margin: 3px 0
}

.dashboard-manager-cta p {
    margin: 0;
    color: var(--muted)
}

.assignment-cards {
    display: grid;
    gap: 12px
}

.assignment-card-v8 {
    padding: 0;
    overflow: hidden
}

.assignment-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line)
}

.assignment-card-head h3 {
    margin: 6px 0 3px
}

.assignment-card-head p {
    margin: 0;
    color: var(--muted);
    font-size: 10px
}

.assignment-people-list {
    display: grid
}

.assignment-person {
    display: grid;
    grid-template-columns: 42px 1fr 210px;
    gap: 12px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid #eef2f5
}

.assignment-person:last-child {
    border-bottom: 0
}

.person-avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #eaf2fb;
    color: #245b91;
    display: grid;
    place-items: center;
    font-weight: 900
}

.person-main b,.person-main small {
    display: block
}

.person-main small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px
}

.person-main p {
    font-size: 9px;
    color: #64788e;
    margin: 5px 0 0
}

.role-match {
    text-align: right
}

.role-match small,.role-match b {
    display: block
}

.role-match small {
    font-size: 8px;
    color: var(--muted)
}

.role-match b {
    font-size: 10px;
    margin: 2px 0 5px
}

.role-match form {
    margin-top: 5px
}

.meeting-v8-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px
}

.meeting-v8-tools>details {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px
}

.meeting-v8-tools summary {
    cursor: pointer;
    font-weight: 750;
    color: #315b83
}

.attendee-list {
    display: grid;
    gap: 5px;
    margin: 9px 0
}

.attendee-list>div {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 7px;
    align-items: center;
    padding: 6px;
    background: #f8fafc;
    border-radius: 8px
}

.attendee-list b,.attendee-list small {
    font-size: 9px
}

.attendee-list small {
    color: var(--muted)
}

.attendee-form {
    display: grid;
    grid-template-columns: 1fr 1fr 120px 100px;
    gap: 6px
}

.attendee-form button {
    grid-column: 1/-1;
    justify-self: end
}

.minutes-form {
    display: grid;
    gap: 7px;
    margin-top: 8px
}

.decision-register td small {
    display: block;
    color: var(--muted);
    margin-top: 2px
}

.v8-task-summary {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin: 14px 0
}

.v8-task-summary a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px
}

.v8-task-summary b {
    font-size: 20px;
    color: #1e60bd
}

.v8-task-summary span {
    font-size: 9px;
    color: #66798d
}

.returned-doc-card {
    margin-bottom: 14px
}

.returned-doc-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.returned-doc-grid a {
    padding: 10px;
    border: 1px solid #efe1c4;
    background: #fffaf0;
    border-radius: 9px
}

.returned-doc-grid b,.returned-doc-grid small,.returned-doc-grid span {
    display: block
}

.returned-doc-grid b {
    font-size: 10px
}

.returned-doc-grid small {
    font-size: 8.5px;
    color: #88775e;
    margin: 3px 0
}

.returned-doc-grid span {
    font-size: 9px;
    color: #a76a1d;
    font-weight: 750
}

.health-v8-grid {
    margin-top: 15px
}

.inode-card.warn {
    border-color: #eed9a9
}

.inode-card.bad {
    border-color: #efbfc3
}

.inode-facts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 10px
}

.inode-facts span {
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f8fafc
}

.inode-facts small,.inode-facts b {
    display: block
}

.inode-facts small {
    font-size: 8px;
    color: var(--muted)
}

.inode-facts b {
    font-size: 11px;
    margin-top: 2px
}

.maintenance-command {
    display: flex;
    gap: 8px;
    align-items: flex-start
}

.maintenance-command code {
    display: block;
    flex: 1;
    max-height: 120px;
    overflow: auto;
    background: #0f2235;
    color: #d9e7f4;
    border-radius: 10px;
    padding: 11px;
    font-size: 8.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all
}

/* V8 official document print */
.official-sheet {
    position: relative;
    overflow: hidden
}

.official-sheet.header-modern .print-letterhead {
    justify-content: flex-start;
    text-align: left;
    border-bottom: 3px solid #173f67
}

.official-sheet.header-compact .print-letterhead {
    padding-bottom: 5px
}

.official-sheet.accent-gold .print-letterhead {
    border-color: #a47b35
}

.official-sheet.accent-mono .print-letterhead {
    border-color: #111
}

.print-watermark {
    position: absolute;
    top: 47%;
    left: 12%;
    right: 12%;
    text-align: center;
    transform: rotate(-28deg);
    font: 800 48pt Arial,sans-serif;
    color: rgba(120,130,140,.08);
    text-transform: uppercase;
    pointer-events: none
}

.print-signature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 28px;
    page-break-inside: avoid
}

.print-signature-grid.cols-1 {
    grid-template-columns: 1fr
}

.print-signature-grid.cols-2 {
    grid-template-columns: repeat(2,1fr)
}

.print-signature-grid.cols-4 {
    grid-template-columns: repeat(4,1fr)
}

.print-signature-grid.cols-5 {
    grid-template-columns: repeat(5,1fr)
}

.print-signature-grid>div {
    text-align: center;
    min-height: 74px;
    font-family: Arial,sans-serif;
    font-size: 9pt
}

.print-signature-grid b,.print-signature-grid span,.print-signature-grid small {
    display: block
}

.print-signature-grid span {
    margin-top: 22px
}

.print-signature-grid small {
    font-size: 7.5pt;
    color: #666;
    margin-top: 3px
}

.print-page-number {
    text-align: right;
    margin-top: 8px;
    font: 7.5pt Arial,sans-serif;
    color: #777;
    border-top: 1px solid #e0e0e0;
    padding-top: 5px
}

@media(max-width: 1180px) {
    .v8-wizard-layout,.visual-template-grid {
        grid-template-columns:1fr
    }

    .v8-live-preview,.template-live-sheet {
        position: static
    }

    .v8-live-preview {
        display: none
    }

    .control-kpis {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width: 760px) {
    .doc-create-hero,.v8-wizard-head,.control-center-hero,.assignment-card-head,.dashboard-manager-cta {
        flex-direction:column;
        align-items: flex-start
    }

    .doc-create-time {
        text-align: left
    }

    .v8-wizard-progress {
        grid-template-columns: 1fr 1fr
    }

    .v8-wizard-progress button span {
        font-size: 9px
    }

    .wizard-review,.upload-choice,.layout-settings,.control-kpis,.v8-task-summary,.returned-doc-grid,.meeting-v8-tools {
        grid-template-columns: 1fr
    }

    .assignment-person {
        grid-template-columns: 38px 1fr
    }

    .role-match {
        grid-column: 2;
        text-align: left
    }

    .attendee-form {
        grid-template-columns: 1fr
    }

    .department-bars>div {
        grid-template-columns: 100px 1fr
    }

    .maintenance-command {
        flex-direction: column
    }

    .visual-editor {
        min-height: 220px
    }
}

/* V8.1 analytics refinements */
.nc-analytics {
    margin-top: 15px
}

.nc-risk-bars {
    display: grid;
    gap: 12px
}

.nc-risk-bars>div {
    display: grid;
    grid-template-columns: 72px 1fr 34px;
    gap: 10px;
    align-items: center;
    font-size: 13px
}

.nc-risk-bars i {
    display: block;
    height: 9px;
    background: #edf2f7;
    border-radius: 99px;
    overflow: hidden
}

.nc-risk-bars i b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#1d4f91,#5b87bd);
    border-radius: inherit
}

.nc-risk-bars>div:first-child i b {
    background: linear-gradient(90deg,#8e1e2c,#c43c4d)
}

.nc-risk-bars>div:nth-child(2) i b {
    background: linear-gradient(90deg,#b95625,#e48345)
}

.nc-risk-bars>div:nth-child(3) i b {
    background: linear-gradient(90deg,#b58a27,#dbae47)
}

.nc-risk-bars>div:nth-child(4) i b {
    background: linear-gradient(90deg,#2b7652,#55a979)
}

.doc-hero .hero-actions>.badge {
    align-self: center;
    white-space: nowrap
}

.manager-row small {
    line-height: 1.45
}

.v8-live-preview {
    position: sticky;
    top: 92px;
    align-self: start
}

@media(max-width: 980px) {
    .v8-live-preview {
        position:static
    }

    .nc-analytics {
        grid-template-columns: 1fr!important
    }
}

/* =========================================================
   V9 SIMPLE GOVERNMENT UI
   ========================================================= */
body {
    --sidebar: 250px;
    background: #f5f7fa
}

.v9-sidebar {
    width: var(--sidebar);
    box-shadow: 10px 0 30px rgba(4,20,36,.06)
}

.v9-sidebar .sidebar-top {
    height: 76px
}

.v9-user-mini {
    margin: 14px 14px 8px;
    padding: 11px 12px;
    display: flex;
    gap: 9px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.035)
}

.v9-user-mini strong,.v9-user-mini small {
    display: block
}

.v9-user-mini strong {
    font-size: 11px;
    color: #f5f9fc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 175px
}

.v9-user-mini small {
    font-size: 9px;
    color: #8299ac;
    margin-top: 1px
}

.v9-nav {
    padding: 7px 12px 18px
}

.v9-nav .nav-link {
    min-height: 47px;
    margin: 4px 0;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 11px
}

.v9-nav .nav-link.active {
    background: rgba(52,125,222,.15)
}

.v9-nav-spacer {
    height: 1px;
    background: rgba(255,255,255,.07);
    margin: 15px 8px
}

.v9-sidebar .sidebar-version>span {
    color: #9ec4ff
}

.v9-topbar {
    min-height: 82px;
    padding: 14px 26px
}

.v9-page-content {
    padding: 22px 26px 36px;
    max-width: 1580px;
    width: 100%;
    margin: 0 auto
}

.v9-mode-switch button {
    border: 1px solid var(--line);
    height: 40px;
    border-radius: 11px;
    background: #fff;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #53687b;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer
}

.mode-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2c79da
}

.view-advanced .mode-dot {
    background: #b48a45
}

.v9-create-menu {
    position: relative
}

.v9-create-dropdown {
    position: absolute;
    right: 0;
    top: 48px;
    width: 265px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 7px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    z-index: 70;
    transition: .16s
}

.v9-create-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: none
}

.v9-create-dropdown a {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border-radius: 9px
}

.v9-create-dropdown a:hover {
    background: #f4f7fb
}

.v9-create-dropdown a>span {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #edf4fd;
    color: #2868b5;
    display: grid;
    place-items: center
}

.v9-create-dropdown b,.v9-create-dropdown small {
    display: block
}

.v9-create-dropdown b {
    font-size: 11px
}

.v9-create-dropdown small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px
}

.v9-create-dropdown>a>.ui-icon {
    margin-left: auto;
    width: 15px;
    color: #8797a7
}

.view-simple .v9-advanced-only {
    display: none!important
}

.view-simple .v9-advanced-only-inline {
    display: none!important
}

.view-simple .simple-case-layout {
    grid-template-columns: minmax(0,1fr)!important
}

.view-simple .page-heading p {
    max-width: 620px
}

.view-simple .card {
    box-shadow: 0 1px 2px rgba(15,23,42,.025)
}

/* Home */
.v9-home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 27px;
    background: linear-gradient(135deg,#fff,#f8fbff);
    border-color: #dce7f2
}

.v9-home-hero h2 {
    font-size: 25px;
    margin: 4px 0 5px;
    letter-spacing: -.4px
}

.v9-home-hero p {
    margin: 0;
    color: #67798b;
    font-size: 12px
}

.v9-home-hero p strong {
    color: #183b63
}

.v9-home-actions {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 14px 0 22px
}

.v9-home-actions>a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
    display: grid;
    grid-template-columns: 42px 1fr 18px;
    gap: 11px;
    align-items: center;
    transition: .16s
}

.v9-home-actions>a:hover {
    border-color: #c5d7ea;
    transform: translateY(-1px);
    box-shadow: var(--shadow)
}

.v9-home-actions>a>span:first-child {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #edf4fd;
    color: #2568b8;
    display: grid;
    place-items: center
}

.v9-home-actions b,.v9-home-actions small {
    display: block
}

.v9-home-actions b {
    font-size: 12px;
    color: #1b3045
}

.v9-home-actions small {
    font-size: 9.5px;
    color: #78899a;
    margin-top: 3px;
    line-height: 1.4
}

.v9-home-actions>a>.ui-icon {
    width: 15px;
    color: #9aabb9
}

.v9-attention {
    margin-bottom: 15px
}

.v9-attention-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px
}

.v9-attention-grid>a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px
}

.v9-attention-grid>a.danger {
    border-color: #f1c9cd;
    background: #fffafb
}

.v9-attention-grid>a.warning {
    border-color: #eeddb7;
    background: #fffdf9
}

.v9-attention-grid b,.v9-attention-grid small {
    display: block
}

.v9-attention-grid b {
    font-size: 13px
}

.v9-attention-grid small {
    font-size: 9px;
    color: #8190a0;
    margin-top: 1px
}

.v9-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #aeb9c3
}

.v9-dot.blue {
    background: #347bd0
}

.v9-dot.red {
    background: #d6535d
}

.v9-dot.amber {
    background: #cf9138
}

.v9-recent {
    margin-top: 15px
}

.v9-simple-list {
    display: grid
}

.v9-simple-list>a {
    display: grid;
    grid-template-columns: minmax(0,1fr) 110px minmax(150px,220px);
    gap: 14px;
    align-items: center;
    padding: 13px 2px;
    border-top: 1px solid #eef2f5
}

.v9-simple-list>a:first-child {
    border-top: 0
}

.v9-list-main b,.v9-list-main small {
    display: block
}

.v9-list-main b {
    font-size: 11px;
    color: #21364a
}

.v9-list-main small {
    font-size: 9px;
    color: #8391a0;
    margin-top: 3px
}

.v9-list-action {
    text-align: right;
    font-size: 9.5px;
    color: #356da5
}

.v9-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap
}

.v9-status.done {
    background: #e9f7ef;
    color: #17704a
}

.v9-status.waiting {
    background: #fff3e3;
    color: #9c621e
}

.v9-status.action {
    background: #fdecef;
    color: #b23846
}

.v9-status.draft {
    background: #eef2f5;
    color: #687888
}

.v9-manager-summary {
    margin-top: 15px;
    display: grid;
    grid-template-columns: minmax(250px,1fr) auto auto;
    align-items: center;
    gap: 25px
}

.v9-manager-summary h2 {
    margin: 4px 0 0;
    font-size: 17px
}

.v9-manager-numbers {
    display: flex;
    gap: 20px
}

.v9-manager-numbers span {
    text-align: center;
    min-width: 80px
}

.v9-manager-numbers b,.v9-manager-numbers small {
    display: block
}

.v9-manager-numbers b {
    font-size: 20px;
    color: #1c5ea8
}

.v9-manager-numbers small {
    font-size: 8.5px;
    color: #7d8d9d;
    margin-top: 2px
}

/* Work / lists */
.v9-task-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 25px
}

.v9-task-head h2 {
    font-size: 21px;
    margin: 4px 0
}

.v9-task-head p {
    margin: 0;
    color: var(--muted);
    font-size: 10.5px
}

.v9-task-total {
    text-align: center;
    padding: 5px 15px
}

.v9-task-total b,.v9-task-total span {
    display: block
}

.v9-task-total b {
    font-size: 29px;
    color: #1e60b7
}

.v9-task-total span {
    font-size: 9px;
    color: #7b8b9b
}

.v9-task-tabs {
    display: flex;
    gap: 7px;
    margin: 14px 0;
    overflow: auto;
    padding-bottom: 2px
}

.v9-task-tabs a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 10px;
    font-weight: 750;
    color: #607286;
    white-space: nowrap
}

.v9-task-tabs a b {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 5px;
    background: #edf2f7;
    border-radius: 10px;
    font-size: 8px
}

.v9-task-tabs a.active {
    background: #173f6c;
    color: #fff;
    border-color: #173f6c
}

.v9-task-tabs a.active b {
    background: rgba(255,255,255,.16)
}

.v9-work-card {
    margin-bottom: 13px
}

.v9-count-pill,.v9-waiting-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #edf4fc;
    color: #2869b2;
    padding: 5px 9px;
    font-size: 9px;
    font-weight: 850
}

.v9-work-list {
    display: grid
}

.v9-work-row {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 100px minmax(165px,220px);
    gap: 12px;
    align-items: center;
    padding: 12px 2px;
    border-top: 1px solid #edf1f4
}

.v9-work-row:first-child {
    border-top: 0
}

.v9-work-row:hover .v9-work-main b {
    color: #1d5da5
}

.v9-work-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #eff5fb;
    color: #2869b4;
    display: grid;
    place-items: center
}

.v9-work-icon .ui-icon {
    width: 17px
}

.v9-work-main b,.v9-work-main small,.v9-work-main em {
    display: block
}

.v9-work-main b {
    font-size: 10.8px;
    color: #263b50
}

.v9-work-main small {
    font-size: 8.8px;
    color: #8090a0;
    margin-top: 2px
}

.v9-work-main em {
    font-size: 8.4px;
    font-style: normal;
    color: #b16f20;
    margin-top: 3px
}

.v9-work-next {
    text-align: right
}

.v9-work-next small,.v9-work-next strong {
    display: block
}

.v9-work-next small {
    font-size: 8px;
    color: #94a0ac
}

.v9-work-next strong {
    font-size: 9.5px;
    color: #315f8d;
    margin-top: 2px
}

.v9-list-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.v9-main-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 720px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 5px 5px 5px 12px
}

.v9-main-search>.ui-icon {
    width: 17px;
    color: #8b9aaa
}

.v9-main-search input {
    border: 0;
    outline: 0;
    background: transparent;
    min-width: 0;
    flex: 1;
    height: 36px
}

.v9-list-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap
}

.v9-list-summary span {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 9px;
    color: #6e7f90
}

.v9-list-summary span b {
    color: #1f5f9f;
    font-size: 11px;
    margin-right: 3px
}

.v9-list-summary span.danger {
    background: #fff6f7;
    border-color: #f2d1d4;
    color: #ad4450
}

.v9-filter-box {
    margin-bottom: 12px
}

/* Case */
.v9-step-tabs {
    display: grid!important;
    grid-template-columns: repeat(4,1fr)!important;
    gap: 6px!important;
    background: #edf1f5!important;
    padding: 5px!important;
    border-radius: 12px!important
}

.v9-step-tabs button {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 6px!important;
    border-radius: 9px!important;
    min-height: 40px!important
}

.v9-step-tabs button>span {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #dfe6ed;
    display: grid;
    place-items: center;
    font-size: 8px;
    font-weight: 850
}

.v9-step-tabs button.active>span {
    background: #fff;
    color: #1c5eaa
}

.v9-system-advice {
    border-color: #d9e5f1;
    background: linear-gradient(135deg,#fff,#f9fbfe)
}

.v9-advice-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 5px 0
}

.v9-advice-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.v9-advice-icon.warning {
    background: #fff3df;
    color: #ad6b1d
}

.v9-advice-icon.info {
    background: #eaf3fe;
    color: #2868b1
}

.v9-advice-icon.done {
    background: #e9f7ef;
    color: #19724c
}

.v9-advice-icon.danger {
    background: #fdecef;
    color: #b43b49
}

.v9-advice-main strong {
    display: block;
    font-size: 16px;
    color: #17324d
}

.v9-advice-main p {
    font-size: 10.5px;
    color: #728496;
    margin: 5px 0 12px;
    max-width: 620px
}

.view-simple .simple-case-head {
    margin-bottom: 11px
}

.view-simple .simple-case-head>div:first-child p {
    font-size: 9.5px
}

.view-simple .simple-case-layout>main {
    max-width: 1050px;
    width: 100%;
    margin: 0 auto
}

.view-simple .simple-panel>.card {
    margin-bottom: 12px
}

/* Case create wizard */
.v9-wizard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 23px;
    margin-bottom: 12px
}

.v9-wizard-head h2 {
    margin: 4px 0;
    font-size: 20px
}

.v9-wizard-head p {
    font-size: 10px;
    color: var(--muted);
    margin: 0
}

.v9-wizard-progress {
    display: grid;
    grid-template-columns: repeat(4,120px);
    gap: 5px
}

.v9-wizard-progress button {
    border: 0;
    background: #f0f3f6;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #758596;
    cursor: pointer
}

.v9-wizard-progress button b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dfe5eb;
    font-size: 8px
}

.v9-wizard-progress button span {
    font-size: 8.5px;
    font-weight: 750
}

.v9-wizard-progress button.active {
    background: #eaf3ff;
    color: #1c5fa8
}

.v9-wizard-progress button.active b {
    background: #276cc0;
    color: #fff
}

.v9-case-wizard-panel {
    display: none;
    min-height: 330px
}

.v9-case-wizard-panel.active {
    display: block
}

.v9-control-type-grid {
    grid-template-columns: repeat(4,1fr)
}

.v9-case-review {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px;
    margin: 10px 0 15px
}

.v9-case-review>div {
    border: 1px solid var(--line);
    background: #f8fafc;
    border-radius: 10px;
    padding: 11px
}

.v9-case-review small,.v9-case-review b {
    display: block
}

.v9-case-review small {
    font-size: 8px;
    color: #8695a4
}

.v9-case-review b {
    font-size: 10.5px;
    margin-top: 4px
}

.v9-review-note {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #edf5ff;
    color: #365d85;
    margin: 12px 0
}

.v9-review-note b,.v9-review-note p {
    display: block;
    margin: 0
}

.v9-review-note b {
    font-size: 10px
}

.v9-review-note p {
    font-size: 9px;
    margin-top: 3px
}

.v9-wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px
}

/* Documents */
.v9-doc-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 26px
}

.v9-doc-hero h2 {
    font-size: 22px;
    margin: 4px 0
}

.v9-doc-hero p {
    font-size: 10.5px;
    color: var(--muted);
    margin: 0
}

.v9-doc-choice-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin: 13px 0 18px
}

.v9-doc-choice-grid>a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
    display: grid;
    grid-template-columns: 40px 1fr 16px;
    gap: 10px;
    align-items: center
}

.v9-doc-choice-grid>a.other {
    grid-column: span 4;
    background: #f8fbff;
    border-style: dashed
}

.v9-doc-choice-grid>a:hover {
    border-color: #bdd3e8;
    box-shadow: var(--shadow);
    transform: translateY(-1px)
}

.v9-doc-choice-grid>a>span {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #edf4fc;
    color: #2868b1;
    display: grid;
    place-items: center
}

.v9-doc-choice-grid b,.v9-doc-choice-grid small {
    display: block
}

.v9-doc-choice-grid b {
    font-size: 11px
}

.v9-doc-choice-grid small {
    font-size: 8.8px;
    color: #7c8c9b;
    margin-top: 3px
}

.v9-doc-choice-grid>a>.ui-icon {
    width: 15px;
    color: #91a2b0
}

.v9-inline-actions {
    display: flex;
    align-items: center;
    gap: 7px
}

/* Management */
.v9-management-hero {
    padding: 23px 25px;
    background: linear-gradient(135deg,#112d4a,#173f68);
    color: #fff;
    border-radius: 16px;
    margin-bottom: 18px
}

.v9-management-hero .eyebrow {
    color: #9bc7ff
}

.v9-management-hero h2 {
    font-size: 20px;
    margin: 4px 0
}

.v9-management-hero p {
    margin: 0;
    color: #b9cad9;
    font-size: 10px
}

.v9-management-section {
    margin: 20px 0
}

.v9-management-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px
}

.v9-management-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px;
    display: grid;
    grid-template-columns: 38px 1fr 16px;
    gap: 10px;
    align-items: center
}

.v9-management-card:hover {
    border-color: #c2d4e5;
    background: #fbfdff
}

.v9-management-card>span {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #eef4fa;
    color: #315f8c;
    display: grid;
    place-items: center
}

.v9-management-card b,.v9-management-card small {
    display: block
}

.v9-management-card b {
    font-size: 10.5px
}

.v9-management-card small {
    font-size: 8.8px;
    color: #8392a0;
    margin-top: 2px
}

.v9-management-card>.ui-icon {
    width: 14px;
    color: #9aa8b4
}

/* Reports */
.v9-report-hero {
    padding: 23px 25px
}

.v9-report-hero h2 {
    font-size: 20px;
    margin: 4px 0
}

.v9-report-hero p {
    font-size: 10px;
    color: var(--muted);
    margin: 0
}

.v9-report-choice-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px;
    margin: 13px 0
}

.v9-report-choice-grid>a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px;
    display: flex;
    gap: 10px;
    align-items: center
}

.v9-report-choice-grid>a>span {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #eef4fb;
    color: #2b67a8;
    display: grid;
    place-items: center
}

.v9-report-choice-grid b,.v9-report-choice-grid small {
    display: block
}

.v9-report-choice-grid b {
    font-size: 10px
}

.v9-report-choice-grid small {
    font-size: 8.5px;
    color: #8090a0;
    margin-top: 2px
}

.v9-report-numbers {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.v9-report-numbers span {
    padding: 12px;
    border: 1px solid var(--line);
    background: #f8fafc;
    border-radius: 10px
}

.v9-report-numbers small,.v9-report-numbers b {
    display: block
}

.v9-report-numbers small {
    font-size: 8px;
    color: #8291a0
}

.v9-report-numbers b {
    font-size: 15px;
    color: #1e5e9f;
    margin-top: 3px
}

@media(max-width: 1100px) {
    .v9-home-actions,.v9-attention-grid,.v9-doc-choice-grid,.v9-report-choice-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .v9-doc-choice-grid>a.other {
        grid-column: span 2
    }

    .v9-wizard-head {
        align-items: flex-start;
        flex-direction: column
    }

    .v9-wizard-progress {
        width: 100%;
        grid-template-columns: repeat(4,1fr)
    }

    .v9-manager-summary {
        grid-template-columns: 1fr
    }

    .v9-manager-numbers {
        justify-content: flex-start
    }

    .v9-work-row {
        grid-template-columns: 38px minmax(0,1fr) 90px
    }

    .v9-work-next {
        grid-column: 2/-1;
        text-align: left;
        padding-left: 0
    }

    .v9-management-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width: 760px) {
    body {
        --sidebar:270px
    }

    .v9-page-content {
        padding: 16px 13px 28px
    }

    .v9-topbar {
        padding: 12px 13px
    }

    .v9-topbar .page-heading p {
        display: none
    }

    .v9-mode-switch span:last-child {
        display: none
    }

    .v9-mode-switch button {
        width: 40px;
        padding: 0;
        justify-content: center
    }

    .v9-home-hero,.v9-doc-hero,.v9-task-head {
        align-items: flex-start;
        flex-direction: column
    }

    .v9-home-actions,.v9-attention-grid,.v9-doc-choice-grid,.v9-report-choice-grid,.v9-report-numbers {
        grid-template-columns: 1fr
    }

    .v9-doc-choice-grid>a.other {
        grid-column: auto
    }

    .v9-simple-list>a {
        grid-template-columns: 1fr auto
    }

    .v9-list-action {
        grid-column: 1/-1;
        text-align: left
    }

    .v9-status {
        justify-self: end
    }

    .v9-work-row {
        grid-template-columns: 34px minmax(0,1fr) auto;
        padding: 12px 0
    }

    .v9-work-icon {
        width: 32px;
        height: 32px
    }

    .v9-work-next {
        grid-column: 2/-1
    }

    .v9-task-tabs {
        margin-inline:-2px}

    .v9-list-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .v9-main-search {
        max-width: none
    }

    .v9-step-tabs {
        grid-template-columns: repeat(4,1fr)!important
    }

    .v9-step-tabs button {
        font-size: 0!important
    }

    .v9-step-tabs button>span {
        font-size: 8px!important
    }

    .v9-control-type-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .v9-case-review {
        grid-template-columns: 1fr
    }

    .v9-wizard-progress button {
        justify-content: center
    }

    .v9-wizard-progress button span {
        display: none
    }

    .v9-manager-numbers {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        width: 100%
    }

    .v9-user-mini {
        display: none
    }

    .userbox-copy {
        display: none
    }

    .userbox {
        min-width: 43px;
        padding-right: 5px
    }

    .top-create span {
        display: none
    }

    .v9-create-dropdown {
        right: -52px
    }

    .app-footer {
        padding: 12px 14px;
        flex-direction: column;
        gap: 3px
    }
}

/* =========================================================
   V10 PILOT & PRODUCTION READY
   ========================================================= */
.v10-global-search {
    margin-left: auto;
    width: min(380px,30vw)
}

.v10-global-search form {
    height: 42px;
    border: 1px solid var(--line);
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    transition: .18s
}

.v10-global-search form:focus-within {
    background: #fff;
    border-color: #9fb9d3;
    box-shadow: 0 0 0 3px rgba(31,111,235,.08)
}

.v10-global-search .ui-icon {
    width: 16px;
    color: #7890a6
}

.v10-global-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 11px;
    color: var(--ink)
}

.v10-global-search kbd {
    font: 700 9px ui-monospace,SFMono-Regular,Menlo,monospace;
    color: #7e8ea0;
    background: #eef2f6;
    border: 1px solid #dde5ec;
    border-radius: 6px;
    padding: 3px 5px;
    white-space: nowrap
}

.v10-onboarding-banner {
    margin-bottom: 14px;
    background: #eef6ff;
    border: 1px solid #d7e8fb;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #244d75
}

.v10-onboarding-banner b,.v10-onboarding-banner span {
    display: block
}

.v10-onboarding-banner b {
    font-size: 11px
}

.v10-onboarding-banner span {
    font-size: 9px;
    color: #6883a0;
    margin-top: 2px
}

.v10-search-page {
    min-height: 520px
}

.v10-search-large {
    max-width: 920px;
    margin: 8px auto 26px;
    height: 58px;
    border: 1px solid #ccd9e5;
    border-radius: 15px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 15px;
    box-shadow: 0 10px 35px rgba(13,48,82,.06)
}

.v10-search-large .ui-icon {
    color: #527391
}

.v10-search-large input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 14px;
    color: var(--ink)
}

.v10-search-results {
    display: grid;
    gap: 7px
}

.v10-search-results>a {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto auto 18px;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #e3eaf0;
    border-radius: 12px;
    background: #fff;
    transition: .16s
}

.v10-search-results>a:hover {
    border-color: #c5d5e3;
    background: #f9fbfd;
    transform: translateY(-1px)
}

.v10-search-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #edf5fc;
    color: #1f67a9;
    display: grid;
    place-items: center
}

.v10-search-results b {
    font-size: 11px
}

.v10-search-results small {
    display: block;
    font-size: 8.8px;
    color: var(--muted);
    margin-top: 2px
}

.v10-search-hints {
    text-align: center;
    padding: 80px 20px
}

.v10-search-hints h2 {
    font-size: 23px;
    margin: 0
}

.v10-search-hints p {
    color: var(--muted);
    font-size: 11px
}

.v10-search-hints div {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 15px
}

.v10-search-hints span {
    background: #f2f6f9;
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 6px 9px;
    font-size: 9px;
    color: #62788b
}

.v10-onboarding-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg,#fff,#f2f7fc)
}

.v10-onboarding-hero h2 {
    margin: 5px 0;
    font-size: 23px
}

.v10-onboarding-hero p {
    margin: 0;
    color: var(--muted)
}

.v10-progress-ring {
    width: 92px;
    height: 92px;
    border: 9px solid #dfeaf4;
    border-top-color: #2c75bd;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center
}

.v10-progress-ring b {
    font-size: 18px
}

.v10-progress-ring span {
    font-size: 7px;
    color: var(--muted)
}

.v10-onboarding-steps {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 14px
}

.v10-onboarding-steps article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    opacity: .72
}

.v10-onboarding-steps article.active,.v10-onboarding-steps article.done {
    opacity: 1
}

.v10-onboarding-steps article.active {
    border-color: #b7d2eb;
    box-shadow: 0 12px 32px rgba(22,87,145,.08)
}

.v10-step-no {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eef3f7;
    color: #577188;
    display: grid;
    place-items: center;
    font-weight: 850
}

.v10-onboarding-steps .done .v10-step-no {
    background: #e7f6ee;
    color: #18794e
}

.v10-onboarding-steps small {
    font-size: 8px;
    color: #8394a4;
    font-weight: 800
}

.v10-onboarding-steps h3 {
    font-size: 13px;
    margin: 3px 0
}

.v10-onboarding-steps p {
    font-size: 9.5px;
    color: var(--muted);
    min-height: 36px
}

.v10-onboarding-steps .inline-form {
    display: inline-flex;
    margin-left: 6px
}

.v10-onboarding-finish {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 14px
}

.v10-onboarding-finish b,.v10-onboarding-finish small {
    display: block
}

.v10-onboarding-finish small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px
}

.v10-backup-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 14px;
    margin-bottom: 14px
}

.v10-backup-primary {
    background: linear-gradient(135deg,#0d2b45,#184f78);
    color: #fff;
    border: 0
}

.v10-backup-primary .eyebrow {
    color: #9dc8eb
}

.v10-backup-primary h2 {
    font-size: 23px;
    margin: 5px 0
}

.v10-backup-primary p {
    color: #bed1df;
    font-size: 10.5px;
    max-width: 650px
}

.switch-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    font-size: 10px;
    font-weight: 650
}

.switch-row input {
    width: 17px;
    height: 17px
}

.v10-readiness-hero {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 22px;
    align-items: center
}

.v10-score {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    border: 12px solid #dce7f0;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center
}

.v10-score.ready {
    border-color: #b9e4ce
}

.v10-score.warning {
    border-color: #f0d4aa
}

.v10-score.not_ready {
    border-color: #efb8bd
}

.v10-score b {
    font-size: 32px;
    line-height: 1
}

.v10-score span {
    font-size: 8px;
    color: var(--muted);
    margin-top: 5px;
    max-width: 90px
}

.v10-readiness-hero h2 {
    font-size: 23px;
    margin: 5px 0
}

.v10-readiness-hero p {
    color: var(--muted);
    max-width: 720px
}

.v10-check-group {
    margin-top: 14px
}

.v10-check-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px
}

.v10-check-list>div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #e5ebf0;
    border-radius: 10px
}

.v10-check-list>div>span {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 850
}

.v10-check-list>div.ok>span {
    background: #e7f6ee;
    color: #18794e
}

.v10-check-list>div.bad>span {
    background: #fdebed;
    color: #c2414b
}

.v10-check-list b {
    display: block;
    font-size: 10px
}

.v10-check-list small {
    display: block;
    font-size: 8px;
    color: var(--muted);
    margin-top: 1px
}

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

.v10-series-card {
    border: 1px solid #e2e9ef;
    border-radius: 12px;
    padding: 11px;
    display: grid;
    grid-template-columns: 180px minmax(0,1fr) 180px auto;
    gap: 8px;
    align-items: center
}

.v10-series-card b,.v10-series-card small {
    display: block
}

.v10-series-card b {
    font-size: 10px
}

.v10-series-card small {
    font-size: 7.5px;
    color: var(--muted)
}

.v10-series-card input {
    height: 35px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 0 9px;
    font-size: 9.5px
}

.v10-series-card .preview {
    font: 750 9px ui-monospace,monospace;
    color: #315574;
    background: #f1f6fa;
    border-radius: 7px;
    padding: 7px
}

.v10-demo-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg,#fff,#f6f0ff)
}

.v10-demo-hero h2 {
    font-size: 22px;
    margin: 5px 0
}

.v10-demo-hero p {
    color: var(--muted);
    max-width: 670px
}

.v10-demo-samples {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin: 14px 0
}

.v10-demo-samples .card b,.v10-demo-samples .card span,.v10-demo-samples .card small {
    display: block
}

.v10-demo-samples .card b {
    font-size: 9px;
    color: var(--muted)
}

.v10-demo-samples .card span {
    font-size: 19px;
    font-weight: 850;
    color: #274f74;
    margin: 4px 0
}

.v10-demo-samples .card small {
    font-size: 8px;
    color: #8595a4
}

.v10-grant-row {
    display: flex!important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0!important;
    border-bottom: 1px solid #edf1f4
}

.v10-grant-row span b,.v10-grant-row span small {
    display: block
}

.v10-grant-row span small {
    font-size: 8px;
    color: var(--muted)
}

@media(max-width: 1180px) {
    .v10-global-search {
        width:250px
    }

    .v10-series-card {
        grid-template-columns: 150px 1fr
    }

    .v10-series-card .preview {
        grid-column: 2
    }

    .v10-demo-samples {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width: 860px) {
    .v10-global-search {
        display:none
    }

    .v10-onboarding-steps,.v10-check-list,.v10-series-grid {
        grid-template-columns: 1fr
    }

    .v10-backup-grid {
        grid-template-columns: 1fr
    }

    .v10-readiness-hero {
        grid-template-columns: 1fr
    }

    .v10-score {
        width: 110px;
        height: 110px;
        border-width: 9px
    }

    .v10-search-results>a {
        grid-template-columns: 34px minmax(0,1fr) auto
    }

    .v10-search-results>a>small,.v10-search-results>a>.ui-icon {
        display: none
    }

    .v10-series-card {
        grid-template-columns: 1fr
    }

    .v10-series-card .preview {
        grid-column: auto
    }
}

@media(max-width: 560px) {
    .v10-onboarding-hero,.v10-onboarding-finish,.v10-demo-hero {
        align-items:flex-start;
        flex-direction: column
    }

    .v10-onboarding-steps {
        grid-template-columns: 1fr
    }

    .v10-demo-samples {
        grid-template-columns: 1fr
    }

    .v10-search-large {
        height: auto;
        flex-wrap: wrap
    }

    .v10-search-large input {
        min-height: 42px
    }

    .v10-search-large .btn {
        width: 100%
    }
}

.v10-mobile-search {
    display: none
}

@media(max-width: 860px) {
    .v10-mobile-search {
        display:grid
    }
}

.v10-scenario-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

.v10-scenario-grid>div {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 9px;
    align-items: start;
    border: 1px solid #e5ebf0;
    border-radius: 11px;
    padding: 10px
}

.v10-scenario-grid>div>span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #edf5fc;
    color: #2467a4;
    display: grid;
    place-items: center;
    font-weight: 850
}

.v10-scenario-grid b {
    display: block;
    font-size: 10px
}

.v10-scenario-grid small {
    display: block;
    font-size: 8.5px;
    color: var(--muted);
    margin-top: 2px
}

.v10-role-matrix {
    margin-top: 14px
}

@media(max-width: 720px) {
    .v10-scenario-grid {
        grid-template-columns:1fr
    }
}

/* =========================================================
   V12 MULTI-TENANT • TÜM ÖZELLİKLER DAHİL
   ========================================================= */
.v12-context-chip {
    margin: 10px 14px 7px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto;
    gap: 8px;
    align-items: center
}

.v12-context-chip>span {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(96,165,250,.11);
    color: #88bcf0;
    display: grid;
    place-items: center
}

.v12-context-chip .ui-icon {
    width: 15px
}

.v12-context-chip small,.v12-context-chip b {
    display: block
}

.v12-context-chip small {
    font-size: 7px;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #6f879b
}

.v12-context-chip b {
    margin-top: 1px;
    color: #e7eff6;
    font-size: 9.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.v12-context-chip a {
    font-size: 8px;
    color: #8fc0ef;
    font-weight: 750;
    padding: 4px 5px;
    border-radius: 6px
}

.v12-context-chip a:hover {
    background: rgba(255,255,255,.06);
    color: #fff
}

.v12-platform-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg,#0d2941 0%,#153e60 58%,#22577e 100%);
    color: #fff;
    border: 0;
    padding: 26px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative
}

.v12-platform-hero:after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    right: -90px;
    top: -160px;
    background: rgba(255,255,255,.055)
}

.v12-platform-hero .eyebrow {
    color: #9cc9eb
}

.v12-platform-hero h2 {
    font-size: 25px;
    letter-spacing: -.5px;
    margin: 5px 0
}

.v12-platform-hero p {
    margin: 0;
    max-width: 690px;
    color: #c9dce9;
    font-size: 11px
}

.v12-platform-stats {
    display: flex;
    align-items: stretch;
    gap: 8px;
    position: relative;
    z-index: 1
}

.v12-platform-stats>span {
    min-width: 105px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    padding: 12px;
    text-align: center
}

.v12-platform-stats b,.v12-platform-stats small {
    display: block
}

.v12-platform-stats b {
    font-size: 21px;
    color: #fff
}

.v12-platform-stats small {
    font-size: 8px;
    color: #aecaDE;
    margin-top: 1px
}

.v12-inst-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px
}

.v12-inst-card {
    transition: .18s
}

.v12-inst-card:hover {
    box-shadow: 0 14px 35px rgba(15,31,51,.08);
    transform: translateY(-1px)
}

.v12-inst-head {
    display: grid;
    grid-template-columns: 45px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center
}

.v12-inst-head h3 {
    font-size: 13px;
    margin: 0
}

.v12-inst-head small {
    display: block;
    font-size: 8.5px;
    color: var(--muted);
    margin-top: 2px
}

.v12-inst-mark {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: linear-gradient(145deg,#173b5b,#0c2439);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .5px
}

.v12-inst-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    margin-top: 13px
}

.v12-inst-metrics span {
    padding: 8px;
    background: #f6f9fb;
    border: 1px solid #e7edf2;
    border-radius: 9px;
    text-align: center
}

.v12-inst-metrics b,.v12-inst-metrics small {
    display: block
}

.v12-inst-metrics b {
    font-size: 13px;
    color: #254866
}

.v12-inst-metrics small {
    font-size: 7px;
    color: #8091a2;
    margin-top: 1px
}

.v12-inst-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #edf1f4
}

.v12-inst-actions form {
    margin: 0
}

.v12-inst-actions .btn {
    min-height: 32px
}

.v12-dep-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #edf5fc;
    color: #1e67a8;
    display: grid;
    place-items: center
}

.v12-dep-icon .ui-icon {
    width: 16px
}

.v12-inline-edit {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    padding: 9px 0
}

.v12-inline-edit input,.v12-inline-edit select {
    min-width: 0
}

.v12-inline-edit .btn {
    grid-column: 1/-1
}

.v12-staff-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    background: linear-gradient(135deg,#fff,#f5f9fd)
}

.v12-staff-intro h2 {
    font-size: 21px;
    margin: 4px 0
}

.v12-staff-intro p {
    font-size: 10.5px;
    color: var(--muted);
    margin: 0
}

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

.v12-role-chips span {
    font-size: 8px;
    font-weight: 780;
    color: #3c617f;
    background: #edf5fb;
    border: 1px solid #dceaf5;
    border-radius: 99px;
    padding: 6px 9px
}

.v12-role-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px
}

.v12-role-list>div {
    border: 1px solid #e5ebf0;
    border-radius: 10px;
    padding: 9px 10px
}

.v12-role-list b,.v12-role-list small {
    display: block
}

.v12-role-list b {
    font-size: 9.5px
}

.v12-role-list small {
    font-size: 8px;
    color: var(--muted);
    margin-top: 2px
}

.v12-role-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) 220px;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg,#fff 0%,#f5f9fd 100%);
    border-color: #dce6ef;
    padding: 22px;
    margin-bottom: 14px
}

.v12-role-hero-copy h2 {
    font-size: 23px;
    letter-spacing: -.4px;
    margin: 4px 0
}

.v12-role-hero-copy>p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    max-width: 680px
}

.v12-context-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 11px;
    color: #61798f;
    font-size: 8.5px;
    font-weight: 650
}

.v12-context-line span {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.v12-context-line .ui-icon {
    width: 13px
}

.v12-role-hero-side {
    border-left: 1px solid #dce5ed;
    padding-left: 20px;
    text-align: center
}

.v12-role-hero-side strong,.v12-role-hero-side span {
    display: block
}

.v12-role-hero-side strong {
    font-size: 30px;
    line-height: 1;
    color: #194d79
}

.v12-role-hero-side span {
    font-size: 8px;
    color: var(--muted);
    margin: 5px 0 10px
}

.v12-role-hero-side .btn {
    width: 100%
}

.v12-platform-note {
    border: 1px solid #d8e7f3;
    background: #f2f8fc;
    border-radius: 12px;
    padding: 11px 13px;
    color: #315a79;
    font-size: 9.5px
}

.v12-platform-note strong {
    color: #173e5f
}

.v12-tenant-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 99px;
    padding: 5px 8px;
    background: #edf5fc;
    color: #245d8c;
    font-size: 8px;
    font-weight: 800
}

@media(max-width: 1100px) {
    .v12-platform-hero {
        align-items:flex-start;
        flex-direction: column
    }

    .v12-inst-grid {
        grid-template-columns: 1fr
    }

    .v12-role-hero {
        grid-template-columns: 1fr
    }

    .v12-role-hero-side {
        border-left: 0;
        border-top: 1px solid #dce5ed;
        padding: 14px 0 0;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        text-align: left;
        gap: 10px
    }

    .v12-role-hero-side span {
        margin: 0
    }

    .v12-role-hero-side .btn {
        width: auto
    }

    .v12-platform-stats {
        width: 100%
    }

    .v12-platform-stats>span {
        flex: 1
    }
}

@media(max-width: 680px) {
    .v12-platform-stats {
        display:grid;
        grid-template-columns: repeat(3,1fr)
    }

    .v12-platform-stats>span {
        min-width: 0
    }

    .v12-inst-metrics {
        grid-template-columns: repeat(2,1fr)
    }

    .v12-staff-intro {
        align-items: flex-start;
        flex-direction: column
    }

    .v12-role-chips {
        justify-content: flex-start
    }

    .v12-role-list {
        grid-template-columns: 1fr
    }

    .v12-inline-edit {
        grid-template-columns: 1fr
    }

    .v12-inline-edit .btn {
        grid-column: auto
    }

    .v12-role-hero-side {
        grid-template-columns: 1fr;
        text-align: center
    }

    .v12-context-chip {
        margin-inline:10px}

    .v12-inst-actions .btn,.v12-inst-actions form {
        width: 100%
    }

    .v12-inst-actions form .btn {
        width: 100%
    }
}

/* V12.3 Platform & institution logo management */
.platform-logo-admin {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px;
    margin: 0 0 18px;
    border: 1px solid #dce6ee;
    border-radius: 16px;
    background: #f7fafc
}

.platform-logo-preview,.institution-logo-preview {
    display: grid;
    place-items: center;
    min-height: 92px;
    padding: 14px;
    border: 1px solid #dce6ee;
    border-radius: 13px;
    background: #fff
}

.platform-logo-preview img {
    max-width: 128px;
    max-height: 72px;
    object-fit: contain
}

.platform-logo-admin b {
    display: block;
    font-size: 13px;
    color: #16344f
}

.platform-logo-admin p {
    margin: 5px 0 12px;
    color: #718396;
    font-size: 10px;
    line-height: 1.6
}

.switch-row.compact {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 9px;
    color: #65798c
}

.institution-logo-field .institution-logo-preview {
    margin-bottom: 8px;
    min-height: 70px
}

.institution-logo-preview img {
    max-width: 120px;
    max-height: 58px;
    object-fit: contain
}

@media(max-width: 720px) {
    .platform-logo-admin {
        grid-template-columns:1fr
    }

    .platform-logo-preview {
        min-height: 80px
    }

    .platform-logo-preview img {
        max-width: 145px
    }
}

.brand-mark-image {
    width: auto!important;
    min-width: 46px;
    max-width: 150px;
    padding: 4px 6px;
    background: #fff!important;
    border-radius: 10px
}

.brand-mark-image img {
    max-width: 132px!important;
    max-height: 36px!important;
    width: auto!important;
    height: auto!important;
    object-fit: contain!important
}

.login-brand-image-only .login-brand-mark {
    width: auto;
    min-width: 74px;
    max-width: 190px;
    padding: 8px 11px;
    background: #fff;
    border-radius: 13px
}

.login-brand-image-only .login-brand-mark img {
    max-width: 168px;
    max-height: 62px;
    width: auto;
    height: auto;
    object-fit: contain
}

@media(max-width: 720px) {
    .brand-mark-image {
        max-width:120px
    }

    .brand-mark-image img {
        max-width: 105px!important
    }

    .login-brand-image-only .login-brand-mark img {
        max-width: 145px
    }
}

/* V12.4 logo management */
.transparent-logo-preview {
    background: transparent!important;
    border: 1px dashed #cbd8e4!important;
    box-shadow: none!important;
    overflow: hidden
}

.transparent-logo-preview img {
    max-width: 100%!important;
    max-height: 86px!important;
    width: auto!important;
    height: auto!important;
    object-fit: contain!important;
    background: transparent!important
}

.platform-logo-admin-v2 {
    grid-template-columns: minmax(220px,330px) 1fr!important;
    background: #fbfcfe!important
}

.platform-logo-admin-v2 .platform-logo-preview {
    min-height: 126px;
    padding: 18px
}

.platform-logo-admin-v2 .platform-logo-preview img {
    max-width: 290px!important;
    max-height: 96px!important
}

.logo-upload-box {
    position: relative;
    margin-top: 12px;
    border: 1px solid #cfdbe7;
    border-radius: 13px;
    background: #fff;
    padding: 12px 14px;
    display: grid;
    gap: 6px
}

.logo-upload-box input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2
}

.logo-upload-box label {
    display: grid;
    gap: 3px;
    pointer-events: none
}

.logo-upload-box label strong {
    font-size: 11px;
    color: #173b5c
}

.logo-upload-box label span,.logo-upload-box small {
    font-size: 9px;
    color: #74869a;
    line-height: 1.45
}

.logo-upload-box small {
    padding-top: 5px;
    border-top: 1px solid #eef2f6
}

.logo-upload-box.compact {
    padding: 10px 12px;
    margin-top: 8px
}

.brand-mark-image {
    background: transparent!important;
    border-radius: 0!important;
    padding: 0!important;
    min-width: 50px!important;
    max-width: 172px!important
}

.brand-mark-image img {
    max-width: 164px!important;
    max-height: 42px!important;
    background: transparent!important
}

.login-brand-image-only .login-brand-mark {
    background: transparent!important;
    border-radius: 0!important;
    padding: 0!important
}

.login-brand-image-only .login-brand-mark img {
    max-width: 170px!important;
    max-height: 76px!important;
    background: transparent!important
}

@media(max-width: 720px) {
    .platform-logo-admin-v2 {
        grid-template-columns:1fr!important
    }

    .brand-mark-image img {
        max-width: 130px!important;
        max-height: 36px!important
    }
}

.brand-mark-image,.login-brand-image-only .login-brand-mark {
    border: 0!important;
    box-shadow: none!important
}

/* ===== V14 Belediye Kurulum & Müşteri Yaşam Döngüsü ===== */
.v14-platform-hero,.v14-setup-hero,.v14-client-summary {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
    background: linear-gradient(135deg,#0b1f33 0%,#123554 72%,#174b76 100%);
    color: #fff;
    border: 0;
    overflow: hidden;
    position: relative;
    padding: 30px 32px
}

.v14-platform-hero:after,.v14-setup-hero:after,.v14-client-summary:after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    right: -120px;
    top: -180px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018)
}

.v14-platform-hero>div,.v14-setup-hero>div,.v14-client-summary>div {
    position: relative;
    z-index: 1
}

.v14-platform-hero .eyebrow,.v14-setup-hero .eyebrow,.v14-client-summary .eyebrow {
    color: #8fc4ff
}

.v14-platform-hero h2,.v14-setup-hero h2,.v14-client-summary h2 {
    color: #fff;
    margin: 7px 0 8px;
    font-size: 26px
}

.v14-platform-hero p,.v14-setup-hero p,.v14-client-summary p {
    color: #c9d9e7;
    max-width: 760px;
    margin: 0;
    line-height: 1.65
}

.v14-platform-kpis {
    display: grid;
    grid-template-columns: repeat(2,minmax(110px,1fr));
    gap: 10px;
    min-width: 315px
}

.v14-platform-kpis span {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    padding: 13px 15px;
    border-radius: 14px
}

.v14-platform-kpis b {
    display: block;
    font-size: 22px;
    color: #fff
}

.v14-platform-kpis small {
    display: block;
    color: #c8d8e7;
    margin-top: 3px
}

.v14-platform-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0
}

.v14-search-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1
}

.v14-search-filter .field {
    margin: 0
}

.v14-search-filter .field:first-of-type {
    flex: 1;
    max-width: 520px
}

.v14-new-customer {
    position: relative
}

.v14-new-customer>summary {
    list-style: none;
    cursor: pointer
}

.v14-new-customer>summary::-webkit-details-marker {
    display: none
}

.v14-popover-card {
    position: absolute;
    right: 0;
    top: 48px;
    width: min(900px,calc(100vw - 60px));
    z-index: 50;
    box-shadow: 0 28px 80px rgba(12,35,56,.2);
    border: 1px solid #dce6ef
}

.v14-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.v14-customer-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px
}

.v14-customer-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.v14-customer-head {
    display: flex;
    align-items: center;
    gap: 12px
}

.v14-inst-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #edf5ff;
    color: #18558c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
    flex: 0 0 auto
}

.v14-customer-name {
    min-width: 0;
    flex: 1
}

.v14-customer-name h3 {
    margin: 0 0 3px;
    font-size: 17px;
    color: #102a43;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.v14-customer-name small {
    color: #71869a
}

.v14-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px
}

.v14-progress-line {
    display: flex;
    align-items: center;
    gap: 10px
}

.v14-progress-line>div {
    height: 8px;
    background: #e8eef4;
    border-radius: 999px;
    overflow: hidden;
    flex: 1
}

.v14-progress-line>div>span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#1764aa,#35a0e8);
    border-radius: 999px
}

.v14-progress-line>b {
    min-width: 40px;
    text-align: right;
    color: #163f64
}

.v14-card-meta {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid #e3eaf1;
    border-radius: 13px;
    overflow: hidden
}

.v14-card-meta span {
    padding: 10px;
    border-right: 1px solid #e3eaf1;
    background: #fbfcfe;
    min-width: 0
}

.v14-card-meta span:last-child {
    border-right: 0
}

.v14-card-meta small {
    display: block;
    color: #8091a1;
    font-size: 10px
}

.v14-card-meta b {
    display: block;
    color: #17324d;
    margin-top: 3px;
    font-size: 14px
}

.v14-card-meta .small-value {
    font-size: 11px
}

.v14-card-health {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.v14-card-health>div {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f9fb
}

.v14-card-health small {
    display: block;
    margin-top: 6px;
    color: #71869a;
    font-size: 11px
}

.v14-card-contract {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px dashed #d8e2eb;
    border-bottom: 1px dashed #d8e2eb
}

.v14-card-contract small {
    display: block;
    color: #8192a3;
    font-size: 10px
}

.v14-card-contract b {
    display: block;
    margin-top: 3px;
    color: #263f57;
    font-size: 12px
}

.v14-platform-settings {
    margin-top: 18px
}

.v14-platform-settings>summary {
    cursor: pointer;
    font-weight: 800;
    color: #16324a;
    padding: 2px
}

.v14-settings-inner {
    padding-top: 18px
}

.v14-hero-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 15px
}

.v14-progress {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 430px
}

.v14-progress p {
    font-size: 12px;
    max-width: 210px
}

.v14-progress-ring {
    --progress: 0;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: conic-gradient(#58b8ff calc(var(--progress)*1%),rgba(255,255,255,.12) 0);
    display: grid;
    place-items: center;
    position: relative;
    flex: 0 0 auto
}

.v14-progress-ring:before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #113353
}

.v14-progress-ring>div {
    position: relative;
    text-align: center
}

.v14-progress-ring b {
    display: block;
    color: #fff;
    font-size: 24px
}

.v14-progress-ring small {
    color: #bdd2e4
}

.v14-usage-stats .stat-card span,.v14-client-stats .stat-card span {
    display: block;
    margin-top: 5px;
    color: #8091a2;
    font-size: 11px
}

.v14-date-stat {
    font-size: 14px!important
}

.v14-check-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.v14-check {
    display: flex;
    gap: 13px;
    border: 1px solid #e0e7ef;
    border-radius: 15px;
    padding: 15px;
    background: #fff
}

.v14-check.done {
    background: #f9fcfb;
    border-color: #cce9dc
}

.v14-check.pending {
    background: #fffdfa;
    border-color: #eadfca
}

.v14-check-no {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef3f8;
    color: #3d5d77;
    font-weight: 900;
    flex: 0 0 auto
}

.v14-check.done .v14-check-no {
    background: #dff4e9;
    color: #14744f
}

.v14-check.pending .v14-check-no {
    background: #fff0d6;
    color: #8b6518
}

.v14-check>div {
    flex: 1;
    min-width: 0
}

.v14-check-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center
}

.v14-check-title b {
    color: #17324b
}

.v14-check-title small {
    font-size: 10px;
    color: #7d8d9d
}

.v14-check p {
    font-size: 12px;
    color: #6b7f91;
    line-height: 1.55;
    margin: 5px 0 10px
}

.v14-check-actions form {
    display: flex;
    gap: 7px;
    align-items: center
}

.v14-check-actions input[type=text] {
    max-width: 230px;
    height: 34px
}

.v14-setup-bottom {
    align-items: start
}

.v14-activity-list>div {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f5
}

.v14-activity-list>div:last-child {
    border-bottom: 0
}

.v14-activity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3188ca;
    margin-top: 5px;
    box-shadow: 0 0 0 5px #eaf4fb;
    flex: 0 0 auto
}

.v14-activity-list b {
    font-size: 12px;
    color: #1c3952
}

.v14-activity-list p {
    margin: 3px 0;
    font-size: 12px;
    color: #60778a
}

.v14-activity-list small {
    font-size: 10px;
    color: #8a9baa
}

.v14-client-summary {
    padding: 26px 30px
}

.v14-client-progress {
    min-width: 280px
}

.v14-client-progress small {
    color: #bdd2e4
}

.v14-client-progress>b {
    display: block;
    font-size: 32px;
    color: #fff;
    margin: 4px 0 8px
}

.v14-client-progress .v14-progress-line>div {
    background: rgba(255,255,255,.14)
}

.v14-client-progress a {
    display: block;
    color: #cde6ff;
    font-size: 11px;
    margin-top: 7px
}

.v14-overview-grid {
    align-items: start
}

.v14-quick-manage {
    display: grid;
    gap: 7px
}

.v14-quick-manage form {
    margin: 0
}

.v14-quick-manage button {
    width: 100%;
    border: 1px solid #e0e7ef;
    background: #fff;
    border-radius: 12px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 22px 1fr 18px;
    gap: 10px;
    text-align: left;
    align-items: center;
    cursor: pointer;
    color: #496276
}

.v14-quick-manage button:hover {
    border-color: #b8d0e4;
    background: #f8fbfd
}

.v14-quick-manage button span {
    display: block
}

.v14-quick-manage button b {
    display: block;
    color: #17324b;
    font-size: 12px
}

.v14-quick-manage button small {
    display: block;
    color: #8091a1;
    font-size: 10px;
    margin-top: 2px
}

.v14-quick-manage .ui-icon {
    width: 18px;
    height: 18px
}

.v14-quick-manage button>.ui-icon:last-child {
    width: 14px;
    height: 14px
}

.v14-client-stats {
    margin-top: 14px
}

@media(max-width: 1100px) {
    .v14-customer-grid {
        grid-template-columns:1fr
    }

    .v14-platform-hero,.v14-setup-hero,.v14-client-summary {
        align-items: flex-start
    }

    .v14-platform-kpis {
        min-width: 270px
    }

    .v14-card-meta {
        grid-template-columns: repeat(2,1fr)
    }

    .v14-card-meta span:nth-child(2) {
        border-right: 0
    }

    .v14-card-meta span:nth-child(-n+2) {
        border-bottom: 1px solid #e3eaf1
    }

    .v14-check-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width: 760px) {
    .v14-platform-hero,.v14-setup-hero,.v14-client-summary {
        flex-direction:column;
        padding: 22px 18px;
        gap: 20px
    }

    .v14-platform-hero h2,.v14-setup-hero h2,.v14-client-summary h2 {
        font-size: 22px
    }

    .v14-platform-kpis {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2,1fr)
    }

    .v14-platform-toolbar {
        flex-direction: column
    }

    .v14-search-filter {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 120px auto
    }

    .v14-new-customer {
        width: 100%
    }

    .v14-new-customer>summary {
        width: 100%;
        text-align: center
    }

    .v14-popover-card {
        position: fixed;
        left: 10px;
        right: 10px;
        top: 70px;
        width: auto;
        max-height: calc(100vh - 90px);
        overflow: auto
    }

    .v14-dual {
        grid-template-columns: 1fr
    }

    .v14-card-badges {
        align-items: flex-start
    }

    .v14-customer-head {
        flex-wrap: wrap
    }

    .v14-card-badges {
        width: 100%;
        flex-direction: row;
        padding-left: 60px
    }

    .v14-card-health,.v14-card-contract {
        grid-template-columns: 1fr
    }

    .v14-progress {
        width: 100%;
        max-width: none
    }

    .v14-check-actions form {
        flex-direction: column;
        align-items: stretch
    }

    .v14-check-actions input[type=text] {
        max-width: none
    }

    .v14-client-progress {
        min-width: 0;
        width: 100%
    }

    .v14-overview-grid {
        grid-template-columns: 1fr
    }

    .v14-customer-card {
        padding: 15px
    }
}

@media(max-width: 520px) {
    .v14-search-filter {
        grid-template-columns:1fr 1fr
    }

    .v14-search-filter .field:first-of-type {
        grid-column: 1/-1
    }

    .v14-search-filter .btn {
        width: 100%
    }

    .v14-platform-kpis {
        grid-template-columns: 1fr 1fr
    }

    .v14-card-meta {
        grid-template-columns: 1fr 1fr
    }

    .v14-inst-actions {
        display: grid!important;
        grid-template-columns: 1fr 1fr;
        width: 100%
    }

    .v14-inst-actions>* {
        width: 100%
    }

    .v14-inst-actions .btn {
        width: 100%;
        justify-content: center
    }

    .v14-progress {
        flex-direction: column;
        align-items: flex-start
    }

    .v14-check {
        padding: 13px
    }

    .v14-check-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px
    }
}

/* ==========================================================================\n   V15 • Başkanlık & Üst Yönetim Karar Destek Merkezi\n   ========================================================================== */
.v15-exec-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 34px;
    padding: 34px 36px;
    margin-bottom: 16px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg,#071a2f 0%,#0d2d50 62%,#154575 100%);
    color: #fff;
    box-shadow: 0 18px 48px rgba(11,31,51,.13)
}

.v15-exec-hero:before {
    content: "";
    position: absolute;
    right: -75px;
    top: -105px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 0 0 52px rgba(255,255,255,.025),0 0 0 104px rgba(255,255,255,.015)
}

.v15-exec-hero:after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(132,187,247,.38),transparent)
}

.v15-exec-hero-copy,.v15-exec-hero-actions {
    position: relative;
    z-index: 1
}

.v15-exec-hero-copy {
    max-width: 790px
}

.v15-exec-hero .eyebrow {
    color: #91c0f4
}

.v15-exec-hero h2 {
    margin: 8px 0 10px;
    font-size: clamp(29px,3.2vw,46px);
    line-height: 1.04;
    letter-spacing: -.045em;
    color: #fff
}

.v15-exec-hero h2 em {
    font-style: normal;
    color: #9ac7fb
}

.v15-exec-hero p {
    max-width: 760px;
    margin: 0;
    color: #c7d7e7;
    font-size: 15px;
    line-height: 1.72
}

.v15-exec-context {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px
}

.v15-exec-context span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: #dce8f4;
    font-size: 12px;
    font-weight: 720
}

.v15-exec-context .ui-icon {
    width: 15px;
    height: 15px
}

.v15-exec-hero-actions {
    display: flex;
    gap: 9px;
    flex: 0 0 auto
}

.v15-exec-hero .btn.outline {
    border-color: rgba(255,255,255,.18);
    color: #fff;
    background: rgba(255,255,255,.05)
}

.v15-period-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 10px 12px;
    margin-bottom: 16px
}

.v15-period-pills {
    display: flex;
    gap: 3px;
    flex-wrap: wrap
}

.v15-period-pills a {
    padding: 9px 12px;
    border-radius: 9px;
    text-decoration: none;
    color: #5e7186;
    font-size: 12px;
    font-weight: 780;
    transition: .18s ease
}

.v15-period-pills a:hover {
    background: #f2f6fa;
    color: #153653
}

.v15-period-pills a.active {
    background: #0d2945;
    color: #fff
}

.v15-period-custom {
    display: flex;
    align-items: center;
    gap: 7px
}

.v15-period-custom input {
    height: 34px;
    border: 1px solid #d2dde8;
    border-radius: 8px;
    background: #fff;
    padding: 0 8px;
    color: #314a62;
    font-size: 12px
}

.v15-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 16px
}

.v15-kpi {
    display: block;
    min-width: 0;
    padding: 18px 17px;
    border: 1px solid #dbe4ed;
    border-radius: 17px;
    background: #fff;
    color: #14304a;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(25,52,79,.035);
    transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease
}

.v15-kpi:hover {
    transform: translateY(-2px);
    border-color: #b9cadb;
    box-shadow: 0 12px 28px rgba(25,52,79,.08)
}

.v15-kpi>span {
    display: block;
    min-height: 30px;
    color: #6c7f92;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: .045em
}

.v15-kpi strong {
    display: block;
    margin-top: 8px;
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: #102b45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.v15-kpi small {
    display: block;
    margin-top: 7px;
    color: #8292a2;
    font-size: 10.5px;
    line-height: 1.35
}

.v15-kpi-primary {
    background: linear-gradient(145deg,#0c2b4a,#154d82);
    border-color: #154d82
}

.v15-kpi-primary>span,.v15-kpi-primary small {
    color: #b9cee1
}

.v15-kpi-primary strong {
    color: #fff;
    font-size: 22px
}

.v15-kpi.is-danger {
    border-top: 3px solid #c64343
}

.v15-kpi.is-warning {
    border-top: 3px solid #d6962f
}

.v15-kpi.is-info {
    border-top: 3px solid #3f7fbd
}

.v15-exec-grid {
    display: grid;
    grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr);
    gap: 14px;
    margin-bottom: 14px
}

.v15-exec-grid-main {
    grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr)
}

.v15-exec-grid .card {
    margin: 0;
    min-width: 0
}

.v15-decision-card,.v15-trend-card,.v15-risk-card,.v15-top-risk-card {
    padding: 22px
}

.v15-decision-list {
    display: grid;
    gap: 8px
}

.v15-decision-row {
    display: grid;
    grid-template-columns: 7px 1fr 20px;
    gap: 12px;
    align-items: center;
    padding: 13px 12px;
    border: 1px solid #e0e7ef;
    border-radius: 12px;
    text-decoration: none;
    color: #18334d;
    background: #fff
}

.v15-decision-row:hover {
    border-color: #bfcedd;
    background: #fbfdff
}

.v15-decision-signal {
    width: 7px;
    height: 36px;
    border-radius: 99px;
    background: #4e83b6
}

.v15-decision-row.danger .v15-decision-signal {
    background: #c74343
}

.v15-decision-row.warning .v15-decision-signal {
    background: #d6932b
}

.v15-decision-row.good .v15-decision-signal {
    background: #348260
}

.v15-decision-row.info .v15-decision-signal {
    background: #437daf
}

.v15-decision-row b {
    display: block;
    font-size: 13px
}

.v15-decision-row small {
    display: block;
    margin-top: 4px;
    color: #718397;
    font-size: 11px;
    line-height: 1.45
}

.v15-row-arrow {
    color: #9aabba;
    font-size: 17px
}

.v15-trend-chart {
    height: 225px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 18px 4px 0;
    border-bottom: 1px solid #dfe6ed
}

.v15-trend-col {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 4px;
    align-items: end;
    justify-items: center;
    flex: 1;
    height: 100%;
    min-width: 0
}

.v15-trend-values {
    height: 150px;
    width: min(38px,75%);
    display: flex;
    align-items: flex-end
}

.v15-trend-values>i {
    position: relative;
    display: block;
    width: 100%;
    min-height: 5px;
    border-radius: 6px 6px 2px 2px;
    background: #cddceb;
    overflow: hidden
}

.v15-trend-values>i>b {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2268aa
}

.v15-trend-col>strong {
    font-size: 11px;
    color: #233f5a
}

.v15-trend-col>span {
    font-size: 9.5px;
    color: #8292a2;
    white-space: nowrap
}

.v15-chart-legend {
    display: flex;
    gap: 15px;
    margin-top: 12px;
    color: #718397;
    font-size: 10px
}

.v15-chart-legend span {
    display: flex;
    gap: 5px;
    align-items: center
}

.v15-chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #cddceb
}

.v15-chart-legend i.done {
    background: #2268aa
}

.v15-department-section {
    padding: 22px;
    margin-bottom: 14px
}

.v15-department-table {
    overflow: hidden;
    border: 1px solid #dce5ed;
    border-radius: 14px
}

.v15-department-head,.v15-department-row {
    display: grid;
    grid-template-columns: minmax(230px,1.6fr) .65fr .75fr .65fr .8fr .65fr .72fr;
    align-items: center;
    gap: 10px
}

.v15-department-head {
    padding: 10px 14px;
    background: #f4f7fa;
    color: #708397;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.v15-department-row {
    padding: 11px 14px;
    border-top: 1px solid #e5ebf1;
    color: #284159;
    text-decoration: none;
    background: #fff
}

.v15-department-row:hover {
    background: #fbfdff
}

.v15-department-row>span:not(.v15-department-name) {
    font-size: 11px;
    color: #51677e
}

.v15-department-row b {
    font-size: 12px;
    color: #17344e
}

.v15-department-name small,.v15-department-row span small {
    display: block;
    margin-top: 3px;
    color: #8292a2;
    font-size: 9.5px
}

.v15-attention {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    background: #edf2f7;
    color: #50667b
}

.v15-attention.good {
    background: #e8f6ef;
    color: #276b4d
}

.v15-attention.info {
    background: #eaf2fb;
    color: #356c9f
}

.v15-attention.warning {
    background: #fff3df;
    color: #996715
}

.v15-attention.danger {
    background: #fdecec;
    color: #a52f2f
}

.v15-heatmap-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-rows: 1fr 18px;
    gap: 6px;
    margin: 12px 0 0;
    padding: 8px 8px 17px 18px
}

.v15-heatmap {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,54px);
    gap: 5px
}

.v15-heatmap a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    text-decoration: none;
    border: 1px solid rgba(26,55,82,.08)
}

.v15-heatmap a b {
    font-size: 14px;
    color: #17324b
}

.v15-heatmap a small {
    font-size: 8px;
    color: #65798c
}

.v15-heatmap a.low {
    background: #eaf6ef
}

.v15-heatmap a.medium {
    background: #eef2c9
}

.v15-heatmap a.high {
    background: #ffebbf
}

.v15-heatmap a.critical {
    background: #f6cbcb
}

.v15-heat-y {
    display: grid;
    grid-template-rows: repeat(5,54px);
    gap: 5px;
    align-items: center;
    justify-items: center;
    color: #7e8f9f;
    font-size: 9px
}

.v15-heat-x {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    justify-items: center;
    color: #7e8f9f;
    font-size: 9px
}

.v15-heat-label-y {
    position: absolute;
    left: -18px;
    top: 50%;
    transform: rotate(-90deg) translateY(-50%);
    font-size: 9px;
    color: #8292a2;
    text-transform: uppercase;
    letter-spacing: .07em
}

.v15-heat-label-x {
    position: absolute;
    right: 10px;
    bottom: 0;
    font-size: 9px;
    color: #8292a2;
    text-transform: uppercase;
    letter-spacing: .07em
}

.v15-ranked-list {
    display: grid
}

.v15-ranked-list>a {
    display: grid;
    grid-template-columns: 32px 1fr 42px;
    gap: 10px;
    align-items: center;
    padding: 11px 3px;
    border-bottom: 1px solid #e4eaf0;
    text-decoration: none;
    color: #17344e
}

.v15-ranked-list>a:last-child {
    border-bottom: 0
}

.v15-ranked-list>a:hover b {
    color: #1d65a7
}

.v15-rank-no {
    font-size: 10px;
    color: #8a9aaa;
    font-weight: 800
}

.v15-ranked-list b {
    display: block;
    font-size: 12px
}

.v15-ranked-list small {
    display: block;
    margin-top: 4px;
    color: #7d8e9f;
    font-size: 9.5px
}

.v15-ranked-list strong {
    justify-self: end;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #f2f6f9;
    color: #173b5d;
    font-size: 12px
}

.v15-critical-feed-card {
    padding: 22px;
    margin-bottom: 14px
}

.v15-critical-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px
}

.v15-critical-feed>a {
    display: grid;
    grid-template-columns: 7px 1fr 18px;
    gap: 10px;
    align-items: center;
    padding: 11px 3px;
    border-bottom: 1px solid #e5ebf1;
    text-decoration: none;
    color: #18354f
}

.v15-feed-severity {
    width: 6px;
    height: 34px;
    border-radius: 99px;
    background: #8aa0b4
}

.v15-feed-severity.s4 {
    background: #c54141
}

.v15-feed-severity.s3 {
    background: #d18a26
}

.v15-feed-severity.s2 {
    background: #3d79af
}

.v15-critical-feed small {
    display: block;
    font-size: 8.5px;
    font-weight: 800;
    color: #74879a;
    text-transform: uppercase;
    letter-spacing: .045em
}

.v15-critical-feed b {
    display: block;
    font-size: 11.5px;
    margin-top: 2px
}

.v15-critical-feed em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    color: #8292a2;
    font-size: 9.5px
}

.v15-critical-feed>a>span:last-child {
    color: #9badbd
}

.v15-footer-summary {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1px;
    margin-bottom: 5px;
    background: #dce5ed;
    border: 1px solid #dce5ed;
    border-radius: 15px;
    overflow: hidden
}

.v15-footer-summary>div {
    background: #fff;
    padding: 14px 15px
}

.v15-footer-summary span {
    display: block;
    color: #7b8d9e;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .04em
}

.v15-footer-summary b {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #15344f
}

@media(max-width: 1320px) {
    .v15-kpi-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .v15-department-head,.v15-department-row {
        grid-template-columns: minmax(210px,1.5fr) .7fr .8fr .7fr .8fr .7fr
    }

    .v15-department-head span:nth-child(6),.v15-department-row>span:nth-child(6) {
        display: none
    }
}

@media(max-width: 980px) {
    .v15-exec-hero {
        align-items:flex-start;
        flex-direction: column;
        padding: 28px
    }

    .v15-exec-hero-actions {
        width: 100%
    }

    .v15-period-bar {
        align-items: flex-start;
        flex-direction: column
    }

    .v15-exec-grid,.v15-exec-grid-main {
        grid-template-columns: 1fr
    }

    .v15-department-head {
        display: none
    }

    .v15-department-row {
        grid-template-columns: 1.6fr repeat(4,.7fr);
        gap: 7px
    }

    .v15-department-row>span:nth-child(6),.v15-department-row>span:nth-child(7) {
        display: none
    }

    .v15-critical-feed {
        grid-template-columns: 1fr
    }

    .v15-footer-summary {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width: 680px) {
    .v15-exec-hero {
        margin-left:-2px;
        margin-right: -2px;
        border-radius: 18px;
        padding: 24px 20px
    }

    .v15-exec-hero h2 {
        font-size: 31px
    }

    .v15-exec-hero p {
        font-size: 13.5px
    }

    .v15-exec-hero-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .v15-exec-hero-actions .btn {
        justify-content: center
    }

    .v15-exec-context span {
        font-size: 10.5px
    }

    .v15-period-bar {
        padding: 8px
    }

    .v15-period-pills {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .v15-period-pills a {
        text-align: center;
        background: #f5f7fa
    }

    .v15-period-custom {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr
    }

    .v15-period-custom .btn {
        grid-column: 1/-1;
        justify-content: center
    }

    .v15-period-custom input {
        width: 100%;
        min-width: 0
    }

    .v15-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .v15-kpi {
        padding: 15px 13px;
        border-radius: 14px
    }

    .v15-kpi>span {
        min-height: 28px;
        font-size: 9px
    }

    .v15-kpi strong {
        font-size: 21px
    }

    .v15-kpi-primary strong {
        font-size: 18px
    }

    .v15-decision-card,.v15-trend-card,.v15-risk-card,.v15-top-risk-card,.v15-department-section,.v15-critical-feed-card {
        padding: 16px
    }

    .v15-department-table {
        border: 0;
        border-radius: 0
    }

    .v15-department-row {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 12px 2px
    }

    .v15-department-row>span:not(.v15-department-name) {
        display: none
    }

    .v15-department-row>span:last-child {
        display: block!important
    }

    .v15-heatmap {
        grid-template-rows: repeat(5,43px);
        gap: 4px
    }

    .v15-heat-y {
        grid-template-rows: repeat(5,43px);
        gap: 4px
    }

    .v15-trend-chart {
        height: 200px
    }

    .v15-trend-values {
        height: 128px
    }

    .v15-footer-summary {
        grid-template-columns: 1fr 1fr
    }

    .v15-footer-summary>div:last-child {
        grid-column: 1/-1
    }

    .v15-critical-feed b {
        font-size: 11px
    }
}

/* V16 — Akıllı Bildirim & Görev Motoru */
.v16-engine-hero,.v16-task-hero,.v16-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg,#0b1f33 0%,#153b61 100%);
    color: #fff;
    border: 0
}

.v16-engine-hero h2,.v16-task-hero h2,.v16-notif-head h2 {
    color: #fff;
    margin: 5px 0 7px;
    font-size: 28px
}

.v16-engine-hero p,.v16-task-hero p,.v16-notif-head p {
    color: #c6d5e3;
    margin: 0;
    max-width: 760px
}

.v16-engine-hero .eyebrow,.v16-task-hero .eyebrow,.v16-notif-head .eyebrow {
    color: #8fc3ff
}

.v16-rules-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin: 16px 0
}

.v16-rule-card {
    padding: 20px
}

.v16-rule-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center
}

.v16-rule-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #edf5ff;
    color: #1e5aa8
}

.v16-rule-icon .ui-icon {
    width: 20px;
    height: 20px
}

.v16-rule-top small {
    display: block;
    color: #6b7f93;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px
}

.v16-rule-top h3 {
    margin: 3px 0 0;
    color: #102a43;
    font-size: 16px
}

.v16-rule-card>p {
    color: #66788a;
    line-height: 1.55;
    font-size: 13px;
    min-height: 40px
}

.v16-sev {
    font-size: 10px;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2f6;
    color: #52667a
}

.v16-sev.critical {
    background: #fff0f0;
    color: #a61b1b
}

.v16-sev.high {
    background: #fff5e8;
    color: #9b5a00
}

.v16-sev.warning {
    background: #fff9dd;
    color: #7b6500
}

.v16-sev.info {
    background: #edf5ff;
    color: #1e5aa8
}

.v16-rule-switches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0
}

.v16-rule-switches label {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #dbe4ec;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 12px;
    background: #f8fafc
}

.v16-rule-switches input {
    accent-color: #1e5aa8
}

.form-grid.compact {
    gap: 8px
}

.form-grid.compact .field label {
    font-size: 11px
}

.v16-savebar {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    box-shadow: 0 15px 36px rgba(16,42,67,.14);
    padding: 14px 16px;
    margin: 16px 0
}

.v16-savebar strong,.v16-savebar small {
    display: block
}

.v16-savebar small {
    color: #7b8b9b;
    margin-top: 3px
}

.v16-mail-state {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800
}

.v16-mail-state.on {
    background: #e9f8ef;
    color: #16794b
}

.v16-mail-state.off {
    background: #fff2f0;
    color: #a83227
}

.v16-cron {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0b1f33;
    border-radius: 10px;
    padding: 12px
}

.v16-cron code {
    flex: 1;
    color: #d9ebff;
    white-space: normal;
    word-break: break-all;
    font-size: 12px
}

.v16-task-hero {
    padding: 26px 28px;
    border-radius: 18px;
    margin-bottom: 14px
}

.v16-task-kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(82px,1fr));
    gap: 8px
}

.v16-task-kpis>div {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    padding: 13px 15px;
    border-radius: 12px;
    text-align: center
}

.v16-task-kpis b {
    display: block;
    font-size: 23px;
    color: #fff
}

.v16-task-kpis span {
    font-size: 11px;
    color: #c6d5e3
}

.v16-task-kpis .danger {
    background: rgba(203,56,55,.18)
}

.v16-task-kpis .warning {
    background: rgba(218,139,24,.18)
}

.v16-task-kpis .info {
    background: rgba(30,90,168,.25)
}

.v16-task-tabs,.v16-notif-tabs,.v16-task-filter,.v16-notif-filters {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow: auto;
    padding: 2px 0 10px;
    scrollbar-width: none
}

.v16-task-tabs a,.v16-notif-tabs a,.v16-task-filter a,.v16-notif-filters a {
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid #d9e2ec;
    background: #fff;
    color: #52667a;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700
}

.v16-task-tabs a.active,.v16-notif-tabs a.active,.v16-task-filter a.active,.v16-notif-filters a.active {
    background: #0b1f33;
    color: #fff;
    border-color: #0b1f33
}

.v16-task-tabs b,.v16-notif-tabs b,.v16-task-filter b,.v16-notif-filters b {
    margin-left: 5px
}

.v16-task-filter,.v16-notif-filters {
    padding-bottom: 14px
}

.v16-task-filter a,.v16-notif-filters a {
    border-radius: 999px;
    padding: 7px 11px
}

.v16-task-list {
    padding: 0;
    overflow: hidden
}

.v16-task-list .card-header {
    padding: 18px 20px;
    margin: 0;
    border-bottom: 1px solid #edf1f5
}

.v16-task-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) 125px 210px;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: 1px solid #edf1f5;
    text-decoration: none;
    color: inherit;
    transition: .18s
}

.v16-task-row:hover {
    background: #f8fbff
}

.v16-task-type {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #edf5ff;
    color: #1e5aa8;
    display: grid;
    place-items: center
}

.v16-task-type .ui-icon {
    width: 20px;
    height: 20px
}

.v16-task-copy {
    min-width: 0
}

.v16-task-copy>strong {
    display: block;
    color: #102a43;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px 0
}

.v16-task-copy>small {
    display: block;
    color: #74879a;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.v16-task-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #75889a
}

.v16-task-meta b {
    font-size: 10px;
    color: #1e5aa8
}

.v16-task-due {
    text-align: right
}

.v16-task-due>small {
    display: block;
    color: #8090a0;
    font-size: 10px;
    margin-top: 5px
}

.v16-priority {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 800
}

.v16-priority.danger {
    background: #fff0f0;
    color: #a61b1b
}

.v16-priority.warning {
    background: #fff5e8;
    color: #9b5a00
}

.v16-priority.info {
    background: #edf5ff;
    color: #1e5aa8
}

.v16-priority.good {
    background: #edf8f2;
    color: #14734b
}

.v16-task-action {
    border-left: 1px solid #edf1f5;
    padding-left: 16px;
    position: relative;
    padding-right: 24px
}

.v16-task-action small,.v16-task-action b {
    display: block
}

.v16-task-action small {
    font-size: 10px;
    color: #8393a3
}

.v16-task-action b {
    font-size: 12px;
    color: #102a43;
    margin-top: 3px
}

.v16-task-action>.ui-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    color: #9aa9b7
}

.v16-notif-head {
    padding: 24px 28px
}

.v16-notif-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.v16-notif-list {
    padding: 0;
    overflow: hidden
}

.v16-notif-row {
    display: grid;
    grid-template-columns: 10px minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f5
}

.v16-notif-row.unread {
    background: #fbfdff
}

.v16-notif-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9eb0c0
}

.v16-notif-dot.critical {
    background: #c0392b
}

.v16-notif-dot.high {
    background: #e17b16
}

.v16-notif-dot.warning {
    background: #c6a100
}

.v16-notif-dot.info {
    background: #1e5aa8
}

.v16-notif-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px
}

.v16-notif-meta span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #1e5aa8;
    font-weight: 800
}

.v16-notif-meta small {
    font-size: 10px;
    color: #91a0af
}

.v16-notif-main>strong {
    font-size: 14px;
    color: #102a43
}

.v16-notif-main p {
    margin: 5px 0 0;
    color: #687c8e;
    font-size: 12px;
    line-height: 1.55
}

.v16-notif-row-actions {
    display: flex;
    gap: 6px
}

.v16-pref-rules {
    border: 1px solid #dfe7ee;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 14px
}

.v16-pref-head,.v16-pref-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 58px 68px;
    gap: 8px;
    align-items: center;
    padding: 10px 12px
}

.v16-pref-head {
    background: #f5f8fb;
    font-size: 10px;
    text-transform: uppercase;
    color: #788b9c;
    font-weight: 800
}

.v16-pref-row {
    border-top: 1px solid #edf1f5
}

.v16-pref-row b,.v16-pref-row small {
    display: block
}

.v16-pref-row b {
    font-size: 12px;
    color: #102a43
}

.v16-pref-row small {
    font-size: 10px;
    color: #8393a3;
    margin-top: 2px
}

.v16-pref-row label {
    text-align: center
}

.v16-pref-row input {
    accent-color: #1e5aa8
}

@media(max-width: 900px) {
    .v16-rules-grid {
        grid-template-columns:1fr
    }

    .v16-task-hero,.v16-engine-hero,.v16-notif-head {
        align-items: flex-start;
        flex-direction: column
    }

    .v16-task-kpis {
        width: 100%;
        grid-template-columns: repeat(4,1fr)
    }

    .v16-task-row {
        grid-template-columns: auto minmax(0,1fr) 110px
    }

    .v16-task-action {
        grid-column: 2/4;
        border-left: 0;
        border-top: 1px dashed #e1e8ee;
        padding: 10px 24px 0 0
    }

    .v16-notif-actions {
        justify-content: flex-start
    }
}

@media(max-width: 620px) {
    .v16-task-kpis {
        grid-template-columns:repeat(2,1fr)
    }

    .v16-task-row {
        grid-template-columns: auto minmax(0,1fr);
        gap: 10px;
        padding: 14px
    }

    .v16-task-due {
        grid-column: 2;
        text-align: left
    }

    .v16-task-action {
        grid-column: 2
    }

    .v16-task-copy>strong,.v16-task-copy>small {
        white-space: normal
    }

    .v16-notif-row {
        grid-template-columns: 8px minmax(0,1fr);
        align-items: start
    }

    .v16-notif-row-actions {
        grid-column: 2;
        justify-content: flex-start
    }

    .v16-savebar {
        position: static;
        flex-direction: column;
        align-items: stretch
    }

    .v16-cron {
        align-items: stretch;
        flex-direction: column
    }

    .v16-engine-hero .btn,.v16-notif-actions .btn {
        width: 100%
    }

    .v16-pref-head,.v16-pref-row {
        grid-template-columns: minmax(0,1fr) 48px 58px
    }

    .v16-rule-top {
        grid-template-columns: auto 1fr
    }

    .v16-sev {
        grid-column: 2;
        justify-self: start
    }
}

/* =========================================================
   V17 MEVZUAT & MERKEZI KONTROL KUTUPHANESI
   ========================================================= */
.v17-master-layout {
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap: 16px;
    align-items: start
}

.v17-version-list {
    position: sticky;
    top: 82px
}

.v17-version-list .card-header {
    padding-bottom: 10px
}

.v17-version-list nav {
    display: grid;
    gap: 7px
}

.v17-version {
    display: block;
    padding: 11px 12px;
    border: 1px solid #e2e9ef;
    border-radius: 12px;
    background: #fff;
    transition: .16s
}

.v17-version:hover {
    border-color: #bed0df;
    background: #f9fbfd;
    transform: translateY(-1px)
}

.v17-version.active {
    border-color: #9ebfe0;
    background: #eef6ff;
    box-shadow: 0 7px 24px rgba(29,92,151,.07)
}

.v17-version b,.v17-version small,.v17-version span {
    display: block
}

.v17-version b {
    font-size: 10.5px;
    color: #102a43
}

.v17-version small {
    font-size: 8.5px;
    color: #7e91a3;
    margin-top: 3px
}

.v17-version span {
    font-size: 8px;
    color: #1e5aa8;
    font-weight: 800;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: .6px
}

.v17-create {
    margin-top: 12px;
    border: 1px dashed #cddae6;
    border-radius: 12px;
    background: #fbfdff
}

.v17-create>summary {
    padding: 11px 12px;
    cursor: pointer;
    color: #1e5aa8;
    font-size: 10px;
    font-weight: 800;
    list-style: none
}

.v17-create>summary::-webkit-details-marker {
    display: none
}

.v17-create>form {
    border-top: 1px solid #e7edf3;
    padding: 14px
}

.v17-version-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px
}

.v17-version-head h1 {
    font-size: 25px;
    margin: 4px 0 5px
}

.v17-version-head p {
    font-size: 10.5px;
    color: var(--muted);
    margin: 0
}

.v17-version-head .actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.v17-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 14px 0
}

.v17-tabs a {
    border: 1px solid #dfe7ee;
    background: #f7fafc;
    border-radius: 99px;
    padding: 7px 10px;
    font-size: 9px;
    font-weight: 750;
    color: #526d84
}

.v17-tabs a:hover {
    background: #eef6ff;
    color: #1e5aa8;
    border-color: #bdd3e8
}

.v17-article-list {
    display: grid;
    gap: 8px
}

.v17-article-list article {
    border: 1px solid #e1e8ee;
    border-radius: 12px;
    padding: 12px;
    background: #fff
}

.v17-article-list article>header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.v17-article-list h3 {
    font-size: 12px;
    margin: 0;
    color: #102a43
}

.v17-article-list small {
    font-size: 8px;
    color: #8393a3
}

.v17-law-text {
    margin-top: 8px;
    border-left: 3px solid #c7d9e8;
    padding-left: 11px;
    color: #52697d;
    font-size: 9.5px;
    line-height: 1.65;
    white-space: pre-wrap
}

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

.v17-impact-grid>div {
    border: 1px solid #e2e9ef;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc
}

.v17-impact-grid span,.v17-impact-grid strong,.v17-impact-grid small {
    display: block
}

.v17-impact-grid span {
    font-size: 8px;
    color: #7d8fa0;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .5px
}

.v17-impact-grid strong {
    font-size: 18px;
    color: #102a43;
    margin-top: 4px
}

.v17-impact-grid small {
    font-size: 8px;
    color: #8a9aa9;
    margin-top: 2px
}

.v17-publish-form {
    border-top: 1px solid #e7edf2;
    padding-top: 14px
}

.v17-institution-picker {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin: 10px 0 14px;
    padding: 10px;
    background: #f6f9fc;
    border: 1px solid #e1e8ee;
    border-radius: 12px;
    max-height: 260px;
    overflow: auto
}

.v17-institution-picker label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px;
    border: 1px solid #e0e8ef;
    border-radius: 10px;
    background: #fff;
    cursor: pointer
}

.v17-institution-picker input {
    margin-top: 2px
}

.v17-institution-picker b,.v17-institution-picker small {
    display: block
}

.v17-institution-picker b {
    font-size: 9.5px;
    color: #102a43
}

.v17-institution-picker small {
    font-size: 7.5px;
    color: #8192a2;
    margin-top: 2px
}

.v17-published-list {
    display: grid;
    gap: 8px
}

.v17-published-list>div {
    border: 1px solid #e1e8ee;
    border-radius: 12px;
    padding: 12px
}

.v17-published-list strong,.v17-published-list small,.v17-published-list p {
    display: block
}

.v17-published-list strong {
    font-size: 11px;
    margin-top: 6px
}

.v17-published-list small {
    font-size: 8px;
    color: #8092a3;
    margin-top: 3px
}

.v17-published-list p {
    font-size: 9px;
    color: #61778b;
    line-height: 1.55;
    margin: 7px 0
}

.v17-published-list a {
    font-size: 8.5px;
    color: #1e5aa8;
    font-weight: 750
}

.v17-mini-list {
    display: grid;
    gap: 7px;
    margin-top: 11px
}

.v17-mini-list>div {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 4px 9px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid #e4eaf0;
    border-radius: 10px
}

.v17-mini-list>div>strong {
    font-size: 10px
}

.v17-mini-list>div>small {
    grid-column: 2;
    font-size: 8px;
    color: #8192a3
}

.v17-library-hero {
    background: linear-gradient(135deg,#0b2945,#174e7d);
    border: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.v17-library-hero .eyebrow {
    color: #9fc8ec
}

.v17-library-hero h2 {
    font-size: 21px;
    margin: 5px 0
}

.v17-library-hero p {
    max-width: 800px;
    color: #c5d5e2;
    font-size: 10px;
    line-height: 1.65;
    margin: 0
}

.v17-library-hero .btn {
    background: #fff;
    color: #174e7d;
    white-space: nowrap
}

.v17-legal-advice {
    margin-top: 10px;
    padding: 13px 14px;
    border: 1px solid #c9dcec;
    border-left: 4px solid #2874b8;
    border-radius: 11px;
    background: #f2f8fd
}

.v17-legal-advice>div:first-child {
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .7px;
    color: #1e5aa8;
    text-transform: uppercase
}

.v17-legal-advice strong {
    display: block;
    font-size: 11px;
    color: #102a43;
    margin-top: 4px
}

.v17-legal-advice p {
    font-size: 9px;
    line-height: 1.55;
    color: #5e7488;
    margin: 5px 0
}

.v17-legal-advice small {
    display: block;
    font-size: 8px;
    color: #7f91a2
}

.v17-legal-advice a {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 750;
    color: #1e5aa8;
    margin-top: 7px
}

.v17-targets {
    margin-top: 12px;
    border: 1px solid #e0e7ed;
    border-radius: 12px
}

.v17-targets>summary {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
    color: #526d83
}

.v17-targets>div {
    border-top: 1px solid #e7edf2
}

.muted-row {
    opacity: .55;
    background: #f8fafc
}

.v17-policy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 99px;
    padding: 4px 7px;
    background: #eef5fb;
    color: #2b608d;
    font-size: 7.5px;
    font-weight: 800
}

.v17-policy.locked {
    background: #eef1f4;
    color: #55687a
}

.v17-master-note {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff8e8;
    border: 1px solid #f1dfb6;
    color: #765a18;
    font-size: 9px;
    line-height: 1.55
}

@media(max-width: 1100px) {
    .v17-master-layout {
        grid-template-columns:1fr
    }

    .v17-version-list {
        position: static
    }

    .v17-version-list nav {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .v17-impact-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .v17-institution-picker {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width: 680px) {
    .v17-version-list nav {
        grid-template-columns:1fr
    }

    .v17-version-head,.v17-library-hero {
        flex-direction: column;
        align-items: flex-start
    }

    .v17-version-head .actions {
        justify-content: flex-start
    }

    .v17-impact-grid {
        grid-template-columns: 1fr 1fr
    }

    .v17-institution-picker {
        grid-template-columns: 1fr
    }

    .v17-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px
    }

    .v17-tabs a {
        white-space: nowrap
    }

    .v17-library-hero .btn {
        width: 100%
    }

    .v17-impact-grid>div {
        padding: 10px
    }

    .v17-impact-grid strong {
        font-size: 16px
    }
}

/* V18 Denetim Hazırlık Merkezi */
.v18-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    background: linear-gradient(135deg,#0b2846,#143f69);
    border-radius: 22px;
    padding: 28px 30px;
    color: #fff;
    margin-bottom: 18px;
    overflow: hidden;
    position: relative
}

.v18-hero:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    right: -70px;
    top: -120px
}

.v18-hero .eyebrow {
    color: #8fc0ef
}

.v18-hero h1 {
    font-size: 30px;
    margin: 7px 0 8px;
    color: #fff
}

.v18-hero p {
    max-width: 760px;
    color: #cbd9e6;
    margin: 0;
    line-height: 1.65
}

.v18-audit-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.v18-audit-card {
    display: block;
    background: #fff;
    border: 1px solid #dfe7ef;
    border-radius: 17px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 18px rgba(15,40,65,.035);
    transition: .18s
}

.v18-audit-card:hover {
    transform: translateY(-2px);
    border-color: #aac4df;
    box-shadow: 0 12px 30px rgba(15,40,65,.08)
}

.v18-audit-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center
}

.v18-audit-card h3 {
    font-size: 17px;
    margin: 14px 0 6px;
    color: #112f4b
}

.v18-audit-card p,.v18-period {
    font-size: 12px;
    color: #708296;
    margin: 0 0 7px
}

.v18-score-row {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 16px
}

.v18-score-row>div:first-child {
    display: flex;
    flex-direction: column
}

.v18-score-row b {
    font-size: 22px;
    color: #123f74
}

.v18-score-row span {
    font-size: 10px;
    color: #8191a2
}

.v18-score-track {
    height: 8px;
    background: #edf2f6;
    border-radius: 999px;
    overflow: hidden
}

.v18-score-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#2a77c7,#55a4e8);
    border-radius: 999px
}

.v18-card-stats {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #edf1f5;
    margin-top: 15px;
    padding-top: 12px;
    font-size: 11px;
    color: #728397
}

.v18-card-stats b {
    color: #193a5c
}

.v18-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 16px
}

.v18-detail-head h1 {
    font-size: 28px;
    margin: 5px 0
}

.v18-detail-head p {
    margin: 0;
    color: #6d8094
}

.v18-head-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.v18-head-actions form {
    margin: 0
}

.v18-readiness-panel {
    display: grid;
    grid-template-columns: 260px 1fr;
    background: #0c2c4b;
    border-radius: 20px;
    color: #fff;
    overflow: hidden;
    margin-bottom: 14px
}

.v18-big-score {
    padding: 24px 26px;
    border-right: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column
}

.v18-big-score span {
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #9dbbd5;
    font-weight: 800
}

.v18-big-score b {
    font-size: 48px;
    line-height: 1.15;
    margin: 8px 0 3px
}

.v18-big-score small {
    color: #cbd9e6
}

.v18-score-facts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-content: center
}

.v18-score-facts div {
    padding: 17px 20px;
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.v18-score-facts b {
    display: block;
    font-size: 22px
}

.v18-score-facts span {
    font-size: 10px;
    color: #abc0d3
}

.v18-toolbar {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e0e7ee;
    border-radius: 13px;
    padding: 10px 12px;
    margin-bottom: 14px
}

.v18-toolbar form {
    margin: 0
}

.v18-tabs {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding: 4px 0 14px
}

.v18-tabs a {
    white-space: nowrap;
    text-decoration: none;
    background: #eef3f7;
    color: #36536e;
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750
}

.v18-mini-score {
    display: flex;
    flex-direction: column;
    line-height: 1.1
}

.v18-mini-score b {
    font-size: 15px
}

.v18-mini-score span {
    font-size: 10px
}

.v18-mini-score.ok {
    color: #178251
}

.v18-mini-score.warn {
    color: #b66a00
}

.v18-mini-score.bad {
    color: #b42318
}

.v18-request,.v18-finding {
    border: 1px solid #e1e8ef;
    border-radius: 12px;
    padding: 13px;
    margin-bottom: 9px
}

.v18-request>div:first-child,.v18-finding>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.v18-request small,.v18-finding small,.v18-share-row small,.v18-package-row small {
    color: #75879a
}

.v18-inline-update {
    display: grid;
    grid-template-columns: 130px 1fr minmax(160px,1fr) auto;
    gap: 7px;
    margin-top: 10px
}

.v18-finding p {
    font-size: 12px;
    color: #5c7186;
    margin: 6px 0
}

.v18-finding-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px
}

.v18-create-box {
    border-top: 1px dashed #d7e0e8;
    margin-top: 12px;
    padding-top: 12px
}

.v18-create-box summary {
    cursor: pointer;
    color: #164f83;
    font-weight: 800;
    font-size: 13px
}

.v18-share-row,.v18-package-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f4
}

.v18-share-row>div,.v18-package-row>div {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.v18-package-row code {
    font-size: 10px;
    color: #47627d;
    background: #f0f4f7;
    padding: 5px 7px;
    border-radius: 7px
}

.form-grid.compact {
    margin-top: 12px
}

.back-link {
    font-size: 12px;
    color: #557794;
    text-decoration: none
}

.span-3 {
    grid-column: span 3
}

@media(max-width: 1050px) {
    .v18-audit-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .v18-readiness-panel {
        grid-template-columns: 220px 1fr
    }
}

@media(max-width: 760px) {
    .v18-hero,.v18-detail-head {
        display:block
    }

    .v18-hero .btn,.v18-head-actions {
        margin-top: 16px
    }

    .v18-head-actions {
        display: flex;
        flex-wrap: wrap
    }

    .v18-audit-grid {
        grid-template-columns: 1fr
    }

    .v18-readiness-panel {
        grid-template-columns: 1fr
    }

    .v18-big-score {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .v18-score-facts {
        grid-template-columns: repeat(2,1fr)
    }

    .v18-inline-update {
        grid-template-columns: 1fr
    }

    .v18-share-row,.v18-package-row {
        align-items: flex-start;
        flex-direction: column
    }

    .span-3 {
        grid-column: 1/-1
    }

    .v18-hero h1 {
        font-size: 25px
    }

    .v18-detail-head h1 {
        font-size: 23px
    }
}

.v18-request-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

.v18-request-files span {
    font-size: 10px;
    color: #4d657c;
    background: #edf3f7;
    border-radius: 7px;
    padding: 5px 7px
}

@media(max-width: 760px) {
    .v18-inline-update {
        grid-template-columns:1fr!important
    }
}

.v18-request-files a {
    font-size: 10px;
    color: #285c8d;
    background: #edf3f7;
    border-radius: 7px;
    padding: 5px 7px;
    text-decoration: none
}

.v18-request-files a:hover {
    text-decoration: underline
}

/* V19 Eğitim, Yardım & Onboarding Merkezi */
.v19-learning-hero,.v19-help-hero,.v19-support-hero,.v19-health-hero,.v19-release-hero,.v19-lab-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
    border-radius: 22px;
    background: linear-gradient(135deg,#0b2846,#174d79);
    color: #fff;
    border: 0;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden
}

.v19-learning-hero:after,.v19-help-hero:after,.v19-support-hero:after,.v19-health-hero:after,.v19-release-hero:after,.v19-lab-hero:after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    right: -70px;
    top: -130px
}

.v19-learning-hero .eyebrow,.v19-help-hero .eyebrow,.v19-support-hero .eyebrow,.v19-health-hero .eyebrow,.v19-release-hero .eyebrow,.v19-lab-hero .eyebrow {
    color: #98c7f1
}

.v19-learning-hero h2,.v19-help-hero h2,.v19-support-hero h2,.v19-health-hero h2,.v19-release-hero h2,.v19-lab-hero h2 {
    color: #fff;
    font-size: 25px;
    margin: 5px 0 7px
}

.v19-learning-hero p,.v19-help-hero p,.v19-support-hero p,.v19-health-hero p,.v19-release-hero p,.v19-lab-hero p {
    color: #c9d8e5;
    max-width: 760px;
    margin: 0;
    line-height: 1.65
}

.v19-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px
}

.v19-progress-orb {
    width: 160px;
    height: 160px;
    border: 10px solid rgba(255,255,255,.12);
    border-top-color: #71b9ef;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    position: relative;
    z-index: 1
}

.v19-progress-orb b {
    font-size: 32px;
    color: #fff
}

.v19-progress-orb span {
    font-size: 10px;
    color: #d8e4ef
}

.v19-progress-orb small {
    font-size: 8px;
    color: #9eb7cb;
    margin-top: 4px
}

.v19-learning-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px
}

.v19-learning-card {
    padding: 18px;
    min-height: 250px;
    display: flex;
    flex-direction: column
}

.v19-learning-card.done {
    background: #f7fbf9;
    border-color: #cce6d7
}

.v19-learning-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.v19-module-no {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #4e6f8c
}

.v19-learning-card h3 {
    font-size: 16px;
    color: #153752;
    margin: 16px 0 7px
}

.v19-learning-card p {
    font-size: 10.5px;
    line-height: 1.65;
    color: #677d90;
    margin: 0
}

.v19-module-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
    color: #7a8d9f;
    font-size: 9px
}

.v19-module-meta span {
    display: flex;
    align-items: center;
    gap: 4px
}

.v19-module-meta svg {
    width: 13px;
    height: 13px
}

.v19-module-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 12px
}

.v19-module-actions form {
    margin: 0
}

.v19-completed-at {
    font-size: 8px;
    color: #769085;
    margin-top: 8px
}

.v19-next-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding: 22px
}

.v19-next-help h2 {
    margin: 4px 0 5px;
    font-size: 18px
}

.v19-next-help p {
    margin: 0;
    color: #6d8295;
    font-size: 10px
}

.v19-help-button {
    position: relative
}

.v19-help-count {
    position: absolute;
    right: -4px;
    top: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 10px;
    background: #1f6feb;
    color: #fff;
    font-size: 8px;
    display: grid;
    place-items: center;
    font-weight: 800
}

.v19-menu-badge {
    display: inline-grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    padding: 0 4px;
    background: #1f6feb;
    color: #fff;
    font-size: 8px;
    margin-left: 4px
}

.v19-help-search {
    width: min(430px,100%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 12px;
    padding: 7px;
    position: relative;
    z-index: 1
}

.v19-help-search svg {
    width: 17px;
    color: #58748d;
    margin-left: 5px
}

.v19-help-search input {
    flex: 1;
    border: 0!important;
    box-shadow: none!important;
    outline: 0
}

.v19-help-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 270px;
    gap: 15px;
    align-items: start
}

.v19-help-section {
    margin-bottom: 18px
}

.v19-help-section .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.v19-help-section .section-head h2 {
    font-size: 16px
}

.v19-help-section .section-head span {
    font-size: 9px;
    color: #8192a3
}

.v19-help-article {
    padding: 0!important;
    margin-bottom: 8px;
    overflow: hidden
}

.v19-help-article>summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 16px 18px
}

.v19-help-article>summary::-webkit-details-marker {
    display: none
}

.v19-help-article>summary strong,.v19-help-article>summary small {
    display: block
}

.v19-help-article>summary strong {
    font-size: 12px;
    color: #183b57
}

.v19-help-article>summary small {
    font-size: 9px;
    color: #7890a3;
    margin-top: 4px
}

.v19-help-article>summary>span {
    font-size: 20px;
    color: #5a7892
}

.v19-help-body {
    padding: 0 18px 18px;
    border-top: 1px solid #edf1f4
}

.v19-help-body p {
    font-size: 10.5px;
    line-height: 1.8;
    color: #546d82
}

.v19-help-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.v19-help-side {
    position: sticky;
    top: 92px;
    padding: 16px
}

.v19-help-side h3 {
    font-size: 13px;
    margin: 0 0 8px
}

.v19-help-side a {
    display: block;
    padding: 10px 8px;
    border-bottom: 1px solid #edf1f4;
    text-decoration: none;
    color: #315d82;
    font-size: 10px;
    font-weight: 750
}

.v19-help-admin {
    margin-top: 12px;
    padding: 14px
}

.v19-help-admin>summary,.v19-release-admin>summary {
    cursor: pointer;
    font-weight: 800;
    color: #234f75
}

.v19-lab-layout {
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
    gap: 14px
}

.v19-scenario-nav {
    padding: 8px;
    display: grid;
    gap: 4px
}

.v19-scenario-nav a {
    display: block;
    text-decoration: none;
    padding: 13px;
    border-radius: 11px;
    border: 1px solid transparent
}

.v19-scenario-nav a.active {
    background: #edf5fb;
    border-color: #c7dcec
}

.v19-scenario-nav strong,.v19-scenario-nav small {
    display: block
}

.v19-scenario-nav strong {
    font-size: 11px;
    color: #193b57
}

.v19-scenario-nav small {
    font-size: 8.5px;
    color: #7b8e9f;
    margin-top: 4px
}

.v19-sim-card {
    padding: 20px
}

.v19-sim-head {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
    align-items: center
}

.v19-sim-head small {
    font-size: 8px;
    color: #7b8fa2
}

.v19-sim-head h2 {
    font-size: 19px;
    margin: 4px 0
}

.v19-sim-head p {
    font-size: 10px;
    color: #6d8194
}

.v19-sim-progress {
    height: 8px;
    background: #edf2f6;
    border-radius: 10px;
    overflow: hidden
}

.v19-sim-progress span {
    display: block;
    height: 100%;
    background: #2f80c7;
    border-radius: 10px
}

.v19-sim-screen {
    padding: 20px 0
}

.v19-sim-window {
    border: 1px solid #dce5ec;
    border-radius: 15px;
    overflow: hidden;
    background: #f7fafc
}

.v19-sim-window-head {
    height: 35px;
    background: #eaf0f5;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    color: #7890a4;
    font-size: 8px
}

.v19-sim-window-head i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b7c5d1
}

.v19-sim-window-head span {
    margin-left: 7px
}

.v19-sim-content {
    padding: 32px;
    min-height: 200px
}

.v19-sim-step-no {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #173f64;
    color: #fff;
    font-weight: 900
}

.v19-sim-content h3 {
    font-size: 19px;
    margin: 14px 0 7px;
    color: #173a57
}

.v19-sim-content p {
    font-size: 11px;
    line-height: 1.7;
    color: #6a7f92
}

.v19-sim-actions {
    display: flex;
    justify-content: space-between
}

.v19-support-kpis {
    display: grid;
    grid-template-columns: repeat(4,84px);
    gap: 7px;
    position: relative;
    z-index: 1
}

.v19-support-kpis span {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    padding: 10px;
    text-align: center
}

.v19-support-kpis b,.v19-support-kpis small {
    display: block
}

.v19-support-kpis b {
    font-size: 20px
}

.v19-support-kpis small {
    font-size: 8px;
    color: #b8cddd
}

.v19-support-layout,.v19-ticket-layout,.v19-release-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 15px;
    align-items: start
}

.v19-ticket-list {
    display: grid
}

.v19-ticket-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 13px 0;
    border-bottom: 1px solid #edf1f4
}

.v19-ticket-row>div {
    min-width: 0
}

.v19-ticket-row strong,.v19-ticket-row small {
    display: block
}

.v19-ticket-row strong {
    font-size: 11px;
    color: #193a57;
    margin-top: 5px
}

.v19-ticket-row small {
    font-size: 8.5px;
    color: #8192a3;
    margin-top: 4px
}

.v19-new-ticket {
    padding: 18px
}

.v19-new-ticket h2 {
    font-size: 16px;
    margin: 0
}

.v19-new-ticket p {
    font-size: 9.5px;
    color: #768a9d
}

.btn.full {
    width: 100%;
    justify-content: center
}

.v19-ticket-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px;
    margin-bottom: 14px
}

.v19-ticket-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px
}

.v19-ticket-title h2 {
    font-size: 18px;
    margin: 0
}

.v19-ticket-head p,.v19-ticket-head small {
    color: #72879a;
    font-size: 9px
}

.v19-ticket-original,.v19-message,.v19-reply-box {
    padding: 17px;
    margin-bottom: 10px
}

.v19-ticket-original p,.v19-message p {
    font-size: 11px;
    line-height: 1.75;
    color: #526a7f
}

.v19-message.platform {
    border-left: 4px solid #2a76b8;
    background: #f5f9fd
}

.v19-message header strong,.v19-message header small {
    display: block
}

.v19-message header strong {
    font-size: 11px
}

.v19-message header small {
    font-size: 8px;
    color: #8394a3;
    margin-top: 3px
}

.v19-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #edf3f7;
    color: #315d82;
    text-decoration: none;
    font-size: 9px;
    margin: 4px 4px 0 0
}

.v19-file-chip svg {
    width: 12px
}

.v19-file-chip small {
    font-size: 7px
}

.v19-reply-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center
}

.v19-ticket-admin,.v19-ticket-info {
    padding: 16px;
    margin-bottom: 12px
}

.v19-ticket-admin h3,.v19-ticket-info h3 {
    font-size: 13px;
    margin-top: 0
}

.v19-ticket-info>div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f4
}

.v19-ticket-info span {
    font-size: 8.5px;
    color: #7e91a2
}

.v19-ticket-info b {
    font-size: 9px;
    text-align: right
}

.v19-release-count,.v19-health-summary {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px 15px;
    font-weight: 800
}

.v19-release-card {
    padding: 20px;
    margin-bottom: 11px
}

.v19-release-card.unread {
    border-left: 4px solid #2a79bd
}

.v19-release-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8193a3;
    font-size: 9px
}

.v19-release-card h2 {
    font-size: 18px;
    margin: 12px 0 6px
}

.v19-release-card p {
    font-size: 10.5px;
    line-height: 1.75;
    color: #5b7185
}

.v19-release-card .lead {
    font-size: 11px;
    color: #314f69;
    font-weight: 650
}

.v19-release-admin {
    padding: 16px;
    position: sticky;
    top: 92px
}

.v19-health-summary {
    display: flex;
    flex-direction: column;
    text-align: center
}

.v19-health-summary b {
    font-size: 23px
}

.v19-health-summary span {
    font-size: 8px;
    color: #c6d7e5
}

.v19-health-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.v19-health-card {
    padding: 18px
}

.v19-health-card>header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center
}

.v19-health-card h3 {
    font-size: 14px;
    margin: 0
}

.v19-health-card header small {
    font-size: 8px;
    color: #8193a4
}

.v19-health-score {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 10px;
    align-items: center;
    margin: 18px 0
}

.v19-health-score>b {
    font-size: 20px;
    color: #173f63
}

.v19-health-score>div {
    height: 8px;
    background: #edf2f6;
    border-radius: 8px;
    overflow: hidden
}

.v19-health-score span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#2d78b8,#5aa4df)
}

.v19-health-factors {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px
}

.v19-health-factors div {
    padding: 9px;
    background: #f6f9fb;
    border-radius: 9px
}

.v19-health-factors span,.v19-health-factors b {
    display: block
}

.v19-health-factors span {
    font-size: 7.5px;
    color: #8192a2
}

.v19-health-factors b {
    font-size: 11px;
    color: #244761;
    margin-top: 4px
}

.v19-health-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 13px
}

.v19-health-users {
    margin-top: 12px;
    border-top: 1px solid #edf1f4;
    padding-top: 10px
}

.v19-health-users>summary {
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
    color: #567189
}

.v19-health-users>div {
    display: grid;
    gap: 5px;
    margin-top: 8px
}

.v19-health-users span {
    display: grid;
    grid-template-columns: 1fr 120px 42px;
    gap: 8px;
    align-items: center;
    font-size: 8.5px;
    padding: 6px 8px;
    background: #f8fafc;
    border-radius: 7px
}

.v19-health-users small {
    color: #8193a4
}

.v19-health-users i {
    text-align: right;
    font-style: normal;
    font-weight: 800;
    color: #245d8d
}

@media(max-width: 1100px) {
    .v19-learning-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .v19-help-layout,.v19-support-layout,.v19-ticket-layout,.v19-release-layout {
        grid-template-columns: 1fr
    }

    .v19-help-side,.v19-release-admin {
        position: static
    }

    .v19-health-grid {
        grid-template-columns: 1fr
    }

    .v19-support-kpis {
        grid-template-columns: repeat(2,84px)
    }
}

@media(max-width: 760px) {
    .v19-learning-hero,.v19-help-hero,.v19-support-hero,.v19-health-hero,.v19-release-hero,.v19-lab-hero,.v19-next-help {
        display:block;
        padding: 21px
    }

    .v19-learning-hero h2,.v19-help-hero h2,.v19-support-hero h2,.v19-health-hero h2,.v19-release-hero h2,.v19-lab-hero h2 {
        font-size: 21px
    }

    .v19-progress-orb {
        width: 120px;
        height: 120px;
        margin-top: 18px
    }

    .v19-learning-grid {
        grid-template-columns: 1fr
    }

    .v19-hero-actions,.v19-module-actions,.v19-help-actions,.v19-health-actions,.v19-reply-actions {
        flex-wrap: wrap
    }

    .v19-next-help>div:last-child {
        margin-top: 14px
    }

    .v19-help-search {
        margin-top: 16px;
        display: grid;
        grid-template-columns: auto 1fr
    }

    .v19-help-search .btn {
        grid-column: 1/-1
    }

    .v19-lab-layout {
        grid-template-columns: 1fr
    }

    .v19-scenario-nav {
        grid-template-columns: 1fr 1fr
    }

    .v19-sim-head {
        grid-template-columns: 1fr
    }

    .v19-sim-content {
        padding: 20px
    }

    .v19-support-kpis {
        margin-top: 16px;
        grid-template-columns: repeat(2,1fr)
    }

    .v19-ticket-head {
        display: block
    }

    .v19-ticket-head>span {
        display: inline-block;
        margin-top: 10px
    }

    .v19-health-factors {
        grid-template-columns: repeat(2,1fr)
    }

    .v19-health-users span {
        grid-template-columns: 1fr 70px
    }

    .v19-health-users small {
        display: none
    }

    .v19-release-count,.v19-health-summary {
        display: inline-flex;
        margin-top: 14px
    }

    .v19-sim-actions {
        gap: 8px
    }

    .v19-sim-actions .btn {
        font-size: 9px
    }

    .v19-scenario-nav a {
        padding: 10px
    }
}

/* V20 - Stabilizasyon, Sistem Doktoru & Final Üretim */
.v20-doctor-hero,.v20-ready-hero {
    display: grid;
    grid-template-columns: 150px minmax(0,1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 26px;
    background: linear-gradient(135deg,#f8fbfe 0%,#fff 52%,#eef5fb 100%);
    border: 1px solid #d9e5ef;
    overflow: hidden;
    position: relative
}

.v20-doctor-hero:before,.v20-ready-hero:before {
    content: "";
    position: absolute;
    right: -80px;
    top: -100px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid #dce9f4;
    box-shadow: 0 0 0 35px rgba(33,98,153,.03),0 0 0 70px rgba(33,98,153,.025)
}

.v20-doctor-score,.v20-final-score {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: #eef5fa;
    border: 9px solid #cddce9;
    position: relative;
    z-index: 1
}

.v20-doctor-score b,.v20-final-score b {
    font-size: 29px;
    line-height: 1;
    color: #173e5f
}

.v20-doctor-score span,.v20-final-score span {
    display: block;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: .8px;
    margin-top: 7px;
    color: #5f768a
}

.v20-doctor-score.ready,.v20-final-score.ready {
    border-color: #8fd0b1;
    background: #f0faf5
}

.v20-doctor-score.warning,.v20-final-score.warning {
    border-color: #efca77;
    background: #fff9eb
}

.v20-doctor-score.bad,.v20-final-score.bad {
    border-color: #e9a5a5;
    background: #fff4f4
}

.v20-doctor-copy,.v20-ready-hero>div:nth-child(2) {
    position: relative;
    z-index: 1
}

.v20-doctor-copy h2,.v20-ready-hero h2 {
    font-size: 23px;
    margin: 5px 0 8px;
    color: #153a58
}

.v20-doctor-copy p,.v20-ready-hero p {
    font-size: 10.5px;
    line-height: 1.75;
    color: #647d91;
    max-width: 720px
}

.v20-doctor-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px
}

.v20-doctor-actions form {
    margin: 0
}

.v20-live-state {
    position: relative;
    z-index: 1;
    min-width: 115px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dbe5ed;
    text-align: right
}

.v20-live-state .status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4aa277;
    margin-right: 4px
}

.v20-live-state small,.v20-live-state b {
    display: block
}

.v20-live-state small {
    font-size: 7.5px;
    color: #8a9aa9;
    margin-top: 6px
}

.v20-live-state b {
    font-size: 11px;
    color: #244a68;
    margin-top: 3px
}

.v20-area-grid,.v20-readiness-areas {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 14px
}

.v20-area-card,.v20-readiness-areas>article {
    padding: 17px
}

.v20-area-card header,.v20-readiness-areas article>header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.v20-area-card header small,.v20-readiness-areas header small {
    display: block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #8194a5;
    font-weight: 800
}

.v20-area-card header strong,.v20-readiness-areas header h3 {
    display: block;
    font-size: 22px;
    margin: 3px 0 0;
    color: #153c5c
}

.v20-state {
    min-width: 42px;
    text-align: center;
    border-radius: 999px;
    padding: 5px 7px;
    font-size: 8px;
    font-weight: 900
}

.v20-state.good {
    background: #e8f7ef;
    color: #277154
}

.v20-state.warn {
    background: #fff3da;
    color: #956819
}

.v20-state.bad {
    background: #fdeaea;
    color: #a14747
}

.v20-mini-progress {
    height: 6px;
    background: #edf2f6;
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0
}

.v20-mini-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#2d74b2,#5aa1db);
    border-radius: 8px
}

.v20-area-checks,.v20-check-table {
    display: grid;
    gap: 5px
}

.v20-area-checks>div,.v20-check-table>div {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 7px;
    align-items: start;
    padding: 7px 0;
    border-bottom: 1px solid #eef2f5
}

.v20-area-checks i,.v20-check-table i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 8px;
    font-style: normal;
    font-weight: 900
}

.v20-area-checks .ok i,.v20-check-table .ok i {
    background: #e4f5eb;
    color: #28714e
}

.v20-area-checks .bad i,.v20-check-table .bad i {
    background: #fdeaea;
    color: #a44949
}

.v20-area-checks b,.v20-area-checks small,.v20-check-table b,.v20-check-table small {
    display: block
}

.v20-area-checks b,.v20-check-table b {
    font-size: 9px;
    color: #284b66
}

.v20-area-checks small,.v20-check-table small {
    font-size: 7.5px;
    color: #8595a4;
    margin-top: 2px;
    line-height: 1.45
}

.v20-grid-gap {
    gap: 14px;
    margin-top: 14px
}

.v20-control-card {
    padding: 18px
}

.v20-control-card .switch-row {
    margin-bottom: 13px
}

.v20-facts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px
}

.v20-facts>div {
    padding: 12px;
    background: #f6f9fb;
    border-radius: 10px
}

.v20-facts small,.v20-facts b,.v20-facts span {
    display: block
}

.v20-facts small {
    font-size: 7px;
    color: #8999a8;
    text-transform: uppercase;
    letter-spacing: .4px
}

.v20-facts b {
    font-size: 11px;
    color: #214966;
    margin-top: 5px
}

.v20-facts span {
    font-size: 7.5px;
    color: #7c8f9f;
    margin-top: 3px
}

.v20-security-callout {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: #f5f9fc;
    border: 1px solid #dce7ef;
    border-radius: 11px;
    padding: 13px;
    margin-bottom: 12px
}

.v20-security-callout svg {
    width: 21px;
    color: #2e75ae
}

.v20-security-callout b {
    font-size: 10px;
    color: #244862
}

.v20-security-callout p {
    font-size: 8.5px;
    color: #778b9c;
    margin: 4px 0 0
}

.v20-issue-card {
    margin-top: 14px;
    padding: 18px
}

.v20-issue-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px
}

.v20-issue-list>div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 9px;
    background: #fff8f8;
    border: 1px solid #f0dada;
    border-radius: 10px;
    padding: 11px
}

.v20-issue-list>div>span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f7dddd;
    color: #a94d4d;
    font-weight: 900
}

.v20-issue-list small,.v20-issue-list b,.v20-issue-list p {
    display: block
}

.v20-issue-list small {
    font-size: 7px;
    color: #a77878
}

.v20-issue-list b {
    font-size: 9.5px;
    color: #5d3434;
    margin-top: 2px
}

.v20-issue-list p {
    font-size: 8px;
    color: #916565;
    margin: 3px 0 0
}

.v20-log-card {
    margin-top: 14px;
    padding: 18px
}

.v20-error-log {
    max-height: 360px;
    overflow: auto;
    background: #0d1720;
    color: #c9d7e2;
    border-radius: 11px;
    padding: 15px;
    font: 8.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    white-space: pre-wrap;
    word-break: break-word
}

.v20-ready-side {
    display: grid;
    grid-template-columns: repeat(3,90px);
    gap: 6px;
    position: relative;
    z-index: 1
}

.v20-ready-side>div {
    background: #fff;
    border: 1px solid #dbe5ed;
    border-radius: 10px;
    padding: 10px;
    text-align: center
}

.v20-ready-side small,.v20-ready-side b {
    display: block
}

.v20-ready-side small {
    font-size: 7px;
    color: #8395a5
}

.v20-ready-side b {
    font-size: 17px;
    color: #1f4968;
    margin-top: 4px
}

.v20-final-gate {
    margin-top: 14px;
    padding: 18px
}

.v20-gate-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px
}

.v20-gate-grid>div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 9px;
    align-items: center;
    padding: 11px;
    border-radius: 10px;
    background: #f7fafc;
    border: 1px solid #e0e8ef
}

.v20-gate-grid>div>span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900
}

.v20-gate-grid .ok>span {
    background: #e3f5eb;
    color: #276e4e
}

.v20-gate-grid .bad>span {
    background: #fde7e7;
    color: #a54646
}

.v20-gate-grid b,.v20-gate-grid small {
    display: block
}

.v20-gate-grid b {
    font-size: 9.5px;
    color: #284a64
}

.v20-gate-grid small {
    font-size: 7.5px;
    color: #8394a2;
    margin-top: 3px
}

.v20-pilot-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px
}

.v20-pilot-grid>div {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e0e8ee;
    border-radius: 10px
}

.v20-pilot-grid>div>span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #173f61;
    color: #fff;
    font-size: 9px;
    font-weight: 900
}

.v20-pilot-grid b,.v20-pilot-grid small {
    display: block
}

.v20-pilot-grid b {
    font-size: 10px;
    color: #234a68
}

.v20-pilot-grid small {
    font-size: 8px;
    line-height: 1.55;
    color: #7b8f9f;
    margin-top: 4px
}

@media(max-width: 1100px) {
    .v20-area-grid,.v20-readiness-areas {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .v20-doctor-hero,.v20-ready-hero {
        grid-template-columns: 125px minmax(0,1fr)
    }

    .v20-live-state,.v20-ready-side {
        grid-column: 1/-1;
        width: auto
    }

    .v20-ready-side {
        grid-template-columns: repeat(3,1fr)
    }

    .v20-gate-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width: 760px) {
    .v20-doctor-hero,.v20-ready-hero {
        display:block;
        padding: 20px
    }

    .v20-doctor-score,.v20-final-score {
        width: 112px;
        height: 112px;
        margin-bottom: 17px
    }

    .v20-doctor-score b,.v20-final-score b {
        font-size: 24px
    }

    .v20-doctor-copy h2,.v20-ready-hero h2 {
        font-size: 20px
    }

    .v20-live-state {
        margin-top: 15px;
        text-align: left
    }

    .v20-area-grid,.v20-readiness-areas,.v20-issue-list,.v20-pilot-grid,.v20-gate-grid {
        grid-template-columns: 1fr
    }

    .v20-facts {
        grid-template-columns: repeat(2,1fr)
    }

    .v20-ready-side {
        grid-template-columns: repeat(3,1fr);
        margin-top: 15px
    }

    .v20-doctor-actions .btn {
        width: 100%;
        justify-content: center
    }

    .v20-doctor-actions form {
        width: 100%
    }

    .v20-control-card .form-grid {
        grid-template-columns: 1fr!important
    }

    .v20-error-log {
        font-size: 7.8px;
        max-height: 280px
    }
}

/* ===== V21 Canlı Operasyon & Güvenlik ===== */
.v21-ops-hero {
    display: grid;
    grid-template-columns: 142px minmax(0,1fr) 210px;
    gap: 24px;
    align-items: center;
    padding: 26px;
    background: linear-gradient(135deg,#f7fbfe 0%,#fff 55%,#eef5fb 100%);
    border: 1px solid #d8e5ef;
    overflow: hidden;
    position: relative
}

.v21-ops-hero:after {
    content: "";
    position: absolute;
    right: -110px;
    top: -145px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid #d9e7f2;
    box-shadow: 0 0 0 42px rgba(28,91,145,.025),0 0 0 84px rgba(28,91,145,.018)
}

.v21-score {
    width: 126px;
    height: 126px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    border: 9px solid #cfdde8;
    background: #f3f7fa;
    position: relative;
    z-index: 1
}

.v21-score b {
    font-size: 28px;
    color: #153f60;
    line-height: 1
}

.v21-score span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
    color: #637c90;
    margin-top: 7px
}

.v21-score.ready {
    border-color: #8bd1ad;
    background: #eefaf4
}

.v21-score.warn {
    border-color: #eac771;
    background: #fff9ea
}

.v21-score.bad {
    border-color: #e7a0a0;
    background: #fff3f3
}

.v21-ops-hero>div:nth-child(2) {
    position: relative;
    z-index: 1
}

.v21-ops-hero h2 {
    font-size: 23px;
    color: #173c59;
    margin: 6px 0 8px
}

.v21-ops-hero p {
    color: #687e91;
    font-size: 10.5px;
    line-height: 1.7;
    max-width: 760px
}

.v21-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 13px
}

.v21-actions form {
    margin: 0
}

.v21-status-stack {
    display: grid;
    gap: 7px;
    position: relative;
    z-index: 1
}

.v21-status-stack span {
    display: block;
    background: #fff;
    border: 1px solid #dce6ee;
    border-radius: 11px;
    padding: 10px 12px
}

.v21-status-stack small,.v21-status-stack b {
    display: block
}

.v21-status-stack small {
    font-size: 7px;
    color: #8597a7;
    text-transform: uppercase;
    letter-spacing: .4px
}

.v21-status-stack b {
    font-size: 10px;
    color: #214a69;
    margin-top: 3px
}

.v21-live-card {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px auto;
    gap: 20px;
    align-items: center;
    padding: 20px 22px
}

.v21-live-card h2 {
    margin: 4px 0 5px;
    color: #173f5f
}

.v21-live-card p {
    font-size: 9px;
    color: #728699;
    margin: 0
}

.v21-live-gate {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid #dde7ee;
    border-radius: 11px;
    background: #f8fafc
}

.v21-live-gate>b {
    display: inline-flex;
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    letter-spacing: .8px
}

.v21-live-gate>b.on {
    background: #e4f6ec;
    color: #24704e
}

.v21-live-gate>b.off {
    background: #fff0d6;
    color: #936716
}

.v21-live-gate span {
    font-size: 9px;
    color: #375a73
}

.v21-live-gate small {
    font-size: 7.5px;
    color: #8092a2;
    line-height: 1.45
}

.v21-grid {
    gap: 14px;
    margin-top: 14px
}

.v21-section {
    margin-top: 14px
}

.v21-checks {
    display: grid;
    gap: 5px;
    margin-top: 14px
}

.v21-checks>div {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid #edf2f5
}

.v21-checks i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-style: normal;
    font-size: 8px;
    font-weight: 900
}

.v21-checks .ok i {
    background: #e4f5eb;
    color: #24704d
}

.v21-checks .bad i {
    background: #fbe6e6;
    color: #a34444
}

.v21-checks b,.v21-checks small {
    display: block
}

.v21-checks b {
    font-size: 9px;
    color: #284b65
}

.v21-checks small {
    font-size: 7.5px;
    color: #8395a4;
    margin-top: 2px
}

.v21-risk-list {
    display: grid;
    gap: 7px
}

.v21-risk-list>div {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px solid #eddada;
    background: #fff8f8;
    border-radius: 10px
}

.v21-risk-list>div>span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f5dada;
    color: #9d4444;
    font-weight: 900
}

.v21-risk-list b,.v21-risk-list small {
    display: block
}

.v21-risk-list b {
    font-size: 9.5px;
    color: #633b3b
}

.v21-risk-list small {
    font-size: 7.5px;
    color: #936d6d;
    margin-top: 3px
}

.v21-backup-banner {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 13px
}

.v21-backup-banner>span {
    padding: 11px 12px;
    border: 1px solid #e0e8ee;
    background: #f8fafc;
    border-radius: 10px
}

.v21-backup-banner small,.v21-backup-banner b {
    display: block
}

.v21-backup-banner small {
    font-size: 7px;
    color: #8797a5;
    text-transform: uppercase;
    letter-spacing: .4px
}

.v21-backup-banner b {
    font-size: 9px;
    color: #294b63;
    margin-top: 4px;
    word-break: break-word
}

.v21-row-actions {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap
}

.v21-row-actions form {
    margin: 0
}

.v21-restore {
    position: relative
}

.v21-restore>summary {
    list-style: none;
    cursor: pointer
}

.v21-restore>summary::-webkit-details-marker {
    display: none
}

.v21-restore[open]>form {
    display: grid;
    gap: 8px;
    position: absolute;
    right: 0;
    top: 34px;
    width: 290px;
    padding: 13px;
    background: #fff;
    border: 1px solid #e7cccc;
    border-radius: 11px;
    box-shadow: 0 16px 46px rgba(69,25,25,.16);
    z-index: 80
}

.v21-restore p {
    font-size: 8px;
    line-height: 1.55;
    color: #805d5d;
    margin: 0
}

.v21-restore input {
    width: 100%
}

.v21-section td small,.v21-section td b {
    display: block
}

.v21-section td small {
    font-size: 7.5px;
    color: #8193a2;
    margin-top: 3px
}

.v21-section td code {
    font-size: 8px
}

.v21-section .table-wrap {
    overflow: visible
}

.v21-section table {
    min-width: 780px
}

@media(max-width: 1100px) {
    .v21-ops-hero {
        grid-template-columns:125px minmax(0,1fr)
    }

    .v21-status-stack {
        grid-column: 1/-1;
        grid-template-columns: repeat(3,1fr)
    }

    .v21-live-card {
        grid-template-columns: 1fr 1fr
    }

    .v21-live-card form {
        grid-column: 1/-1
    }

    .v21-backup-banner {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 760px) {
    .v21-ops-hero {
        display:block;
        padding: 20px
    }

    .v21-score {
        width: 110px;
        height: 110px;
        margin-bottom: 16px
    }

    .v21-score b {
        font-size: 24px
    }

    .v21-ops-hero h2 {
        font-size: 20px
    }

    .v21-actions .btn,.v21-actions form {
        width: 100%
    }

    .v21-status-stack {
        grid-template-columns: 1fr;
        margin-top: 14px
    }

    .v21-live-card {
        display: block
    }

    .v21-live-gate {
        margin: 13px 0
    }

    .v21-live-card .btn {
        width: 100%
    }

    .v21-grid {
        grid-template-columns: 1fr!important
    }

    .v21-backup-banner {
        grid-template-columns: 1fr
    }

    .v21-restore[open]>form {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 14px;
        top: auto;
        width: auto;
        z-index: 200
    }

    .v21-section .table-wrap {
        overflow: auto
    }
}

/* V22 SaaS License & Activation Center */
.v22-license-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) 470px;
    gap: 28px;
    align-items: center;
    padding: 28px 30px;
    background: linear-gradient(135deg,#0b1f33 0%,#123b5d 58%,#0e5884 100%);
    color: #fff;
    border: 0;
    overflow: hidden;
    position: relative
}

.v22-license-hero:after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    right: -140px;
    top: -210px;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 0 0 52px rgba(255,255,255,.025),0 0 0 104px rgba(255,255,255,.018)
}

.v22-license-hero>div {
    position: relative;
    z-index: 1
}

.v22-license-hero .eyebrow {
    color: #91ceff
}

.v22-license-hero h2 {
    color: #fff;
    font-size: 25px;
    margin: 7px 0 9px
}

.v22-license-hero p {
    color: #c9dcea;
    line-height: 1.7;
    margin: 0;
    max-width: 760px
}

.v22-license-kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    position: relative;
    z-index: 1
}

.v22-license-kpis span {
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.075);
    border-radius: 12px
}

.v22-license-kpis b,.v22-license-kpis small {
    display: block
}

.v22-license-kpis b {
    color: #fff;
    font-size: 19px
}

.v22-license-kpis small {
    color: #bdd4e4;
    font-size: 8px;
    margin-top: 3px
}

.v22-license-layout {
    display: grid;
    grid-template-columns: minmax(620px,1.2fr) minmax(420px,.8fr);
    gap: 14px;
    margin-top: 14px;
    align-items: start
}

.v22-license-side {
    display: grid;
    gap: 14px
}

.v22-license-list {
    display: grid;
    gap: 7px
}

.v22-license-row {
    display: grid;
    grid-template-columns: 42px minmax(170px,1fr) auto 90px 80px 72px 18px;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid #e2e9ef;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: .16s
}

.v22-license-row:hover,.v22-license-row.active {
    border-color: #9fc2df;
    background: #f7fbfe;
    box-shadow: 0 5px 18px rgba(30,81,122,.07)
}

.v22-license-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eaf3fb;
    color: #1c5d90;
    font-weight: 900
}

.v22-license-name,.v22-license-meta {
    min-width: 0
}

.v22-license-name b,.v22-license-name small,.v22-license-meta b,.v22-license-meta small {
    display: block
}

.v22-license-name b {
    font-size: 10px;
    color: #193a55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.v22-license-name small {
    font-size: 7.5px;
    color: #8295a5;
    margin-top: 3px
}

.v22-license-meta small {
    font-size: 7px;
    color: #8a9aa8;
    text-transform: uppercase;
    letter-spacing: .25px
}

.v22-license-meta b {
    font-size: 8.5px;
    color: #31516a;
    margin-top: 3px
}

.v22-license-row>.ui-icon {
    width: 14px;
    height: 14px;
    color: #7890a3
}

.v22-key-box {
    padding: 13px 14px;
    border: 1px solid #dce7ef;
    background: #f7fafc;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
    align-items: center
}

.v22-key-box small {
    font-size: 7px;
    color: #8294a4;
    letter-spacing: .7px
}

.v22-key-box code {
    grid-column: 1/2;
    font-size: 9px;
    font-weight: 800;
    color: #1c527d;
    word-break: break-all
}

.v22-key-box form {
    grid-column: 2;
    grid-row: 1/3;
    margin: 0
}

.v22-usage-strip {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 6px;
    margin-top: 10px
}

.v22-usage-strip span {
    padding: 9px;
    background: #f7f9fb;
    border: 1px solid #e5ebf0;
    border-radius: 9px
}

.v22-usage-strip small,.v22-usage-strip b {
    display: block
}

.v22-usage-strip small {
    font-size: 6.8px;
    color: #8797a5
}

.v22-usage-strip b {
    font-size: 9px;
    color: #294b63;
    margin-top: 3px
}

.v22-snapshot {
    margin-top: 9px
}

.v22-quick-license {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #dce4ea
}

.v22-quick-license form {
    display: flex;
    gap: 6px;
    margin: 0
}

.v22-quick-license select,.v22-quick-license input {
    min-width: 0
}

.v22-module-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

.v22-module-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid #e1e8ee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer
}

.v22-module-card:has(input:checked) {
    border-color: #b5d5c4;
    background: #f8fcfa
}

.v22-module-card input {
    margin-top: 2px
}

.v22-module-card b,.v22-module-card small {
    display: block
}

.v22-module-card b {
    font-size: 9px;
    color: #23465f
}

.v22-module-card small {
    font-size: 7.4px;
    color: #7c8f9f;
    line-height: 1.5;
    margin-top: 3px
}

.v22-module-card em {
    font-style: normal;
    font-size: 7px;
    font-weight: 900;
    color: #758899;
    background: #edf2f6;
    padding: 4px 6px;
    border-radius: 999px
}

.v22-module-card:has(input:checked) em {
    color: #26704e;
    background: #e5f5ec
}

.v22-support-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px
}

.v22-history {
    margin-top: 12px;
    border-top: 1px solid #e9eef2;
    padding-top: 10px
}

.v22-history summary {
    cursor: pointer;
    font-size: 8.5px;
    font-weight: 800;
    color: #496b84
}

.v22-history>div {
    display: grid;
    gap: 5px;
    margin-top: 8px
}

.v22-history span {
    padding: 7px 9px;
    border-radius: 8px;
    background: #f8fafb
}

.v22-history b,.v22-history small {
    display: block
}

.v22-history b {
    font-size: 8px;
    color: #36566e
}

.v22-history small {
    font-size: 7px;
    color: #8192a0;
    margin-top: 2px
}

.v22-event-list {
    display: grid;
    gap: 7px
}

.v22-event-list>div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f4
}

.v22-event-list>div:last-child {
    border-bottom: 0
}

.v22-event-list>div>span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .4px;
    color: #2b648f;
    background: #edf5fb;
    border-radius: 7px;
    padding: 5px 7px;
    height: max-content;
    width: max-content
}

.v22-event-list b,.v22-event-list small {
    display: block
}

.v22-event-list b {
    font-size: 8.5px;
    color: #31516a
}

.v22-event-list small {
    font-size: 7px;
    color: #8495a3;
    margin-top: 3px
}

@media(max-width: 1250px) {
    .v22-license-layout {
        grid-template-columns:1fr
    }

    .v22-license-side {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .v22-license-side>section:nth-child(1),.v22-license-side>section:nth-child(2) {
        grid-column: auto
    }

    .v22-license-side>section:nth-child(n+3) {
        grid-column: 1/-1
    }
}

@media(max-width: 900px) {
    .v22-license-hero {
        grid-template-columns:1fr
    }

    .v22-license-kpis {
        grid-template-columns: repeat(3,1fr)
    }

    .v22-license-row {
        grid-template-columns: 42px minmax(150px,1fr) auto 85px 70px
    }

    .v22-license-row .v22-license-meta:nth-of-type(3) {
        display: none
    }

    .v22-license-row>.ui-icon {
        display: none
    }

    .v22-license-side {
        grid-template-columns: 1fr
    }

    .v22-license-side>section {
        grid-column: auto!important
    }

    .v22-usage-strip {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width: 650px) {
    .v22-license-hero {
        padding:21px 18px
    }

    .v22-license-hero h2 {
        font-size: 21px
    }

    .v22-license-kpis {
        grid-template-columns: repeat(2,1fr)
    }

    .v22-license-layout {
        display: block
    }

    .v22-license-side {
        margin-top: 14px
    }

    .v22-license-row {
        grid-template-columns: 38px 1fr auto;
        padding: 10px
    }

    .v22-license-row .v22-license-meta {
        display: none
    }

    .v22-module-grid {
        grid-template-columns: 1fr
    }

    .v22-quick-license {
        grid-template-columns: 1fr
    }

    .v22-quick-license form,.v22-support-form {
        grid-template-columns: 1fr;
        display: grid
    }

    .v22-usage-strip {
        grid-template-columns: repeat(2,1fr)
    }

    .v22-key-box {
        grid-template-columns: 1fr
    }

    .v22-key-box form {
        grid-column: 1;
        grid-row: auto
    }

    .v22-event-list>div {
        grid-template-columns: 1fr
    }
}