/* ui-cards.css
   Dark dashboard card system inspired by modern UI kit "cards library" aesthetics.
   Works well in Razor / Blazor components as reusable utility classes.
*/

:root{
    /* ===== Base ===== */
    --bg: #0b0f14;
    --surface: #0f1621;
    --surface-2: #121c2a;
    --surface-3: #0c121b;
    --text: #e7edf6;
    --muted: #9fb0c6;
    --faint: rgba(231,237,246,.08);
    --border: rgba(231,237,246,.10);

    /* ===== Accent palette (tweak as needed) ===== */
    --blue:   #3aa0ff;
    --cyan:   #3ce6ff;
    --green:  #4ee29c;
    --lime:   #b7ff6a;
    --yellow: #ffc857;
    --orange: #ff8a4c;
    --red:    #ff4d6d;
    --pink:   #ff5ad9;
    --purple: #8b5cff;

    /* ===== Layout / shape ===== */
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;

    /* ===== Shadow / glow ===== */
    --shadow-1: 0 14px 45px rgba(0,0,0,.55);
    --shadow-2: 0 10px 28px rgba(0,0,0,.45);
    --inner: inset 0 1px 0 rgba(255,255,255,.04);

    /* ===== Typography ===== */
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* ===== Motion ===== */
    --ease: cubic-bezier(.2,.8,.2,1);
    --fast: 140ms;
    --med: 220ms;
}

/* Page baseline (optional) */
.ui-dark{
    background: radial-gradient(1200px 800px at 15% 10%, rgba(58,160,255,.12), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, rgba(139,92,255,.10), transparent 55%),
    radial-gradient(700px 500px at 85% 80%, rgba(78,226,156,.08), transparent 55%),
    var(--bg);
    color: var(--text);
    font-family: var(--font), serif;
}

/* ----------------------------
   Grid helpers
-----------------------------*/
.ui-grid{
    display:grid;
    gap: 18px;
}
.ui-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ui-grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.ui-grid.cols-6{ grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1100px){
    .ui-grid.cols-4, .ui-grid.cols-6{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
    .ui-grid.cols-3, .ui-grid.cols-4, .ui-grid.cols-6{ grid-template-columns: 1fr; }
}

/* ----------------------------
   Card base
-----------------------------*/
.card{
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
    linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18)),
    var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    min-height: 120px;
    transition: transform var(--med) var(--ease),
    box-shadow var(--med) var(--ease),
    border-color var(--med) var(--ease);
}
.card::before{
    /* subtle top sheen */
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(800px 200px at 30% 0%, rgba(255,255,255,.06), transparent 45%);
    pointer-events:none;
}
.card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
    border-color: rgba(231,237,246,.18);
}

.card.pad{ padding: 18px 18px; }
.card.pad-lg{ padding: 22px 22px; }

.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.card-title{
    font-size: 14px;
    letter-spacing: .2px;
    color: var(--text);
    opacity:.92;
    font-weight: 650;
}
.card-subtitle{
    font-size: 12px;
    color: var(--muted);
    opacity:.95;
}
.card-body{
    position:relative;
    z-index: 1;
}
.card-footer{
    margin-top: 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
}

.card-muted{ background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--surface-3); }
.card-elevated{ box-shadow: var(--shadow-1); }
.card-tight{ min-height: 0; }
.card-divider{
    height: 1px;
    background: var(--faint);
    margin: 12px 0;
}

/* Accent border/glow variants */
.card.accent-blue{  box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(58,160,255,.22); }
.card.accent-cyan{  box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(60,230,255,.20); }
.card.accent-green{ box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(78,226,156,.20); }
.card.accent-purple{box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,255,.20); }
.card.accent-orange{box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(255,138,76,.18); }

.card-glow-blue::after,
.card-glow-purple::after,
.card-glow-green::after{
    content:"";
    position:absolute;
    inset:-60px;
    filter: blur(40px);
    opacity:.22;
    pointer-events:none;
}
.card-glow-blue::after{ background: radial-gradient(circle at 35% 20%, rgba(58,160,255,.7), transparent 55%); }
.card-glow-purple::after{ background: radial-gradient(circle at 70% 20%, rgba(139,92,255,.65), transparent 55%); }
.card-glow-green::after{ background: radial-gradient(circle at 65% 70%, rgba(78,226,156,.55), transparent 55%); }


/* ========= UI MODAL ========= */

.ui-modal-backdrop{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 160ms cubic-bezier(.2,.8,.2,1);
}

.ui-modal-backdrop.show{ opacity: 1; }

