/* Torosgaz HelpDesk — site.css
   Modernized UI System / MVC5 .NET 4.8
   Rev: Premium Ticket Detail + Composer + Conversation UI
   Figen Özeren
*/

:root {
    /* Typography */
    --font-sans: 'Roboto',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    --font-mono: 'JetBrains Mono',Consolas,monospace;
    /* Torosgaz Brand */
    --navy: #243b58;
    --navy-2: #365989;
    --navy-3: #5280a8;
    --navy-soft: #cce3f2;
    --orange: #375988;
    --orange-2: #375988;
    --orange-3: #f08a3e;
    --orange-soft: #fff4eb;
    /* Surfaces */
    --bg: #f6f2eb;
    --bg-2: #ece5db;
    --sur: #ffffff;
    --sur2: #fcfaf7;
    --sur3: #f4eee6;
    --sur4: #f8f4ee;
    /* Borders */
    --bor: #e7ddd1;
    --bor2: #d9cec0;
    --bor3: #cfc2b1;
    /* Text */
    --txt: #17202a;
    --tx2: #5c6874;
    --tx3: #8f9aa6;
    --tx4: #aab3bc;
    /* Status */
    --grn: #1b7f4d;
    --gbg: #edf8f2;
    --blu: #365989;
    --bbg: #cce3f2;
    --yel: #8a6912;
    --ybg: #fcf5df;
    --red: #b03838;
    --rbg: #fff1f1;
    --pur: #6a43a1;
    --pbg: #f4effc;
    --tea: #0c7676;
    --tbg: #ebf8f8;
    /* UI */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 34px;
    --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --shadow-sm: 0 6px 18px rgba(15,23,42,.06);
    --shadow-md: 0 14px 28px rgba(15,23,42,.08);
    --shadow-lg: 0 20px 44px rgba(15,23,42,.12);
    --ring: 0 0 0 4px rgba(217,106,29,.12);
    --ring-navy: 0 0 0 4px rgba(54,89,137,.10);
    --transition: .18s ease;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    background: radial-gradient(circle at 10% 10%, rgba(54,89,137,.08), transparent 0 18%), radial-gradient(circle at 90% 85%, rgba(217,106,29,.06), transparent 0 15%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    color: var(--txt);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

img {
    max-width: 100%;
    display: block;
}

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

/* TOPBAR */
.topbar {
    background: #365989;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 0 28px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 300;
    box-shadow: 0 4px 24px rgba(15,47,79,.22);
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.3px;
}

.logo-flame {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.30);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

.logo-sep {
    color: rgba(255,255,255,.25);
    font-weight: 300;
}

.logo-sub {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    letter-spacing: .1px;
}

.tb-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.u-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 5px 12px 5px 5px;
    transition: background .18s, border-color .18s;
    cursor: default;
}

.u-chip:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.26);
}

.u-av {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    flex-shrink: 0;
    background: rgba(255,255,255,.20);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.28);
}

.u-nm {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
}

.role-badge {
    font-size: 9px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: rgba(255,255,255,.14);
    color: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.16);
}

.logout-btn {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.72);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: all .18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

    .logout-btn:hover {
        color: #fff;
        background: rgba(239,68,68,.30);
        border-color: rgba(239,68,68,.45);
    }

.inline-form {
    display: inline;
}

/* LAYOUT */
.layout {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 64px);
}

/* SIDEBAR */
.sidebar {
    width: 258px;
    background: rgba(255,255,255,.72);
    border-right: 1px solid var(--bor);
    padding: 16px 0;
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sb-brand {
    padding: 0 16px 14px;
    border-bottom: 1px solid var(--bor);
    margin-bottom: 10px;
}

.sb-co {
    font-size: 13px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.2px;
}

.sb-tg {
    font-size: 11px;
    color: var(--tx3);
    margin-top: 2px;
}

.sb-lbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .9px;
    padding: 8px 16px 4px;
    font-family: var(--font-mono);
}

.sb-i {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx2);
    border-left: 3px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
    border-radius: 0 14px 14px 0;
    margin-right: 10px;
}

    .sb-i:hover {
        color: var(--txt);
        background: var(--sur2);
    }

    .sb-i.active {
        color: var(--orange);
        background: linear-gradient(90deg, rgba(55,89,136,.13), rgba(55,89,136,.04));
        border-left-color: var(--orange);
        font-weight: 700;
    }

.sb-ft {
    margin-top: auto;
    padding: 12px 16px 0;
    border-top: 1px solid var(--bor);
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

.sb-search {
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--bor);
    margin-bottom: 6px;
}

.sb-search-input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--bor2);
    border-radius: 10px;
    background: var(--sur2);
    font-size: 13px;
    color: var(--txt);
    padding: 0 12px 0 34px;
    outline: none;
    font-family: var(--font-sans);
    transition: var(--transition);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238f9aa6' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.sb-search-input:focus {
    border-color: var(--navy-2);
    background-color: var(--sur);
    box-shadow: 0 0 0 3px var(--navy-soft);
}

.sb-search-input::placeholder {
    color: var(--tx4);
}

.sb-no-result {
    display: none;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--tx3);
    font-style: italic;
}

.sb-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    cursor: pointer;
    padding: 10px;
    flex-shrink: 0;
    transition: var(--transition);
}

.sb-toggle:hover {
    background: rgba(255,255,255,.14);
}

.sb-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition);
}

.sb-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.sb-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.sb-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.46);
    z-index: 199;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sb-overlay.is-open {
    display: block;
}

/* MAIN */
.main {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* PAGE HEADER */
.ph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0 18px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bor);
    margin-bottom: 6px;
}

.ph-t {
    font-size: 26px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.7px;
    line-height: 1.08;
}

.ph-s {
    font-size: 12px;
    color: var(--tx3);
    margin-top: 6px;
    font-family: var(--font-mono);
}

.ph-a {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* DASHBOARD */
.db-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.db-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, .95fr);
    gap: 20px;
    padding: 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(54,89,137,.12), transparent 30%), radial-gradient(circle at bottom right, rgba(204,227,242,.28), transparent 26%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,255,.96));
    box-shadow: var(--shadow-md);
}

.db-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.db-eyebrow,
.db-meta-label,
.db-summary-label,
.db-insight-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.db-title {
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: -.04em;
    color: var(--txt);
    max-width: 720px;
}

.db-subtitle {
    font-size: 15px;
    line-height: 1.8;
    color: var(--tx2);
    max-width: 700px;
}

.db-meta-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.db-meta-card,
.db-kpi,
.db-mini-metric {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(231,221,209,.92);
    border-radius: 18px;
    padding: 14px 16px;
}

.db-meta-card strong,
.db-kpi strong,
.db-mini-metric strong {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    color: var(--txt);
}

.db-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.db-hero-panel,
.db-card {
    position: relative;
}

.db-hero-panel {
    background: linear-gradient(145deg, #2a5491 0%, #1e3d72 100%);
    border-radius: 24px;
    padding: 22px;
    color: #fff;
    box-shadow: 0 20px 40px rgba(15,47,79,.18);
    overflow: hidden;
}

.db-hero-panel::after {
    content: "";
    position: absolute;
    inset: auto -40px -70px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,138,62,.34), transparent 70%);
}

.db-panel-head,
.db-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.db-panel-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.db-panel-sub {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    margin-top: 5px;
}

.db-kpi-stack,
.db-progress-group,
.db-action-list,
.db-critical-list,
.db-insight-body {
    display: flex;
    flex-direction: column;
}

.db-kpi-stack {
    gap: 10px;
    margin-top: 18px;
}

.db-kpi {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.10);
}

.db-kpi span {
    font-size: 12px;
    color: rgba(255,255,255,.68);
}

.db-kpi strong {
    color: #fff;
    font-size: 18px;
}

.db-progress-group {
    gap: 14px;
    margin-top: 20px;
}

.db-progress-label,
.db-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.db-progress-label span {
    color: rgba(255,255,255,.72);
}

.db-progress-label strong {
    color: #fff;
}

.db-progress-track,
.db-bar-track {
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
}

.db-progress-track {
    height: 8px;
    margin-top: 8px;
    background: rgba(255,255,255,.10);
}

.db-progress-fill,
.db-bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width .4s cubic-bezier(.4,0,.2,1);
}

.db-progress-fill.is-blue {
    background: linear-gradient(90deg, #5f9cff, #2d6ba8);
}

.db-progress-fill.is-green {
    background: linear-gradient(90deg, #3ecf8e, #1b7f4d);
}

.db-summary-grid,
.db-insight-grid,
.db-chart-grid {
    display: grid;
    gap: 16px;
}

.db-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 4px 0;
}

.db-summary-card {
    background: #fff;
    border: 1px solid var(--bor);
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    border-radius: 22px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    min-height: 148px;
    text-decoration: none;
    display: block;
    color: inherit;
}

.db-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(54,89,137,.13);
    border-color: var(--bor2);
    text-decoration: none;
    color: inherit;
}

.db-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.db-summary-card.is-blue   .db-summary-icon { background: rgba(37,93,155,.10);  color: #255d9b; }
.db-summary-card.is-orange .db-summary-icon { background: rgba(54,89,137,.10);  color: #365989; }
.db-summary-card.is-red    .db-summary-icon { background: rgba(176,56,56,.10);  color: #b03838; }
.db-summary-card.is-green  .db-summary-icon { background: rgba(27,127,77,.10);  color: #1b7f4d; }
.db-summary-card.is-gold   .db-summary-icon { background: rgba(138,105,18,.10); color: #7a5c0e; }
.db-summary-card.is-purple .db-summary-icon { background: rgba(106,67,161,.10); color: #6a43a1; }

.db-summary-value {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    margin: 10px 0 8px;
    color: var(--txt);
}

.db-summary-note {
    font-size: 12px;
    line-height: 1.7;
    color: var(--tx3);
}

.db-summary-card.is-blue {
    background: linear-gradient(180deg, rgba(37,93,155,.08), rgba(255,255,255,.88));
}

.db-summary-card.is-orange {
    background: linear-gradient(180deg, rgba(54,89,137,.07), rgba(255,255,255,.96));
}

.db-summary-card.is-red {
    background: linear-gradient(180deg, rgba(176,56,56,.08), rgba(255,255,255,.88));
}

.db-summary-card.is-green {
    background: linear-gradient(180deg, rgba(27,127,77,.08), rgba(255,255,255,.88));
}

.db-summary-card.is-gold {
    background: linear-gradient(180deg, rgba(138,105,18,.08), rgba(255,255,255,.88));
}

.db-summary-card.is-purple {
    background: linear-gradient(180deg, rgba(106,67,161,.08), rgba(255,255,255,.88));
}

.db-insight-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
}

.db-card {
    border-radius: 24px;
}

.db-card-highlight {
    background: linear-gradient(180deg, rgba(54,89,137,.06), rgba(255,255,255,.96));
    border-left: 3px solid #365989 !important;
}

.db-card-head {
    padding: 18px 20px 0;
}

.db-insight-body {
    gap: 14px;
    padding: 18px 20px 20px;
}

.db-insight-item {
    padding: 14px 16px 14px 18px;
    border: 1px solid var(--bor);
    border-left: 3px solid #365989;
    border-radius: 18px;
    background: rgba(255,255,255,.7);
}

.db-insight-item strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 17px;
    color: var(--txt);
}

.db-insight-item p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--tx2);
}

.db-action-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(54,89,137,.08);
    color: #365989;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .18s;
}
.db-action-item:hover .db-action-item-icon {
    background: rgba(54,89,137,.15);
}
.db-action-item-body { flex: 1; min-width: 0; }
.db-action-item-arrow {
    color: #cce3f2;
    transition: transform .18s, color .18s;
    flex-shrink: 0;
}
.db-action-item:hover .db-action-item-arrow {
    transform: translateX(4px);
    color: #365989;
}

.db-action-list {
    gap: 10px;
    padding: 18px 20px 20px;
}

.db-action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--bor);
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    transition: var(--transition);
}