.ui-modal{
    width: min(980px, 96vw);
    max-height: 88vh;
    /*overflow: hidden;*/
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);

    background:
            radial-gradient(900px 240px at 25% 0%, rgba(255,255,255,.10), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%),
            rgba(12,16,24,.96);

    box-shadow:
            0 36px 120px rgba(0,0,0,.80),
            inset 0 1px 0 rgba(255,255,255,.06);

    transform: translateY(10px) scale(.985);
    /*opacity: 0;*/
    transition: transform 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.ui-modal-backdrop.show .ui-modal{
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Sizes */
.ui-modal-sm{ width: min(520px, 96vw); }
.ui-modal-md{ width: min(720px, 96vw); }
.ui-modal-lg{ width: min(980px, 96vw); }
.ui-modal-xl{ width: min(1200px, 96vw); }

.ui-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 16px;
    padding: 18px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ui-modal-heading{ display:flex; flex-direction:column; gap: 4px; }

.ui-modal-title{
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: rgba(235,240,248,.96);
}

.ui-modal-subtitle{
    font-size: 12px;
    color: rgba(166,184,208,.92);
}

.ui-modal-x{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(235,240,248,.92);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition: transform 140ms cubic-bezier(.2,.8,.2,1), background 140ms;
}
.ui-modal-x:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.ui-modal-body{
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.ui-modal-body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.ui-modal-body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.ui-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    padding: 12px 18px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Make modal cards look tighter */
.ui-modal .card{
    border-radius: 18px;
}


/* ----------------------------
   Stat blocks (big number + label)
-----------------------------*/
.stat{
    display:flex;
    flex-direction:column;
    gap: 6px;
}
.stat-value{
    font-size: 34px;
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: -0.6px;
}
.stat-label{
    font-size: 12px;
    color: var(--muted);
}
.stat-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
}
.kpi{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%), var(--surface-2);
    box-shadow: var(--inner);
}
.kpi .dot{
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(58,160,255,.12);
}
.kpi .meta{
    display:flex;
    flex-direction:column;
    gap: 2px;
}
.kpi .meta .top{ font-size: 12px; color: var(--muted); }
.kpi .meta .bottom{ font-size: 13px; font-weight: 650; color: var(--text); }

/* ----------------------------
   Badges / pills / chips
-----------------------------*/
.badge{
    display:inline-flex;
    max-width: 80px;
    align-items:center;
    gap: 8px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--text);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    box-shadow: var(--inner);
    user-select:none;
}
.badge .mini-dot{
    width: 6px; height: 6px; border-radius:999px;
    background: var(--muted);
    opacity:.9;
}
.badge.blue{   border-color: rgba(58,160,255,.28); background: rgba(58,160,255,.12); }
.badge.cyan{   border-color: rgba(60,230,255,.22); background: rgba(60,230,255,.10); }
.badge.green{  border-color: rgba(78,226,156,.22); background: rgba(78,226,156,.10); }
.badge.yellow{ border-color: rgba(255,200,87,.22); background: rgba(255,200,87,.10); }
.badge.orange{ border-color: rgba(255,138,76,.22); background: rgba(255,138,76,.10); }
.badge.red{    border-color: rgba(255,77,109,.22); background: rgba(255,77,109,.10); }
.badge.pink{   border-color: rgba(255,90,217,.22); background: rgba(255,90,217,.10); }
.badge.purple{ border-color: rgba(139,92,255,.22); background: rgba(139,92,255,.10); }

/* ----------------------------
   Buttons (matches the kit vibe)
-----------------------------*/
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 65%), var(--surface-2);
    color: var(--text);
    font-weight: 650;
    font-size: 13px;
    cursor:pointer;
    transition: transform var(--fast) var(--ease),
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
    box-shadow: var(--inner);
    text-decoration:none;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(231,237,246,.18); }
.btn:active{ transform: translateY(0px); opacity:.95; }

.btn-primary{
    border-color: rgba(58,160,255,.35);
    background: linear-gradient(180deg, rgba(58,160,255,.35), rgba(58,160,255,.10));
    box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(58,160,255,.18);
}
.btn-danger{
    border-color: rgba(255,77,109,.35);
    background: linear-gradient(180deg, rgba(255,77,109,.30), rgba(255,77,109,.10));
}
.btn-ghost{
    background: transparent;
    border-color: transparent;
}
.btn-ghost:hover{
    background: rgba(255,255,255,.04);
    border-color: rgba(231,237,246,.10);
}

/* ----------------------------
   Inputs / form rows
-----------------------------*/
.field{
    display:flex;
    flex-direction:column;
    gap: 8px;
}
.label{
    font-size: 12px;
    color: var(--muted);
}
.input, .select, .textarea{
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 70%), var(--surface-2);
    color: var(--text);
    padding: 10px 12px;
    outline: none;
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
    box-shadow: var(--inner);
}
.textarea{ min-height: 90px; resize: vertical; }
.input::placeholder, .textarea::placeholder{ color: rgba(159,176,198,.65); }