.db-action-item strong,
.db-ticket-title-wrap strong,
.db-critical-item strong {
    display: block;
    font-size: 14px;
    color: var(--txt);
}

.db-action-item span,
.db-ticket-sub,
.db-critical-item span,
.db-mini-metric span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

.db-action-item:hover,
.db-critical-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(54,89,137,.10);
    border-color: rgba(54,89,137,.20);
}

.db-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .9fr);
    gap: 16px;
    align-items: start;
}

.db-ticket-table {
    padding: 16px 0 0;
}

.db-ticket-title-wrap {
    min-width: 0;
}

.db-ticket-title-wrap strong {
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.db-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.db-compact-empty {
    padding: 28px 14px;
}

.db-critical-list {
    gap: 10px;
    padding: 18px 20px 20px;
}

.db-critical-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--bor);
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    transition: var(--transition);
}

.db-critical-meta {
    text-align: right;
    flex-shrink: 0;
}

.db-critical-meta em,
.db-sla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    color: var(--blu);
    background: var(--bbg);
    border: 1px solid rgba(37,93,155,.16);
}

.db-critical-meta em.is-risk,
.db-sla.is-risk {
    color: var(--red);
    background: var(--rbg);
    border-color: rgba(176,56,56,.18);
}

.db-mini-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px 20px;
}

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

/* ── Dashboard: Bana Atanan Talepler ──────────────────────────── */
.db-assigned-section {
    margin-bottom: 24px;
}

.db-assigned-section .db-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.db-assigned-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-assigned-all-link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--blu);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--blu);
    border-radius: 20px;
    transition: background .18s, color .18s;
    white-space: nowrap;
}

.db-assigned-all-link:hover {
    background: var(--blu);
    color: #fff;
    text-decoration: none;
}

.db-chart-body {
    padding: 18px 20px 20px;
    min-height: 290px;
}

.db-bar-row + .db-bar-row {
    margin-top: 16px;
}

.db-bar-top {
    margin-bottom: 8px;
}

.db-bar-top span {
    color: var(--tx2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-bar-top strong {
    color: var(--txt);
}

.db-bar-track {
    height: 10px;
    background: var(--sur3);
    border: 1px solid rgba(231,221,209,.85);
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 40px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn-p {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    box-shadow: 0 10px 18px rgba(217,106,29,.20);
}

    .btn-p:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px rgba(217,106,29,.26);
        color: #fff;
    }

.btn-g {
    background: rgba(255,255,255,.92);
    color: var(--tx2);
    border: 1px solid var(--bor2);
    box-shadow: var(--shadow-xs);
}

    .btn-g:hover {
        background: var(--sur2);
        color: var(--txt);
        border-color: var(--bor3);
    }

.btn-d {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

    .btn-d:hover {
        opacity: .88;
        color: #fff;
    }

.btn-s {
    padding: 7px 11px;
    min-height: 32px;
    font-size: 11px;
    border-radius: 10px;
}

.btn-oa {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid rgba(217,106,29,.22);
}

    .btn-oa:hover {
        background: var(--orange);
        color: #fff;
    }

/* ALERTS */
.alert {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.alert-success {
    background: var(--gbg);
    border: 1px solid rgba(27,127,77,.18);
    color: var(--grn);
}

.alert-danger {
    background: var(--rbg);
    border: 1px solid rgba(176,56,56,.18);
    color: var(--red);
}

/* STATS */
.sg {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.sc {
    background: rgba(255,255,255,.80);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    cursor: default;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .sc:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .sc::after {
        content: attr(data-e);
        position: absolute;
        bottom: -6px;
        right: 10px;
        font-size: 32px;
        opacity: .07;
        line-height: 1;
    }

.sc-strip {
    height: 4px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.sc-l {
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--font-mono);
}

.sc-v {
    font-size: 30px;
    font-weight: 800;
    margin: 4px 0 3px;
    letter-spacing: -1px;
    line-height: 1;
}

.sc-n {
    font-size: 11px;
    color: var(--tx3);
}

/* GENERIC CARD */
.card,
.rc {
    background: rgba(255,255,255,.84);
    border: 1px solid var(--bor);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ch {
    padding: 14px 18px;
    border-bottom: 1px solid var(--bor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ct,
.rct {
    font-size: 15px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.2px;
}

.cs {
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

/* TABLE */
table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--sur2);
}

th {
    text-align: left;
    padding: 11px 14px;
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--font-mono);
    border-bottom: 1px solid var(--bor);
    white-space: nowrap;
}

td {
    padding: 12px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--bor);
    vertical-align: middle;
    color: var(--txt);
}

tr.tc {
    cursor: pointer;
    transition: var(--transition);
}

    tr.tc:hover {
        background: var(--sur2);
    }

tr:last-child td {
    border-bottom: none;
}

.tid {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--orange);
    font-weight: 700;
}

/* BADGES */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .35px;
    white-space: nowrap;
}

.p-k {
    background: var(--rbg);
    color: var(--red);
    border: 1px solid rgba(176,56,56,.18);
}

.p-y {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid rgba(217,106,29,.18);
}

.p-o {
    background: var(--ybg);
    color: var(--yel);
    border: 1px solid rgba(138,105,18,.18);
}

.p-d {
    background: var(--gbg);
    color: var(--grn);
    border: 1px solid rgba(27,127,77,.18);
}

.s-acik {
    background: var(--bbg);
    color: var(--blu);
    border: 1px solid rgba(37,93,155,.18);
}

.s-islemde {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid rgba(217,106,29,.18);
}

.s-cozuldu {
    background: var(--gbg);
    color: var(--grn);
    border: 1px solid rgba(27,127,77,.18);
}

.s-kapali {
    background: var(--sur2);
    color: var(--tx3);
    border: 1px solid var(--bor);
}

.s-beklemede {
    background: var(--ybg);
    color: var(--yel);
    border: 1px solid rgba(138,105,18,.18);
}

.s-onaylandi {
    background: var(--tbg);
    color: var(--tea);
    border: 1px solid rgba(12,118,118,.18);
}

.s-reddedildi {
    background: var(--rbg);
    color: var(--red);
    border: 1px solid rgba(176,56,56,.18);
}

.cat-chip {
    background: var(--sur2);
    color: var(--tx2);
    border: 1px solid var(--bor);
}

/* FILTERS */
.filters {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.fi,
.fc,
.td-control,
.td-composer-textarea {
    outline: none;
    transition: var(--transition);
}

.fi {
    background: var(--sur);
    border: 1px solid var(--bor2);
    border-radius: 13px;
    padding: 9px 12px;
    color: var(--txt);
    font-size: 13px;
    min-height: 40px;
}

    .fi:focus {
        border-color: var(--orange);
        box-shadow: var(--ring);
    }

    .fi::placeholder {
        color: var(--tx3);
    }

select.fi {
    cursor: pointer;
    color: var(--tx2);
}

/* TICKET LIST */
.tl-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tl-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%), radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.tl-eyebrow,
.tl-stat-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.tl-title {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--txt);
}

.tl-subtitle {
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.tl-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

.tl-stat {
    background: rgba(255,255,255,.84);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .18s, box-shadow .18s;
}

.tl-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tl-stat-value {
    margin: 10px 0 6px;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--txt);
}

.tl-stat-note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

.tl-stat.is-blue {
    background: linear-gradient(180deg, rgba(37,93,155,.08), rgba(255,255,255,.88));
}

.tl-stat.is-orange {
    background: linear-gradient(180deg, rgba(217,106,29,.08), rgba(255,255,255,.88));
}

.tl-stat.is-green {
    background: linear-gradient(180deg, rgba(27,127,77,.08), rgba(255,255,255,.88));
}

.tl-stat.is-red {
    background: linear-gradient(180deg, rgba(176,56,56,.08), rgba(255,255,255,.88));
}

.tl-stat.is-gold {
    background: linear-gradient(180deg, rgba(138,105,18,.08), rgba(255,255,255,.88));
}

.tl-stat.is-purple {
    background: linear-gradient(180deg, rgba(106,67,161,.08), rgba(255,255,255,.88));
}

.tl-filter-card,
.tl-table-card {
    border-radius: 24px;
}

.tl-filter-form {
    padding: 20px;
}

.tl-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tl-filter-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.01em;
}

.tl-filter-clear {
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--rbg);
    border: 1px solid rgba(176,56,56,.14);
    transition: var(--transition);
}

.tl-filter-clear:hover {
    background: rgba(176,56,56,.12);
    color: var(--red);
}

.tl-filter-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.tl-filter-field {
    min-width: 0;
}

.tl-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.tl-table-head {
    padding: 18px 20px 0;
}

.tl-table-wrap {
    padding-top: 16px;
    overflow-x: auto;
}

.tl-ticket-cell {
    min-width: 0;
}

.tl-ticket-cell strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.tl-ticket-cell span:last-child,
.tl-date,
.tl-muted {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--tx3);
}

.tl-assignee {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
}

.tl-file-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tx3);
    background: var(--sur2);
    border: 1px solid var(--bor);
}

.tl-file-chip.has-files {
    color: var(--orange);
    background: var(--orange-soft);
    border-color: rgba(217,106,29,.18);
}

/* Quick filter chips */
.tl-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tl-qf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tx2);
    background: rgba(255,255,255,.88);
    border: 1.5px solid var(--bor);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

.tl-qf-chip:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(37,93,155,.06);
}