.input:focus, .select:focus, .textarea:focus{
    border-color: rgba(58,160,255,.45);
    box-shadow: 0 0 0 3px rgba(58,160,255,.14), var(--inner);
}

/* Inline form row */
.form-row{
    display:flex;
    gap: 12px;
    align-items:center;
}
.form-row > *{ flex:1; }

/* ----------------------------
   Tiny chart placeholders (optional)
   Useful if you want quick “chart panel” styling
-----------------------------*/
.chart{
    height: 120px;
    border-radius: var(--radius-lg);
    background:
            linear-gradient(180deg, rgba(255,255,255,.03), transparent 65%),
            repeating-linear-gradient(
                    90deg,
                    rgba(231,237,246,.05) 0px,
                    rgba(231,237,246,.05) 1px,
                    transparent 1px,
                    transparent 22px
            ),
            repeating-linear-gradient(
                    0deg,
                    rgba(231,237,246,.04) 0px,
                    rgba(231,237,246,.04) 1px,
                    transparent 1px,
                    transparent 22px
            ),
            var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--inner);
    overflow:hidden;
    position:relative;
}
.chart .line{
    position:absolute;
    inset: 10px 12px 16px 12px;
    border-radius: 12px;
    background: radial-gradient(circle at 20% 60%, rgba(58,160,255,.55), transparent 55%),
    radial-gradient(circle at 70% 45%, rgba(139,92,255,.45), transparent 55%),
    radial-gradient(circle at 55% 80%, rgba(78,226,156,.35), transparent 55%);
    opacity:.75;
    filter: blur(0px);
}

/* ----------------------------
   Progress + separators
-----------------------------*/
.progress{
    height: 10px;
    border-radius: 999px;
    background: rgba(231,237,246,.07);
    border: 1px solid rgba(231,237,246,.08);
    overflow:hidden;
}
.progress > span{
    display:block;
    height: 100%;
    width: 50%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(58,160,255,.95), rgba(60,230,255,.85));
    box-shadow: 0 0 0 1px rgba(58,160,255,.25);
}

/* ----------------------------
   Utility helpers
-----------------------------*/
.muted{ color: var(--muted); }
.mono{
    font-family: var(--mono), serif; }
.row{ display:flex; align-items:center; gap: 10px; }
.between{ justify-content:space-between; }
.right{ margin-left:auto; }
.mt-1{ margin-top: 6px; }
.mt-2{ margin-top: 12px; }
.mt-3{ margin-top: 18px; }
.p-0{ padding:0; }
.center{ display:flex; align-items:center; justify-content:center; }
.round{ border-radius: 999px; }

/* ----------------------------
   Command table
-----------------------------*/
.command-table{
    display:flex;
    flex-direction:column;
    gap: 6px;
    margin-top: 10px;
}

.command-header,
.command-row{
    display:grid;
    grid-template-columns: 1.4fr 1fr .7fr 2fr auto;
    gap: 12px;
    align-items:center;
    padding: 10px 12px;
    border-radius: 12px;
}

.command-header{
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--faint);
}

.command-row{
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--inner);
}

.command-row:hover{
    border-color: rgba(58,160,255,.25);
    background: rgba(58,160,255,.06);
}

/* device card clicking helper */
.device-card{
    cursor: pointer;
}
.device-card:hover{
    transform: translateY(-3px);
}

/* command table */
.command-table{
    display:flex;
    flex-direction:column;
    gap: 8px;
    margin-top: 12px;
}

.command-header,
.command-row{
    display:grid;
    grid-template-columns: 1.4fr 1fr .7fr 2fr auto;
    gap: 12px;
    align-items:center;
    padding: 12px 12px;
    border-radius: 14px;
}

.command-header{
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--faint);
    padding-bottom: 10px;
    border-radius: 0;
}

.command-row{
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--inner);
}

.command-row:hover{
    border-color: rgba(58,160,255,.25);
    background: rgba(58,160,255,.06);
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px){
    .command-header{ display:none; }
    .command-row{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .command-row > *{ justify-self:start; }
}

/* ===== Dashboard layout polish ===== */
.ui-dashboard{
    max-width: 1180px;
    margin: 42px auto 80px;
    padding: 0 18px;
}

.ui-section-title{
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    text-align: center;
    margin: 10px 0 18px;
    color: rgba(231,237,246,.95);
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.ui-grid-cards{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px){
    .ui-grid-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
    .ui-grid-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
    .ui-grid-cards{ grid-template-columns: 1fr; }
}

/* ===== Make the cards "tile-y" and punchy ===== */
.device-tile{
    min-height: 140px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background:
            radial-gradient(900px 240px at 25% 0%, rgba(255,255,255,.08), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%),
            rgba(15,22,33,.96);
    box-shadow:
            0 18px 60px rgba(0,0,0,.65),
            inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1),
    box-shadow 180ms cubic-bezier(.2,.8,.2,1),
    border-color 180ms cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
}

.device-tile:hover{
    transform: translateY(-4px);
    box-shadow:
            0 26px 80px rgba(0,0,0,.72),
            0 0 0 1px rgba(58,160,255,.18),
            inset 0 1px 0 rgba(255,255,255,.08);
    border-color: rgba(231,237,246,.18);
}

/* ===== Better internal spacing / typography ===== */
.tile-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
}