.tl-qf-chip.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.tl-qf-chip.is-orange.active { background: var(--orange); border-color: var(--orange); }
.tl-qf-chip.is-green.active  { background: var(--green);  border-color: var(--green);  }
.tl-qf-chip.is-red.active    { background: var(--red);    border-color: var(--red);    }
.tl-qf-chip.is-gold.active   { background: #8a6912;       border-color: #8a6912;       }
.tl-qf-chip.is-purple.active { background: #6a43a1;       border-color: #6a43a1;       }

.tl-qf-chip.is-orange:not(.active):hover { border-color: var(--orange); color: var(--orange); background: var(--orange-soft); }
.tl-qf-chip.is-green:not(.active):hover  { border-color: var(--green);  color: var(--green);  background: var(--green-soft);  }
.tl-qf-chip.is-red:not(.active):hover    { border-color: var(--red);    color: var(--red);    background: var(--rbg);         }
.tl-qf-chip.is-gold:not(.active):hover   { border-color: #8a6912;       color: #8a6912;       background: rgba(138,105,18,.07); }
.tl-qf-chip.is-purple:not(.active):hover { border-color: #6a43a1;       color: #6a43a1;       background: rgba(106,67,161,.07); }

.tl-qf-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    background: rgba(0,0,0,.08);
    color: inherit;
}

.tl-qf-chip.active .tl-qf-count {
    background: rgba(255,255,255,.25);
}

/* Sort indicators */
.tl-th-sort { user-select: none; white-space: nowrap; }
.tl-th-sort:hover { color: var(--blue); }
.tl-th-sort.sorted { color: var(--blue); }
.tl-sort-icon { font-style: normal; font-size: 11px; opacity: .7; }

/* Filtered badge */
.tl-filter-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(37,93,155,.1);
    color: var(--blue);
    border: 1px solid rgba(37,93,155,.18);
}

/* Sticky thead */
.tl-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sur);
    box-shadow: 0 1px 0 var(--bor);
}

/* MODAL / FORM HEADERS */
.mh {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--bor);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mt {
    font-size: 18px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.3px;
}

.ms {
    font-size: 11px;
    color: var(--tx3);
    font-family: var(--font-mono);
    margin-top: 3px;
}

/* FORMS */
.fg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

    .fg:last-child {
        margin-bottom: 0;
    }

.fl {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .45px;
}

.fc {
    background: var(--sur2);
    border: 1px solid var(--bor);
    border-radius: 14px;
    padding: 11px 13px;
    color: var(--txt);
    font-size: 14px;
    width: 100%;
    min-height: 44px;
}

    .fc:focus {
        border-color: var(--orange);
        background: var(--sur);
        box-shadow: var(--ring);
    }

textarea.fc {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
    padding-top: 12px;
}

.fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.field-error {
    color: var(--red);
    font-size: 11px;
    margin-top: 2px;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: var(--red);
    line-height: 1.6;
}

/* WIZARD */
.step-unit-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 6px;
}

.unit-card {
    border: 1.5px solid var(--bor);
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--sur);
    text-align: center;
    box-shadow: var(--shadow-xs);
}

    .unit-card:hover {
        border-color: var(--orange);
        background: var(--orange-soft);
        transform: translateY(-1px);
    }

.uc-ic {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.uc-nm {
    font-size: 13px;
    font-weight: 800;
    color: var(--txt);
}

.uc-ct {
    font-size: 11px;
    color: var(--tx3);
    margin-top: 3px;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 6px;
}

.cat-card {
    border: 1.5px solid var(--bor);
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--sur);
    box-shadow: var(--shadow-xs);
}

    .cat-card:hover,
    .cat-card.sel {
        border-color: var(--orange);
        background: var(--orange-soft);
        transform: translateY(-1px);
    }

.cc-ic {
    font-size: 17px;
    display: block;
    margin-bottom: 5px;
}

.cc-nm {
    font-size: 12px;
    font-weight: 800;
    color: var(--txt);
}

.cc-ds {
    font-size: 10px;
    color: var(--tx3);
    margin-top: 3px;
    line-height: 1.45;
}

/* FILE UPLOAD */
.file-drop {
    border: 2px dashed var(--bor2);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--sur2);
    position: relative;
}

    .file-drop:hover,
    .file-drop.dg {
        border-color: var(--orange);
        background: var(--orange-soft);
    }

    .file-drop input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

.fd-ic {
    font-size: 26px;
    margin-bottom: 8px;
}

.fd-tx {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx2);
}

.fd-sb {
    font-size: 11px;
    color: var(--tx3);
    margin-top: 3px;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sur);
    border: 1px solid var(--bor);
    border-radius: 12px;
    padding: 8px 10px;
}

.fi-ico {
    font-size: 16px;
    flex-shrink: 0;
}

.fi-info {
    flex: 1;
    min-width: 0;
}

.fi-nm {
    font-size: 12px;
    font-weight: 700;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-sz {
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

.fi-rm {
    font-size: 14px;
    color: var(--tx3);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: var(--transition);
}

    .fi-rm:hover {
        background: var(--rbg);
        color: var(--red);
    }

/* OLD TICKET DETAIL BLOCKS - KEEP FOR COMPAT */
.dmg {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.dmb {
    background: var(--sur2);
    border: 1px solid var(--bor);
    border-radius: 14px;
    padding: 12px 14px;
}

.dml {
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--font-mono);
    margin-bottom: 5px;
}

.dmv {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
}

.desc-box {
    background: var(--sur2);
    border: 1px solid var(--bor);
    border-radius: 16px;
    padding: 16px;
}

.dbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--font-mono);
    margin-bottom: 8px;
}

.dbt {
    font-size: 14px;
    line-height: 1.75;
    color: var(--tx2);
}

.att-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.att-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--sur);
    border: 1px solid var(--bor);
    border-radius: 12px;
    padding: 7px 10px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

    .att-chip:hover {
        border-color: var(--orange);
        background: var(--orange-soft);
    }

.att-ic {
    font-size: 14px;
}

.att-nm {
    font-size: 11px;
    font-weight: 700;
    color: var(--tx2);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-sz {
    font-size: 9px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

.ap {
    background: linear-gradient(135deg, var(--orange-soft), var(--sur));
    border: 1px solid rgba(217,106,29,.20);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
}

.apt {
    font-size: 10px;
    font-weight: 800;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: var(--font-mono);
    margin-bottom: 9px;
}

.hs {
    margin-top: 18px;
}

.hst {
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--font-mono);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bor);
    margin-bottom: 14px;
}

.hl {
    display: flex;
    flex-direction: column;
}

.hi {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}

    .hi:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 15px;
        top: 40px;
        bottom: 0;
        width: 2px;
        background: var(--bor);
        border-radius: 999px;
    }

.hd {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    z-index: 1;
    border: 1.5px solid var(--bor);
    background: var(--sur);
}

.hb {
    flex: 1;
    padding-top: 2px;
}

.ha {
    font-size: 13px;
    color: var(--txt);
    line-height: 1.6;
}

    .ha strong {
        color: var(--orange);
    }

.hat {
    font-size: 11px;
    color: var(--blu);
    margin-top: 5px;
    font-style: italic;
}

.htm {
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.cmt-area {
    background: var(--sur2);
    border: 1px solid var(--bor);
    border-radius: 16px;
    padding: 14px;
    margin-top: 16px;
}

.cmt-t {
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--font-mono);
    margin-bottom: 10px;
}

/* REPORTS */
.rg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.rc {
    padding: 18px;
}

.br {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bl {
    font-size: 11px;
    color: var(--tx2);
    width: 126px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt {
    flex: 1;
    background: var(--sur2);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.bf {
    height: 100%;
    border-radius: 999px;
    transition: width .9s ease;
}

.bv {
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--font-mono);
    width: 28px;
    text-align: right;
}

.pr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--bor);
}

    .pr:last-child {
        border-bottom: none;
    }

.pn {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
}

.pm {
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

.ps {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
}

/* SLA */
.slw {
    display: flex;
    align-items: center;
    gap: 6px;
}

.slb {
    width: 48px;
    height: 6px;
    background: var(--sur2);
    border-radius: 999px;
    overflow: hidden;
}

.slf {
    height: 100%;
    border-radius: 999px;
}

.slt {
    font-size: 10px;
    font-family: var(--font-mono);
}

/* EMPTY */
.empty {
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ei {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(54,89,137,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: .6;
    margin-bottom: 4px;
}

.et {
    font-size: 14px;
    color: var(--tx3);
    font-weight: 500;
}

/* =========================================
   MODERN TICKET DETAIL SYSTEM (NEW td-*)
========================================= */

.td-page {
    padding: 6px 0 4px;
    max-width: 1460px;
    margin: 0 auto;
}

.td-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid var(--bor);
    border-radius: 26px;
    background: radial-gradient(circle at top right, rgba(217,106,29,.08), transparent 24%), radial-gradient(circle at left center, rgba(27,79,130,.08), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,242,.94));
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.td-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tx3);
    margin-bottom: 10px;
}

    .td-breadcrumb a {
        color: var(--orange);
        font-weight: 700;
    }

.td-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.03em;
}

.td-title-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.td-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: var(--tx2);
    font-size: 13px;
}

.td-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.td-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
}

.td-badge-soft {
    background: var(--sur2);
    color: var(--tx2);
    border-color: var(--bor);
}

.td-badge-danger {
    background: rgba(220,38,38,.10);
    color: #b91c1c;
    border-color: rgba(220,38,38,.18);
}

.td-priority-critical {
    background: rgba(220,38,38,.10);
    color: #b91c1c;
    border-color: rgba(220,38,38,.18);
}

.td-priority-high {
    background: rgba(217,106,29,.12);
    color: var(--orange);
    border-color: rgba(217,106,29,.18);
}

.td-priority-medium {
    background: rgba(37,93,155,.10);
    color: var(--blu);
    border-color: rgba(37,93,155,.18);
}

.td-priority-low {
    background: rgba(27,127,77,.10);
    color: var(--grn);
    border-color: rgba(27,127,77,.18);
}

.td-status-open {
    background: rgba(37,93,155,.10);
    color: var(--blu);
    border-color: rgba(37,93,155,.18);
}

.td-status-progress {
    background: rgba(217,106,29,.10);
    color: var(--orange);
    border-color: rgba(217,106,29,.18);
}

.td-status-waiting {
    background: rgba(138,105,18,.10);
    color: var(--yel);
    border-color: rgba(138,105,18,.18);
}

.td-status-solved {
    background: rgba(27,127,77,.10);
    color: var(--grn);
    border-color: rgba(27,127,77,.18);
}

.td-status-approved {
    background: rgba(12,118,118,.10);
    color: var(--tea);
    border-color: rgba(12,118,118,.18);
}