.tile-label{
    font-size: 12px;
    color: rgba(159,176,198,.95);
    letter-spacing: .2px;
}

.tile-value{
    display:flex;
    align-items:center;
    gap: 10px;
}

/* ===== Stronger glow variants (your previous glow was too timid) ===== */
.card-glow-green::after,
.card-glow-purple::after,
.card-glow-blue::after,
.card-glow-orange::after{
    content:"";
    position:absolute;
    inset:-70px;
    pointer-events:none;
    filter: blur(45px);
    opacity:.32;              /* <-- stronger */
}

.card-glow-green::after{
    background: radial-gradient(circle at 80% 20%, rgba(78,226,156,.75), transparent 55%);
}
.card-glow-purple::after{
    background: radial-gradient(circle at 80% 20%, rgba(139,92,255,.75), transparent 55%);
}
.card-glow-blue::after{
    background: radial-gradient(circle at 80% 20%, rgba(58,160,255,.75), transparent 55%);
}
.card-glow-orange::after{
    background: radial-gradient(circle at 80% 20%, rgba(255,138,76,.75), transparent 55%);
}

.ui-modal{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0,0,0,.70);
}

.modal-card{
    border-radius: 18px;
}


/* ===== CORE LAYOUT (make sure grid is actually grid) ===== */
.ui-dashboard{
    max-width: 1200px;
    margin: 36px auto 80px;
    padding: 0 18px;
}

.ui-section-title{
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
    text-align: center;
    margin: 12px 0 18px;
    color: rgba(235,240,248,.96);
    text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* This MUST exist; if it doesn't, everything stacks */
.ui-grid{
    display: grid;
    gap: 18px;
}

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

@media (max-width: 1100px){
    .ui-grid-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
    .ui-grid-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
    .ui-grid-cards{ grid-template-columns: 1fr; }
}

/* ===== DEVICE TILES (stronger contrast + hover) ===== */
.device-tile{
    position: relative;
    min-height: 140px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background:
            radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.10), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%),
            rgba(12,16,24,.96);
    box-shadow:
            0 20px 70px rgba(0,0,0,.70),
            inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms cubic-bezier(.2,.8,.2,1),
    border-color 160ms cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
    overflow: hidden;
}

.device-tile:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.18);
    box-shadow:
            0 30px 90px rgba(0,0,0,.76),
            0 0 0 1px rgba(58,160,255,.18),
            inset 0 1px 0 rgba(255,255,255,.08);
}

.tile-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-top: 8px;
}

.tile-label{
    font-size: 12px;
    color: rgba(166,184,208,.95);
    letter-spacing: .2px;
}

/* ===== COMMANDS LIST (doesn't collapse / wraps nicely) ===== */
.cmd-list{
    display:flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.cmd-head{
    display:grid;
    grid-template-columns: 1.3fr .9fr .6fr 2fr auto;
    gap: 12px;
    align-items:center;
    color: rgba(166,184,208,.92);
    font-size: 12px;
    padding: 8px 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.cmd-row{
    display:grid;
    grid-template-columns: 1.3fr .9fr .6fr 2fr auto;
    gap: 12px;
    align-items:center;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background:
            linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%),
            rgba(15,22,33,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.cmd-row:hover{
    border-color: rgba(58,160,255,.22);
    background: rgba(58,160,255,.06);
}

.cmd-name{
    font-weight: 700;
    color: rgba(235,240,248,.96);
}

.cmd-desc{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px){
    .cmd-head{ display:none; }
    .cmd-row{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cmd-desc{ white-space: normal; }
}

/* ===== STRONGER GLOWS (visible even on dark bg) ===== */
.card-glow-green::after,
.card-glow-orange::after{
    content:"";
    position:absolute;
    inset:-70px;
    pointer-events:none;
    filter: blur(44px);
    opacity: .40;
}

.card-glow-green::after{
    background: radial-gradient(circle at 85% 10%, rgba(78,226,156,.85), transparent 58%);
}
.card-glow-orange::after{
    background: radial-gradient(circle at 85% 10%, rgba(255,138,76,.85), transparent 58%);
}