.td-status-rejected {
    background: rgba(176,56,56,.10);
    color: var(--red);
    border-color: rgba(176,56,56,.18);
}

.td-status-closed {
    background: rgba(143,153,165,.12);
    color: #55616d;
    border-color: rgba(143,153,165,.18);
}

.td-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) 360px;
    gap: 24px;
    align-items: start;
}

.td-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.td-sidebar {
    position: relative;
}

.td-sidebar-stack {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.td-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

.td-stat-card,
.td-card,
.td-side-card {
    background: rgba(255,255,255,.88);
    border: 1px solid var(--bor);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.td-stat-card {
    padding: 18px;
}

.td-stat-label {
    font-size: 12px;
    color: var(--tx3);
    margin-bottom: 8px;
}

.td-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--txt);
    line-height: 1.3;
}

    .td-stat-value.td-small {
        font-size: 15px;
    }

.td-stat-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--tx3);
}

.is-success {
    color: var(--grn);
}

.is-muted {
    color: var(--tx3);
}

.is-danger {
    color: var(--red);
}

.is-warning {
    color: var(--orange);
}

.td-card {
    overflow: hidden;
}

.td-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 0 22px;
}

.td-card-body {
    padding: 18px 22px 22px 22px;
}

.td-card-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tx3);
    margin-bottom: 6px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.td-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--txt);
}

.td-card-count {
    font-size: 12px;
    color: var(--tx3);
    white-space: nowrap;
    padding-top: 6px;
}

.td-card-highlight {
    border-color: rgba(217,106,29,.24);
    background: linear-gradient(180deg, rgba(217,106,29,.05), rgba(255,255,255,1));
}

.td-card-success {
    border-color: rgba(27,127,77,.20);
    background: linear-gradient(180deg, rgba(27,127,77,.05), rgba(255,255,255,1));
}

.td-description {
    color: var(--txt);
    font-size: 14px;
    line-height: 1.8;
    background: var(--sur2);
    border: 1px solid var(--bor);
    border-radius: 16px;
    padding: 18px;
}

.td-side-card {
    padding: 18px;
}

.td-side-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 14px;
}

.td-side-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.td-side-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--bor);
    font-size: 13px;
}

    .td-side-item span {
        color: var(--tx3);
    }

    .td-side-item strong {
        color: var(--txt);
        text-align: right;
    }

/* RIGHT FILES */
.td-side-card-sticky-files {
    max-height: calc(100vh - 40px);
    overflow: auto;
}

    .td-side-card-sticky-files::-webkit-scrollbar {
        width: 8px;
    }

    .td-side-card-sticky-files::-webkit-scrollbar-thumb {
        background: rgba(148,163,184,.45);
        border-radius: 999px;
    }

    .td-side-card-sticky-files::-webkit-scrollbar-track {
        background: transparent;
    }

.td-side-attachments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.td-side-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 12px;
    border: 1px solid var(--bor);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #faf7f3);
    transition: var(--transition);
}

    .td-side-attachment:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(15,23,42,.07);
        border-color: rgba(217,106,29,.28);
        background: linear-gradient(180deg, #fff, var(--orange-soft));
    }

.td-side-attachment-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(217,106,29,.10);
    font-size: 18px;
}

.td-side-attachment-body {
    min-width: 0;
    flex: 1;
}

.td-side-attachment-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-side-attachment-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--tx3);
}

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

.td-side-card-highlight {
    border-color: rgba(217,106,29,.24);
    background: linear-gradient(180deg, rgba(217,106,29,.05), rgba(255,255,255,1));
}

.td-side-card-success {
    border-color: rgba(27,127,77,.20);
    background: linear-gradient(180deg, rgba(27,127,77,.05), rgba(255,255,255,1));
}

/* SLA WIDGET */
.td-sla-ring-wrap {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.td-sla-box {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 10px solid rgba(217,106,29,.18);
    background: radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(248,244,238,1) 100%);
}

    .td-sla-box.is-normal {
        border-color: rgba(27,79,130,.20);
    }

    .td-sla-box.is-warning {
        border-color: rgba(217,106,29,.25);
    }

    .td-sla-box.is-danger {
        border-color: rgba(176,56,56,.25);
    }

.td-sla-big {
    font-size: 34px;
    font-weight: 800;
    color: var(--txt);
    line-height: 1;
}

.td-sla-small {
    margin-top: 6px;
    font-size: 12px;
    color: var(--tx3);
}

/* COMPOSER */
.td-composer-wrap {
    margin-top: 4px;
    margin-bottom: 4px;
}

.td-composer {
    background: rgba(255,255,255,.90);
    border: 1px solid var(--bor);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.td-composer-main {
    padding: 16px 18px 8px 18px;
}

.td-composer-textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-size: 14px;
    line-height: 1.75;
    color: var(--txt);
    min-height: 44px;
    max-height: 220px;
    overflow: auto;
}

    .td-composer-textarea::placeholder {
        color: var(--tx3);
    }

.td-composer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px 14px 16px;
    border-top: 1px solid rgba(231,221,209,.95);
    background: linear-gradient(180deg, rgba(252,250,247,.9), rgba(255,255,255,1));
}

.td-composer-left,
.td-composer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.td-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--bor);
    background: #fff;
    color: var(--txt);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

    .td-tool-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15,23,42,.06);
        border-color: rgba(217,106,29,.28);
        background: var(--orange-soft);
    }

.td-file-trigger {
    position: relative;
    overflow: hidden;
}

.td-composer-hint {
    font-size: 12px;
    color: var(--tx3);
}

.td-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--bor);
    background: #fff;
    color: var(--txt);
    font-size: 13px;
    font-weight: 700;
}

.td-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px 16px 16px;
    background: #fff;
}

.td-file-preview::before {
    content: attr(data-count);
    width: 100%;
    font-size: 12px;
    color: var(--tx3);
}

.td-file-pill {
    min-width: 0;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(217,106,29,.22);
    background: rgba(217,106,29,.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.td-file-pill-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.td-file-pill-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--txt);
    word-break: break-word;
    line-height: 1.4;
    flex: 1;
}

.td-file-pill-meta {
    font-size: 11px;
    color: var(--tx3);
}

.td-file-pill-remove {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: none;
    border-radius: 8px;
    background: rgba(15,23,42,.06);
    color: var(--txt);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: var(--transition);
}

    .td-file-pill-remove:hover {
        background: rgba(176,56,56,.12);
        color: var(--red);
        transform: scale(1.04);
    }

/* CONVERSATION */
.td-conversation {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.td-msg {
    display: flex;
    gap: 14px;
}

.td-msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(217,106,29,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--txt);
    flex-shrink: 0;
    border: 1px solid rgba(217,106,29,.14);
}

.td-msg-body {
    flex: 1;
    min-width: 0;
}

.td-msg-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.td-msg-top-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.td-msg-user {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
}

.td-msg-time {
    font-size: 12px;
    color: var(--tx3);
}

.td-msg-content {
    background: #fff;
    border: 1px solid var(--bor);
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--txt);
}

.td-msg-attachments {
    margin-top: 8px;
    font-size: 12px;
    color: var(--tx3);
}

.td-msg-attachments-title {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--tx3);
}

.td-msg-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.td-msg-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(217,106,29,.18);
    background: rgba(217,106,29,.08);
    color: var(--txt);
    text-decoration: none;
    transition: var(--transition);
}

.td-msg-attachment-link:hover {
    background: var(--orange-soft);
    border-color: rgba(217,106,29,.3);
}

.td-msg-attachment-link.is-static {
    cursor: default;
}

.td-msg-kind {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.td-msg-kind.is-comment {
    color: var(--blu);
    background: var(--bbg);
    border: 1px solid rgba(37,93,155,.18);
}

.td-msg-kind.is-note {
    color: var(--yel);
    background: var(--ybg);
    border: 1px solid rgba(138,105,18,.18);
}

.td-msg-kind.is-system {
    color: var(--tx2);
    background: var(--sur2);
    border: 1px solid var(--bor);
}

.td-msg-note .td-msg-avatar {
    background: rgba(138,105,18,.12);
    border-color: rgba(138,105,18,.2);
}

.td-msg-note .td-msg-content {
    background: rgba(252,245,223,.45);
    border-color: rgba(138,105,18,.2);
}

.td-msg-image-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 132px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(37,93,155,.14);
    background: #fff;
    color: var(--txt);
    text-decoration: none;
    transition: var(--transition);
}

.td-msg-image-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.td-msg-image-thumb {
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--bor);
}

.td-msg-image-name {
    font-size: 11px;
    line-height: 1.4;
    word-break: break-word;
}

.td-image-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(15,23,42,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.td-image-modal[hidden] {
    display: none;
}

.td-image-modal-img {
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 90px);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,.34);
}

.td-image-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* SLA pulse / warn animations */
@keyframes sla-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(176,56,56,.5); }
    50%       { opacity: .78; box-shadow: 0 0 0 8px rgba(176,56,56,0); }
}

@keyframes badge-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

.sla-pulse {
    animation: sla-blink 1.4s ease-in-out infinite;
}

.sla-pulse-badge {
    animation: badge-blink 1.2s ease-in-out infinite;
}

.sla-warn-badge {
    background: rgba(217,106,29,.15) !important;
    color: var(--orange) !important;
    border-color: rgba(217,106,29,.3) !important;
}

/* Assign modal */
.td-modal {
    position: fixed;
    inset: 0;
    z-index: 4900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.td-modal[hidden] { display: none; }

.td-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(3px);
}

.td-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 580px;
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    background: var(--sur);
    border-radius: 28px;
    border: 1px solid var(--bor);
    box-shadow: 0 24px 60px rgba(15,23,42,.22);
    overflow: hidden;
}

.td-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--bor);
    flex-shrink: 0;
}

.td-modal-eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.td-modal-title {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--txt);
}

.td-modal-sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--tx3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

.td-modal-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bor);
    background: var(--sur2);
    font-size: 20px;
    line-height: 1;
    color: var(--tx2);
    cursor: pointer;
    transition: var(--transition);
}

.td-modal-close:hover { background: var(--rbg); color: var(--red); border-color: rgba(176,56,56,.18); }

.td-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.td-modal-section-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.td-assign-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 18px;
    transition: box-shadow .2s;
}

.td-assign-grid.assign-error {
    box-shadow: 0 0 0 2px var(--red);
}

.td-assign-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1.5px solid var(--bor);
    background: rgba(255,255,255,.78);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.td-assign-card:hover {
    border-color: var(--blue);
    background: rgba(37,93,155,.05);
}

.td-assign-card.is-selected {
    border-color: var(--blue);
    background: rgba(37,93,155,.08);
}

.td-assign-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(37,93,155,.12);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
}

.td-assign-card.is-selected .td-assign-avatar {
    background: var(--blue);
    color: #fff;
}

.td-assign-info {
    flex: 1;
    min-width: 0;
}

.td-assign-info strong {
    display: block;
    font-size: 14px;
    color: var(--txt);
}

.td-assign-info span {
    display: block;
    font-size: 12px;
    color: var(--tx3);
    margin-top: 2px;
}

.td-assign-current {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--blue);
    background: rgba(37,93,155,.1);
    border: 1px solid rgba(37,93,155,.16);
    padding: 3px 8px;
    border-radius: 999px;
}

.td-assign-empty {
    padding: 16px;
    border-radius: 16px;
    background: var(--sur2);
    color: var(--tx3);
    font-size: 13px;
    text-align: center;
}

.td-modal-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.td-modal-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
}

.td-optional {
    font-weight: 400;
    color: var(--tx3);
    font-size: 12px;
}

.td-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--bor);
    flex-shrink: 0;
}

.td-msg-system .td-msg-avatar {
    background: rgba(143,153,165,.12);
    border-color: rgba(143,153,165,.14);
}

.td-msg-system .td-msg-content {
    background: rgba(252,250,247,.95);
    border-style: dashed;
    color: var(--tx2);
}

.td-note {
    background: rgba(251,191,36,.12);
    border-color: rgba(251,191,36,.30);
}

.td-msg-image-grid {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.td-msg-image {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid var(--bor);
    transition: var(--transition);
}

    .td-msg-image:hover {
        transform: scale(1.03);
        box-shadow: var(--shadow-sm);
    }

.td-empty-state {
    padding: 24px;
    border: 1px dashed var(--bor);
    border-radius: 18px;
    color: var(--tx3);
    text-align: center;
    font-size: 14px;
    background: var(--sur2);
}

/* FORM PARTS USED IN td-* */
.td-form-group {
    min-width: 260px;
    flex: 1;
}

.td-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--tx2);
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.td-control {
    width: 100%;
    border: 1px solid var(--bor);
    border-radius: 14px;
    background: #fff;
    color: var(--txt);
    padding: 12px 14px;
    font-size: 14px;
}

    .td-control:focus {
        border-color: var(--orange);
        box-shadow: var(--ring);
    }

.td-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

    .td-btn:hover {
        transform: translateY(-1px);
    }

.td-btn-primary {
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    color: #fff;
    box-shadow: 0 10px 18px rgba(15,47,79,.20);
}

    .td-btn-primary:hover {
        color: #fff;
        box-shadow: 0 14px 24px rgba(15,47,79,.24);
    }

.td-btn-secondary {
    background: #fff;
    color: var(--txt);
    border: 1px solid var(--bor);
}

    .td-btn-secondary:hover {
        background: var(--sur2);
    }

.td-btn-accent {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
}

    .td-btn-accent:hover {
        color: #fff;
    }

.td-btn-success {
    background: linear-gradient(135deg, #1b7f4d, #16663e);
    color: #fff;
}

    .td-btn-success:hover {
        color: #fff;
    }

.td-btn-block {
    width: 100%;
}

.td-btn[disabled] {
    opacity: .7;
    cursor: not-allowed;
    transform: none !important;
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bor2);
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #c7beb1;
    }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .tl-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .db-hero,
    .db-main-grid,
    .db-insight-grid,
    .db-chart-grid {
        grid-template-columns: 1fr;
    }

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

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

    .td-grid {
        grid-template-columns: 1fr;
    }

    .td-sidebar-stack {
        position: static;
    }

    .td-side-card-sticky-files {
        max-height: none;
        overflow: visible;
    }

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

@media (max-width: 1100px) {
    .db-title {
        font-size: 32px;
    }

    .sg {
        grid-template-columns: repeat(3,1fr);
    }

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

    .rg {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .tl-hero {
        flex-direction: column;
        padding: 20px;
        border-radius: 22px;
    }

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

    .tl-filter-grid {
        grid-template-columns: 1fr;
    }

    .tl-filter-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .tl-filter-actions .btn {
        width: 100%;
    }

    .db-page {
        gap: 16px;
    }

    .db-hero {
        padding: 20px;
        border-radius: 22px;
    }

    .db-summary-grid,
    .db-mini-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-chart-body,
    .db-critical-list,
    .db-action-list,
    .db-insight-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sb-toggle {
        display: flex;
    }

    .sidebar {
        position: fixed;
        left: -270px;
        top: 64px;
        height: calc(100vh - 64px);
        z-index: 200;
        transition: left .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 28px rgba(15,23,42,.16);
    }

    .sidebar.is-open {
        left: 0;
    }

    .main {
        padding: 16px;
    }

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

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

    .step-unit-grid,
    .cat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ph {
        flex-direction: column;
        align-items: flex-start;
    }

    .td-page {
        padding: 0;
    }

    .td-hero {
        padding: 18px;
        border-radius: 18px;
        flex-direction: column;
    }

    .td-title {
        font-size: 24px;
    }

    .td-summary-grid {
        grid-template-columns: 1fr;
    }

    .td-composer-toolbar {
        align-items: stretch;
    }

    .td-composer-left,
    .td-composer-right {
        width: 100%;
    }

        .td-composer-right .td-btn {
            width: 100%;
        }

    .td-tool-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .tl-title {
        font-size: 28px;
    }

    .tl-stats {
        grid-template-columns: 1fr;
    }

    .tl-ticket-cell strong {
        max-width: 220px;
    }

    .db-title {
        font-size: 26px;
    }

    .db-subtitle {
        font-size: 14px;
    }

    .db-summary-grid,
    .db-mini-metrics {
        grid-template-columns: 1fr;
    }

    .db-hero-actions .btn {
        width: 100%;
    }

    .db-critical-item,
    .db-panel-head,
    .db-card-head {
        flex-direction: column;
    }

    .db-critical-meta {
        width: 100%;
        text-align: left;
    }

    .db-ticket-title-wrap strong {
        max-width: 220px;
    }

    .topbar {
        padding: 0 14px;
    }

    .logo-sub,
    .logo-sep,
    .u-nm {
        display: none;
    }

    .sg {
        grid-template-columns: 1fr;
    }

    .dmg {
        grid-template-columns: 1fr;
    }

    .step-unit-grid,
    .cat-grid {
        grid-template-columns: 1fr;
    }

    th,
    td {
        padding-left: 10px;
        padding-right: 10px;
    }

    .td-msg {
        gap: 10px;
    }

    .td-msg-avatar {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .td-card-head,
    .td-card-body,
    .td-side-card {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.page-shell {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.sb-i-unit {
    font-size: 12px;
}

.alert strong {
    font-weight: 800;
    margin-right: 6px;
}

@media (max-width:800px) {
    .page-shell {
        max-width: 100%;
    }
}
/* NOTIFICATIONS */
.tb-tools { display:flex; align-items:center; gap:8px; }
.notif-box { position:relative; }
.notif-btn {
    position:relative; width:40px; height:40px;
    border:1px solid rgba(255,255,255,.16); border-radius:12px;
    background:rgba(255,255,255,.10); color:rgba(255,255,255,.85);
    cursor:pointer; transition:background .18s, border-color .18s;
    display:flex; align-items:center; justify-content:center;
}
.notif-btn:hover { background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.28); }
.notif-btn.has-unread svg { animation: bell-ring 3s ease-in-out infinite; transform-origin: 50% 2px; }
@keyframes bell-ring {
    0%,55%,100% { transform:rotate(0); }
    60%,70% { transform:rotate(-12deg); }
    65%,75% { transform:rotate(12deg); }
    80% { transform:rotate(-6deg); }
    85% { transform:rotate(6deg); }
    90% { transform:rotate(0); }
}
.notif-icon { display:inline-flex; align-items:center; justify-content:center; }
.notif-badge {
    position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
    border-radius:999px; background:#ef4444; color:#fff; font-size:10px; font-weight:800;
    line-height:18px; text-align:center; border:2px solid #365989;
    box-shadow:0 2px 6px rgba(239,68,68,.45);
}
.notif-panel {
    position:absolute; right:0; top:54px; width:390px; max-width:calc(100vw - 24px);
    background:#fff; border:1px solid #e0eaf5; border-radius:20px;
    box-shadow:0 24px 64px rgba(15,47,79,.18), 0 4px 16px rgba(15,47,79,.08);
    overflow:hidden; z-index:60;
    animation:notif-appear .18s cubic-bezier(.4,0,.2,1);
}
@keyframes notif-appear {
    from { opacity:0; transform:translateY(-10px) scale(.97); }
    to   { opacity:1; transform:translateY(0)   scale(1);    }
}
.notif-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px 14px; border-bottom:1px solid #eef3fa;
    background:linear-gradient(135deg,#f8fbff,#fff);
}
.notif-head-left { display:flex; align-items:center; gap:8px; }
.notif-head-title { font-size:15px; font-weight:800; color:#0f2f4f; letter-spacing:-.3px; }
.notif-head-count {
    font-size:10px; font-weight:800; color:#fff; background:#365989;
    padding:2px 7px; border-radius:999px; letter-spacing:.3px;
}
.notif-actions { display:flex; align-items:center; gap:6px; }
.notif-link {
    border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer;
    padding:5px 10px; transition:background .15s, color .15s;
    background:rgba(54,89,137,.08); color:#365989;
}
.notif-link:hover { background:rgba(54,89,137,.15); }
.notif-link.is-active { background:#365989; color:#fff; }
.notif-link-mark { background:transparent; color:#9baab8; border:1px solid #e0eaf5; }
.notif-link-mark:hover { background:#f0f6ff; color:#365989; border-color:#c7ddf5; }
.notif-list {
    max-height:400px; overflow-y:auto; padding:10px 10px 4px;
    scrollbar-width:thin; scrollbar-color:#d0dce8 transparent;
}
.notif-list::-webkit-scrollbar { width:4px; }
.notif-list::-webkit-scrollbar-track { background:transparent; }
.notif-list::-webkit-scrollbar-thumb { background:#d0dce8; border-radius:4px; }
.notif-item {
    display:block; padding:12px 14px; border-radius:14px; text-decoration:none;
    border:1px solid transparent; margin-bottom:6px; transition:all .15s;
    background:#f6f9fc; position:relative; overflow:hidden;
}
.notif-item::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:transparent; border-radius:0 3px 3px 0; transition:background .15s;
}
.notif-item:hover { border-color:#dce8f4; background:#fff; box-shadow:0 2px 10px rgba(15,47,79,.06); }
.notif-item:hover::before { background:#cce3f2; }
.notif-item.is-unread { background:#eef5ff; border-color:#c5d9f5; }
.notif-item.is-unread::before { background:#365989; }
.notif-item-inner { display:flex; align-items:flex-start; gap:10px; }
.notif-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px;
    background:#d0dce8; transition:background .15s;
}
.notif-dot.is-unread { background:#365989; box-shadow:0 0 0 3px rgba(54,89,137,.15); }
.notif-item-content { flex:1; min-width:0; }
.notif-item-title { font-weight:700; font-size:13.5px; color:#0f2f4f; margin-bottom:3px; line-height:1.35; }
.notif-item-body { font-size:12.5px; color:#4b5d70; line-height:1.5; }
.notif-ticket-link {
    display:inline-flex; align-items:center; gap:4px; margin-top:7px;
    font-size:11.5px; font-weight:700; color:#365989;
    background:rgba(54,89,137,.08); padding:3px 9px; border-radius:6px;
    border:1px solid rgba(54,89,137,.14);
}
.notif-item-time { margin-top:6px; font-size:11px; color:#9baab8; }
.notif-empty {
    padding:36px 16px 28px; text-align:center; color:#9baab8; font-size:13px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
}
.notif-empty-icon { font-size:28px; opacity:.4; margin-bottom:4px; }
.notif-footer {
    padding:10px 18px 13px; border-top:1px solid #eef3fa; text-align:center;
}
.notif-footer-link {
    font-size:12.5px; font-weight:700; color:#365989; text-decoration:none;
    padding:6px 16px; border-radius:9px; display:inline-block;
    transition:background .15s; background:rgba(54,89,137,.07);
}
.notif-footer-link:hover { background:rgba(54,89,137,.14); }
.profile-shortcut {
    padding:8px 14px; border-radius:10px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
    color:rgba(255,255,255,.85); text-decoration:none; font-weight:600; font-size:13px;
    transition:background .18s, border-color .18s;
}
.profile-shortcut:hover {
    background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.28); color:#fff;
}

/* PROFILE */
.profile-page { display:grid; gap:18px; }
.profile-card {
    background:#fff; border:1px solid #dde6ef; border-radius:24px; padding:24px 26px;
    box-shadow:0 12px 30px rgba(15, 47, 79, .06);
}
.profile-head {
    display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px;
}
.profile-head.simple { margin-bottom:16px; }
.profile-head h1, .profile-head h2 { margin:0 0 6px; color:#13283d; }
.profile-head p { margin:0; color:#617487; }
.profile-eyebrow { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#8c9bab; margin-bottom:8px; }
.profile-avatar {
    width:72px; height:72px; border-radius:22px; display:flex; align-items:center; justify-content:center;
    font-size:24px; font-weight:800;
}
.profile-form { display:grid; gap:18px; }

/* CATEGORY */
.cg-page,
.cf-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cg-hero,
.cf-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%), radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.cg-eyebrow,
.cg-stat-label,
.cg-card-label,
.cf-eyebrow,
.cf-card-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.cg-title,
.cf-title {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--txt);
}

.cg-subtitle,
.cf-subtitle {
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.cg-hero-actions,
.cf-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

.cg-stat {
    background: rgba(255,255,255,.84);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.cg-stat-value {
    margin: 10px 0 6px;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--txt);
}

.cg-stat-note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

.cg-stat.is-blue { background: linear-gradient(180deg, rgba(37,93,155,.08), rgba(255,255,255,.88)); }
.cg-stat.is-green { background: linear-gradient(180deg, rgba(27,127,77,.08), rgba(255,255,255,.88)); }
.cg-stat.is-red { background: linear-gradient(180deg, rgba(176,56,56,.08), rgba(255,255,255,.88)); }
.cg-stat.is-gold { background: linear-gradient(180deg, rgba(138,105,18,.08), rgba(255,255,255,.88)); }

.cg-empty-card {
    border-radius: 24px;
}

.cg-group-card,
.cf-form-card {
    border-radius: 24px;
}

.cg-group-head,
.cf-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

.cg-card-title,
.cf-card-title,
.cf-side-title {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.02em;
}

.cg-group-count {
    font-size: 12px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

.cg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px 20px;
}

.cg-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-xs);
}

.cg-item.is-passive {
    opacity: .7;
}

.cg-item-top,
.cg-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    font-size: 22px;
    color: var(--txt);
}

.cg-item-body strong {
    display: block;
    font-size: 16px;
    color: var(--txt);
}

.cg-code {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    color: var(--tx3);
    font-size: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cg-item-body p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--tx2);
}

.cg-badge-passive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    color: var(--tx3);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-mono);
}

.cg-delete-btn {
    border: 1px solid rgba(176,56,56,.18);
    background: var(--rbg);
    color: var(--red);
    border-radius: 13px;
    padding: 8px 12px;
    min-height: 32px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.cf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr);
    gap: 18px;
    align-items: start;
}

.cf-form-body {
    padding: 20px 24px 24px;
}

.cf-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 14px;
}

.cf-icon-field {
    min-width: 0;
}

.cf-icon-input {
    text-align: center;
    font-size: 20px;
}

.cf-required {
    color: var(--orange);
}

.cf-help {
    font-size: 12px;
    color: var(--tx3);
    line-height: 1.6;
}

.cf-textarea {
    min-height: 120px;
}

.cf-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.cf-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cf-side-card {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.84);
    box-shadow: var(--shadow-sm);
}

.cf-tip-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.cf-tip-item {
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.7);
}

.cf-tip-item strong {
    display: block;
    font-size: 13px;
    color: var(--txt);
}

.cf-tip-item span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tx3);
}

/* UNIT */
.up-page,
.uf-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.up-hero,
.uf-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%), radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.up-eyebrow,
.up-stat-label,
.up-card-label,
.uf-eyebrow,
.uf-card-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.up-title,
.uf-title {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--txt);
}

.up-subtitle,
.uf-subtitle {
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.up-hero-actions,
.uf-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

.up-stat {
    background: rgba(255,255,255,.84);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.up-stat-value {
    margin: 10px 0 6px;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--txt);
}

.up-stat-note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

.up-stat.is-blue { background: linear-gradient(180deg, rgba(37,93,155,.08), rgba(255,255,255,.88)); }
.up-stat.is-green { background: linear-gradient(180deg, rgba(27,127,77,.08), rgba(255,255,255,.88)); }
.up-stat.is-red { background: linear-gradient(180deg, rgba(176,56,56,.08), rgba(255,255,255,.88)); }
.up-stat.is-gold { background: linear-gradient(180deg, rgba(138,105,18,.08), rgba(255,255,255,.88)); }

.up-empty-card,
.up-list-card,
.uf-form-card {
    border-radius: 24px;
}

.up-list-head,
.uf-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

.up-card-title,
.uf-card-title,
.uf-side-title {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.02em;
}

.up-card-count {
    font-size: 12px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

.up-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px 20px;
}

.up-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-xs);
}

.up-item.is-passive {
    opacity: .7;
}

.up-item-top,
.up-item-actions,
.up-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.up-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    font-size: 22px;
    color: var(--txt);
}

.up-item-body strong {
    display: block;
    font-size: 16px;
    color: var(--txt);
}

.up-code {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    color: var(--tx3);
    font-size: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.up-meta-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bor);
}

.up-meta-row span {
    font-size: 12px;
    color: var(--tx3);
}

.up-meta-row strong {
    font-size: 14px;
    color: var(--txt);
}

.up-badge-passive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    color: var(--tx3);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-mono);
}

.up-delete-btn {
    border: 1px solid rgba(176,56,56,.18);
    background: var(--rbg);
    color: var(--red);
    border-radius: 13px;
    padding: 8px 12px;
    min-height: 32px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.uf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr);
    gap: 18px;
    align-items: start;
}

.uf-form-body {
    padding: 20px 24px 24px;
}

.uf-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 14px;
}

.uf-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 14px;
}

.uf-icon-input {
    text-align: center;
    font-size: 20px;
}

.uf-required {
    color: var(--orange);
}

.uf-help {
    font-size: 12px;
    color: var(--tx3);
    line-height: 1.6;
}

.uf-order-field,
.uf-icon-field {
    min-width: 0;
}

.uf-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.uf-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.uf-side-card {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.84);
    box-shadow: var(--shadow-sm);
}

.uf-tip-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.uf-tip-item {
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.7);
}

.uf-tip-item strong {
    display: block;
    font-size: 13px;
    color: var(--txt);
}

.uf-tip-item span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tx3);
}

/* LOCATION */
.lp-page,
.lf-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lp-hero,
.lf-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%), radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.lp-eyebrow,
.lp-card-label,
.lf-eyebrow,
.lf-card-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.lp-title,
.lf-title {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--txt);
}

.lp-subtitle,
.lf-subtitle {
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.lp-hero-actions,
.lf-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lp-card,
.lf-form-card {
    border-radius: 24px;
}

.lp-head,
.lf-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

.lp-card-title,
.lf-card-title {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.02em;
}

.lp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px 20px;
}

.lp-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-xs);
}

.lp-item.is-passive {
    opacity: .72;
}

.lp-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lp-item-top strong {
    font-size: 16px;
    color: var(--txt);
}

.lp-code {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    color: var(--tx3);
    font-size: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.lp-item p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--tx2);
}

.lf-form-body {
    padding: 20px 24px 24px;
}

.lf-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 1180px) {
    .cg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cf-layout,
    .uf-layout {
        grid-template-columns: 1fr;
    }

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

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

@media (max-width: 820px) {
    .cg-hero,
    .cf-hero,
    .up-hero,
    .uf-hero,
    .lp-hero,
    .lf-hero,
    .cg-group-head,
    .cf-form-head,
    .uf-form-head,
    .lp-head,
    .lf-form-head,
    .cf-footer,
    .uf-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .cg-stats,
    .cg-grid,
    .cf-name-row,
    .up-stats,
    .up-grid,
    .uf-name-row,
    .uf-meta-row,
    .lp-grid {
        grid-template-columns: 1fr;
    }

    .lf-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ASSIGN */
.as-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ASSIGN INDEX */
.ai-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ai-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%), radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.ai-eyebrow,
.ai-stat-label,
.ai-card-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.ai-title {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--txt);
}

.ai-subtitle {
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.ai-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

.ai-stat {
    background: rgba(255,255,255,.84);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.ai-stat-value {
    margin: 10px 0 6px;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--txt);
}

.ai-stat-note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

.ai-stat.is-blue {
    background: linear-gradient(180deg, rgba(37,93,155,.08), rgba(255,255,255,.88));
}

.ai-stat.is-orange {
    background: linear-gradient(180deg, rgba(217,106,29,.08), rgba(255,255,255,.88));
}

.ai-stat.is-red {
    background: linear-gradient(180deg, rgba(176,56,56,.08), rgba(255,255,255,.88));
}

.ai-stat.is-green {
    background: linear-gradient(180deg, rgba(27,127,77,.08), rgba(255,255,255,.88));
}

.ai-stat.is-gold {
    background: linear-gradient(180deg, rgba(138,105,18,.08), rgba(255,255,255,.88));
}

.ai-table-card {
    border-radius: 24px;
}

.ai-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-filter-card {
    border-radius: 24px;
}

.ai-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px 0;
}

.ai-filter-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.ai-filter-form {
    padding: 14px 20px 20px;
}

.ai-filter-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ai-filter-field {
    min-width: 0;
}

.ai-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.ai-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

.ai-card-title {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.02em;
}

.ai-card-count {
    font-size: 12px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

.ai-table-wrap {
    padding: 18px 18px 20px;
    overflow-x: auto;
}

.ai-table-wrap table th,
.ai-table-wrap table td {
    padding-top: 16px;
    padding-bottom: 16px;
}

.ai-ticket-cell strong,
.ai-meta-cell strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--txt);
}

.ai-ticket-cell span:last-child,
.ai-muted-cell {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--tx3);
}

.ai-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-file-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tx3);
    background: var(--sur2);
    border: 1px solid var(--bor);
}

.ai-file-chip.has-files {
    color: var(--orange);
    background: var(--orange-soft);
    border-color: rgba(217,106,29,.18);
}

.ai-assignee {
    font-size: 13px;
    font-weight: 700;
}

.ai-assignee.is-assigned {
    color: var(--grn);
}

.ai-assignee.is-empty {
    color: var(--red);
}

.as-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%), radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.as-hero-copy,
.as-ticket-meta,
.as-summary-list,
.as-check-list,
.as-layout,
.as-form-side {
    display: flex;
    flex-direction: column;
}

.as-hero-copy {
    gap: 16px;
    max-width: 840px;
}

.as-eyebrow,
.as-card-label,
.as-side-label,
.as-mini-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.as-title {
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -.04em;
    color: var(--txt);
}

.as-subtitle {
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.as-ticket-meta {
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

.as-meta-card,
.as-mini-card {
    background: rgba(255,255,255,.78);
    border: 1px solid var(--bor);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}

.as-meta-card span,
.as-summary-row span,
.as-check-item span,
.as-mini-card em {
    display: block;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tx3);
    font-style: normal;
}

.as-meta-card strong,
.as-card-title,
.as-summary-row strong,
.as-check-item strong,
.as-mini-card strong {
    display: block;
    color: var(--txt);
}

.as-meta-card strong,
.as-mini-card strong {
    margin-top: 5px;
    font-size: 15px;
}

.as-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.as-main-card {
    border-radius: 28px;
}

.as-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px 0;
}

.as-card-title {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.as-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--orange-soft);
    border: 1px solid rgba(217,106,29,.18);
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: var(--font-mono);
}

.as-card-body {
    padding: 20px 24px 24px;
}

.as-current-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--gbg);
    border: 1px solid rgba(27,127,77,.18);
    color: var(--grn);
}

.as-current-banner span {
    font-size: 12px;
    font-weight: 700;
}

.as-current-banner strong {
    font-size: 14px;
}

.as-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .82fr);
    gap: 18px;
    align-items: start;
}

.as-form-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.as-required {
    color: var(--orange);
}

.as-help {
    font-size: 12px;
    color: var(--tx3);
    line-height: 1.6;
}

.as-textarea {
    min-height: 140px;
}

.as-side-card {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.84);
    box-shadow: var(--shadow-sm);
}

.as-side-card-soft {
    background: linear-gradient(180deg, rgba(37,93,155,.06), rgba(255,255,255,.88));
}

.as-summary-list,
.as-check-list {
    gap: 10px;
    margin-top: 14px;
}

.as-summary-row,
.as-check-item {
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.74);
}

.as-summary-row strong,
.as-check-item strong {
    margin-top: 4px;
    font-size: 13px;
}

.as-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* Person card grid inside AssignTicket */
.as-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 8px;
    padding: 4px;
    border-radius: 12px;
    transition: box-shadow .15s;
}

.as-person-grid.assign-error {
    animation: shake .35s ease;
    box-shadow: 0 0 0 2px var(--red);
}

.as-person-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--sur2);
    border: 1.5px solid var(--bor);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.as-person-card:hover {
    border-color: var(--blu);
    background: rgba(54,89,137,.05);
}

.as-person-card.is-selected {
    border-color: var(--blu);
    background: rgba(54,89,137,.07);
    box-shadow: 0 0 0 3px rgba(54,89,137,.13);
}

.as-person-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blu);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as-person-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.as-person-info strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-person-info span {
    font-size: 11px;
    color: var(--tx3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-person-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grn);
    background: var(--green-soft);
    border: 1px solid rgba(27,127,77,.2);
    border-radius: 999px;
    padding: 3px 8px;
}

.as-empty-team {
    padding: 20px;
    color: var(--tx3);
    font-size: 14px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    border-radius: 12px;
    text-align: center;
}

@media (max-width: 1080px) {
    .ai-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-filter-grid {
        grid-template-columns: 1fr;
    }

    .as-hero,
    .as-form-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .ai-hero,
    .ai-table-head {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-stats {
        grid-template-columns: 1fr;
    }

    .ai-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .as-card-head,
    .as-current-banner,
    .as-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .as-person-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* TICKET CREATE */
.tc-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .95fr);
    gap: 18px;
    padding: 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.11), transparent 24%), radial-gradient(circle at bottom right, rgba(217,106,29,.12), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.97), rgba(248,244,238,.95));
    box-shadow: var(--shadow-md);
}

.tc-hero-copy,
.tc-panel-list,
.tc-layout,
.tc-guide-list,
.tc-summary-list {
    display: flex;
    flex-direction: column;
}

.tc-hero-copy {
    gap: 16px;
}

.tc-eyebrow,
.tc-panel-label,
.tc-form-label,
.tc-section-eyebrow,
.tc-side-label,
.tc-inline-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.tc-title {
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -.04em;
    color: var(--txt);
    max-width: 760px;
}

.tc-subtitle,
.tc-step-intro p,
.tc-side-copy,
.tc-guide-item span {
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.tc-step-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tc-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.72);
    color: var(--tx3);
}

.tc-step-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--sur2);
    font-size: 11px;
    font-weight: 800;
    color: var(--tx2);
}

.tc-step-chip strong {
    font-size: 13px;
    color: inherit;
}

.tc-step-chip.is-active,
.tc-step-chip.is-complete {
    border-color: rgba(217,106,29,.22);
    background: var(--orange-soft);
    color: var(--orange);
}

.tc-step-chip.is-complete span,
.tc-step-chip.is-active span {
    background: rgba(217,106,29,.15);
    color: var(--orange);
}

.tc-hero-panel,
.tc-guide-card,
.tc-side-card {
    border-radius: 24px;
}

.tc-hero-panel {
    padding: 22px;
    background: rgba(15,47,79,.95);
    color: #fff;
    box-shadow: 0 20px 40px rgba(15,47,79,.18);
}

.tc-panel-title,
.tc-form-title,
.tc-guide-title {
    margin-top: 8px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.03em;
}

.tc-panel-list,
.tc-guide-list,
.tc-summary-list {
    gap: 12px;
    margin-top: 18px;
}

.tc-panel-item,
.tc-guide-item,
.tc-summary-row {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.08);
}

.tc-panel-item strong,
.tc-guide-item strong {
    display: block;
    font-size: 14px;
}

.tc-panel-item span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.7;
}

.tc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .78fr);
    gap: 18px;
    align-items: start;
}

.tc-form-card {
    border-radius: 28px;
}

.tc-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px 0;
}

.tc-form-body {
    padding: 20px 24px 24px;
}

.tc-step-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tc-step-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tc-step-intro h3 {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.1;
    color: var(--txt);
    letter-spacing: -.03em;
}

.tc-step-intro p {
    max-width: 360px;
}

.tc-unit-grid,
.tc-category-grid {
    display: grid;
    gap: 12px;
}

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

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

.tc-unit-card,
.tc-cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 18px;
    text-align: left;
    border-radius: 22px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.75);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
    cursor: pointer;
}

.tc-unit-card:hover,
.tc-cat-card:hover,
.tc-unit-card.is-active,
.tc-cat-card.is-active {
    transform: translateY(-1px);
    border-color: rgba(217,106,29,.24);
    background: var(--orange-soft);
    box-shadow: var(--shadow-sm);
}

.tc-unit-code,
.tc-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(37,93,155,.10);
    color: var(--blu);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.tc-unit-card strong,
.tc-cat-card strong,
.tc-side-title {
    font-size: 16px;
    color: var(--txt);
}

.tc-unit-card em,
.tc-cat-card em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tx3);
}

.tc-step-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tc-selection-inline,
.tc-selection-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tc-selection-inline strong {
    font-size: 13px;
    color: var(--txt);
}

.tc-badge-accent {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid rgba(217,106,29,.18);
}

.tc-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .92fr);
    gap: 18px;
    align-items: start;
}

.tc-detail-main,
.tc-detail-side,
.tc-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tc-required {
    color: var(--orange);
}

.tc-help {
    font-size: 12px;
    color: var(--tx3);
    line-height: 1.6;
}

.tc-textarea {
    min-height: 180px;
}

.tc-side-card,
.tc-guide-card {
    padding: 18px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.84);
    box-shadow: var(--shadow-sm);
}

.tc-side-card-soft {
    background: linear-gradient(180deg, rgba(37,93,155,.06), rgba(255,255,255,.88));
}

.tc-upload-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding: 22px;
    border: 2px dashed var(--bor2);
    border-radius: 20px;
    background: var(--sur2);
    transition: var(--transition);
    cursor: pointer;
}

.tc-upload-zone:hover,
.tc-upload-zone.is-drag {
    border-color: var(--orange);
    background: var(--orange-soft);
}

.tc-upload-zone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.tc-upload-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--tx3);
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.tc-upload-zone strong {
    font-size: 16px;
    color: var(--txt);
}

.tc-upload-zone em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tx3);
}

.tc-file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.tc-file-item,
.tc-empty-file,
.tc-empty-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--bor);
    background: rgba(255,255,255,.74);
}

.tc-empty-file,
.tc-empty-box {
    justify-content: center;
    color: var(--tx3);
    font-size: 12px;
}

.tc-file-meta strong,
.tc-summary-row strong {
    display: block;
    font-size: 13px;
    color: var(--txt);
}

.tc-file-meta span,
.tc-summary-row span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--tx3);
}

.tc-file-remove {
    border: 1px solid rgba(176,56,56,.18);
    background: var(--rbg);
    color: var(--red);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.tc-summary-row {
    background: rgba(255,255,255,.68);
}

.tc-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.tc-guide-title {
    font-size: 20px;
}

/* Priority picker */
.tc-priority-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.tc-pri-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    border: 1.5px solid var(--bor);
    background: rgba(255,255,255,.78);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.tc-pri-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.tc-pri-btn strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--txt);
}

.tc-pri-btn em {
    font-style: normal;
    font-size: 11px;
    line-height: 1.5;
    color: var(--tx3);
}

.tc-pri-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.tc-pri-btn.is-kritik .tc-pri-dot { background: var(--red); }
.tc-pri-btn.is-yuksek .tc-pri-dot { background: var(--orange); }
.tc-pri-btn.is-orta   .tc-pri-dot { background: #2a7d4e; }
.tc-pri-btn.is-dusuk  .tc-pri-dot { background: var(--tx3); }

.tc-pri-btn.is-kritik.is-active  { border-color: var(--red);    background: var(--rbg);          }
.tc-pri-btn.is-yuksek.is-active  { border-color: var(--orange); background: var(--orange-soft);  }
.tc-pri-btn.is-orta.is-active    { border-color: #2a7d4e;       background: rgba(27,127,77,.08); }
.tc-pri-btn.is-dusuk.is-active   { border-color: var(--tx2);    background: var(--sur2);         }

.tc-pri-btn.is-kritik.is-active strong { color: var(--red);    }
.tc-pri-btn.is-yuksek.is-active strong { color: var(--orange); }
.tc-pri-btn.is-orta.is-active   strong { color: #2a7d4e;       }

/* Character counter */
.tc-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
}

.tc-char-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--tx3);
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

.tc-char-count.tc-char-warn {
    color: var(--orange);
}

/* Submit spinner */
.tc-submit-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
    .tc-priority-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .tc-priority-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
    .tc-hero,
    .tc-layout,
    .tc-detail-grid {
        grid-template-columns: 1fr;
    }

    .tc-step-intro {
        flex-direction: column;
    }
}

@media (max-width: 820px) {
    .tc-unit-grid,
    .tc-category-grid,
    .fr {
        grid-template-columns: 1fr;
    }

    .tc-form-head,
    .tc-step-toolbar,
    .tc-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tc-step-chip {
        width: 100%;
        justify-content: flex-start;
    }
}
.profile-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.profile-field label { display:block; margin-bottom:8px; font-weight:700; color:#22384d; }
.profile-input {
    width:100%; min-height:46px; border:1px solid #d7e0ea; border-radius:14px; padding:10px 12px;
    background:#f9fbfd; color:#13283d;
}
.profile-btn {
    display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px;
    border:none; border-radius:14px; background:#375988; color:#fff; font-weight:700; cursor:pointer;
}
.profile-btn.profile-btn-dark { background:#12324d; }

@media (max-width: 840px) {
    .notif-panel { right:-24px; }
    .tb-tools { gap:8px; }
    .profile-shortcut { display:none; }
    .profile-head { align-items:flex-start; }
}

/* ========== USER MANAGEMENT (Index + Edit) ========== */
.um-page,
.ue-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Hero */
.um-hero,
.ue-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%),
                radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%),
                linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.um-eyebrow,
.ue-eyebrow,
.um-card-label,
.ue-card-label,
.um-filter-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.um-title,
.ue-title {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--txt);
}

.um-subtitle,
.ue-subtitle {
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.um-hero-actions,
.ue-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Stat cards */
.um-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.um-stat {
    background: rgba(255,255,255,.84);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.um-stat.is-blue  { background: linear-gradient(180deg, rgba(37,93,155,.08),  rgba(255,255,255,.88)); }
.um-stat.is-green { background: linear-gradient(180deg, rgba(27,127,77,.08),   rgba(255,255,255,.88)); }
.um-stat.is-red   { background: linear-gradient(180deg, rgba(176,56,56,.08),   rgba(255,255,255,.88)); }
.um-stat.is-gold  { background: linear-gradient(180deg, rgba(138,105,18,.08),  rgba(255,255,255,.88)); }

.um-stat-value {
    margin: 10px 0 6px;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--txt);
}

.um-stat-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-mono);
}

.um-stat-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

/* Two-column layouts */
.um-layout {
    display: grid;
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.4fr);
    gap: 18px;
    align-items: start;
}

.ue-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .85fr);
    gap: 18px;
    align-items: start;
}

/* Cards */
.um-form-card,
.um-list-card,
.ue-form-card,
.ue-side-card,
.ue-info-card {
    border-radius: 24px;
}

.um-card-head,
.ue-card-head {
    padding: 18px 20px 0;
}

.um-card-title,
.ue-card-title {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.02em;
}

.ue-card-sub {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--tx2);
}

.um-form-body,
.ue-form-body {
    padding: 18px 20px 22px;
}

.um-form-footer,
.ue-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.um-field-help,
.ue-field-help {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

.um-checkbox-row,
.ue-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--bor);
    border-radius: 14px;
    background: var(--sur2);
    min-height: 44px;
    cursor: pointer;
    font-size: 13px;
    color: var(--tx2);
}

/* List head */
.um-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

/* Quick filter chips */
.um-qf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px 0;
}

.um-qf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--bor);
    background: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 700;
    color: var(--tx2);
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.um-qf-chip:hover {
    border-color: var(--blu);
    color: var(--blu);
    background: rgba(54,89,137,.06);
    text-decoration: none;
}

.um-qf-chip.active {
    background: var(--blu);
    border-color: var(--blu);
    color: #fff;
}

.um-qf-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(0,0,0,.10);
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.um-qf-chip.active .um-qf-count {
    background: rgba(255,255,255,.28);
}

/* Filter bar */
.um-filter-bar {
    padding: 14px 20px 0;
}

.um-filter-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.um-clear-link {
    font-size: 11px;
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
}

.um-clear-link:hover { text-decoration: underline; }

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

.um-ff { min-width: 0; }

.um-filter-meta {
    margin-top: 10px;
    font-size: 12px;
    color: var(--tx3);
    font-family: var(--font-mono);
}

/* Table */
.um-table-wrap {
    padding: 14px 18px 22px;
    overflow-x: auto;
}

.um-table th,
.um-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}

.um-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.um-user-name {
    font-weight: 700;
    color: var(--txt);
}

.um-user-meta {
    font-size: 12px;
    color: var(--tx3);
}

.um-cell-sub {
    font-size: 11px;
    color: var(--tx3);
}

.um-login-cell {
    white-space: nowrap;
    font-size: 13px;
    color: var(--tx2);
}

.um-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Edit side */
.ue-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ue-info-card {
    padding: 18px 20px 22px;
}

.ue-info-text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--tx2);
}

/* Responsive */
@media (max-width: 1200px) {
    .um-layout {
        grid-template-columns: 1fr;
    }
    .um-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1100px) {
    .ue-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .um-hero,
    .ue-hero {
        flex-direction: column;
        align-items: stretch;
    }
    .um-stats {
        grid-template-columns: 1fr;
    }
    .um-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== ROLE MANAGEMENT ========== */
.rm-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rm-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid var(--bor);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(37,93,155,.10), transparent 24%),
                radial-gradient(circle at bottom right, rgba(217,106,29,.10), transparent 22%),
                linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,238,.94));
    box-shadow: var(--shadow-md);
}

.rm-eyebrow,
.rm-card-label,
.rm-stat-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-mono);
}

.rm-title {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--txt);
}

.rm-subtitle {
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tx2);
}

.rm-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Stats */
.rm-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.rm-stat {
    background: rgba(255,255,255,.84);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.rm-stat.is-blue  { background: linear-gradient(180deg, rgba(37,93,155,.08),  rgba(255,255,255,.88)); }
.rm-stat.is-green { background: linear-gradient(180deg, rgba(27,127,77,.08),   rgba(255,255,255,.88)); }
.rm-stat.is-red   { background: linear-gradient(180deg, rgba(176,56,56,.08),   rgba(255,255,255,.88)); }
.rm-stat.is-gold  { background: linear-gradient(180deg, rgba(138,105,18,.08),  rgba(255,255,255,.88)); }

.rm-stat-value {
    margin: 10px 0 6px;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--txt);
}

.rm-stat-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

/* Layout */
.rm-layout {
    display: grid;
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: start;
}

.rm-form-card,
.rm-list-card {
    border-radius: 24px;
}

.rm-card-head {
    padding: 18px 20px 0;
}

.rm-card-title {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -.02em;
}

.rm-card-sub {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--tx2);
}

.rm-form-body {
    padding: 18px 20px 20px;
}

.rm-field-help {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx3);
}

.rm-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Yetki rehberi */
.rm-guide {
    border-top: 1px solid var(--bor);
    padding: 18px 0 20px;
}

.rm-guide-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
    padding: 0 20px;
}

.rm-guide-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 6px;
}

.rm-guide-item strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
}

.rm-guide-item span {
    font-size: 12px;
    line-height: 1.6;
    color: var(--tx2);
}

.rm-guide-item.is-superadmin { background: rgba(176,56,56,.06);  border: 1px solid rgba(176,56,56,.12); }
.rm-guide-item.is-admin      { background: rgba(37,93,155,.06);  border: 1px solid rgba(37,93,155,.12); }
.rm-guide-item.is-sef        { background: rgba(138,105,18,.06); border: 1px solid rgba(138,105,18,.12); }
.rm-guide-item.is-personel   { background: rgba(27,127,77,.06);  border: 1px solid rgba(27,127,77,.12); }

/* List head */
.rm-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

/* Role cards grid */
.rm-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px 18px 22px;
}

.rm-role-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--bor);
    border-radius: 20px;
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .15s;
}

.rm-role-card:hover {
    box-shadow: var(--shadow-sm);
}

.rm-role-card.is-passive {
    opacity: .65;
}

.rm-role-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rm-role-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.rm-av-superadmin { background: var(--red); }
.rm-av-admin      { background: var(--blu); }
.rm-av-sef        { background: #8a6912; }
.rm-av-personel   { background: var(--grn); }

.rm-role-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.rm-role-body strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.3;
}

.rm-role-base {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--sur2);
    border: 1px solid var(--bor);
    font-size: 10px;
    font-weight: 800;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-mono);
    width: fit-content;
}

.rm-system-tag {
    font-size: 11px;
    color: var(--tx3);
}

.rm-role-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rm-locked-tag {
    font-size: 11px;
    color: var(--tx3);
}

/* Responsive */
@media (max-width: 1100px) {
    .rm-layout {
        grid-template-columns: 1fr;
    }
    .rm-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .rm-hero {
        flex-direction: column;
        align-items: stretch;
    }
    .rm-stats {
        grid-template-columns: 1fr;
    }
    .rm-role-grid {
        grid-template-columns: 1fr;
    }
}