/* ==========================================================================
   USER SUBMISSIONS v3 — full cinematic rebuild (2026-05-29)
   Reuses .gx-ribbon + global mobile rules from site-refresh.css.
   ========================================================================== */

body.user-submissions-page{
	background:
		radial-gradient(1100px 700px at 12% -8%, rgba(52,211,153,.16), transparent 62%),
		radial-gradient(1000px 700px at 110% 8%, rgba(56,189,248,.14), transparent 60%),
		radial-gradient(900px 600px at 50% 110%, rgba(139,92,246,.10), transparent 65%),
		#05070d;
	color:#e6efff; min-height:100vh;
}
body.user-submissions-page main.main-content{ padding:1.1rem clamp(1rem,1.6vw,2.6rem) 2.4rem; }

/* ----- Ribbon stat tiles --------------------------------------------- */
.us-stat-grid{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:.9rem;
	margin-top:1.1rem;
}
.us-stat{
	position:relative; padding:.95rem 1.05rem .9rem; border-radius:18px;
	background:linear-gradient(160deg, rgba(20,30,52,.7), rgba(9,15,28,.65));
	border:1px solid rgba(148,175,215,.18);
	overflow:hidden; isolation:isolate;
	transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.us-stat::after{
	content:""; position:absolute; inset:auto -30% -50% auto; width:200px; height:200px; border-radius:50%;
	background:radial-gradient(circle, rgba(52,211,153,.22), transparent 65%);
	filter:blur(28px); opacity:.55; transition:opacity .25s ease;
}
.us-stat[data-tone="cyan"]::after{ background:radial-gradient(circle, rgba(56,189,248,.24), transparent 65%); }
.us-stat[data-tone="violet"]::after{ background:radial-gradient(circle, rgba(139,92,246,.24), transparent 65%); }
.us-stat[data-tone="amber"]::after{ background:radial-gradient(circle, rgba(251,191,36,.24), transparent 65%); }
.us-stat[data-tone="magenta"]::after{ background:radial-gradient(circle, rgba(244,114,182,.22), transparent 65%); }
.us-stat:hover{ transform:translateY(-3px); border-color:rgba(125,211,252,.4); box-shadow:0 18px 36px -22px rgba(52,211,153,.4); }
.us-stat:hover::after{ opacity:.85; }
.us-stat__label{ display:flex; align-items:center; gap:.4rem; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(186,230,253,.72); font-weight:700; }
.us-stat__label .material-icons-round{ font-size:14px; color:#6ee7b7; }
.us-stat[data-tone="cyan"] .us-stat__label .material-icons-round{ color:#7dd3fc; }
.us-stat[data-tone="violet"] .us-stat__label .material-icons-round{ color:#c4b5fd; }
.us-stat[data-tone="amber"] .us-stat__label .material-icons-round{ color:#fcd34d; }
.us-stat[data-tone="magenta"] .us-stat__label .material-icons-round{ color:#f9a8d4; }
.us-stat__value{ display:block; font-family:"Roboto Slab","Roboto",Georgia,serif; font-size:1.55rem; font-weight:800; color:#f8fbff; line-height:1.1; margin-top:.3rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.us-stat__hint{ display:block; font-size:.66rem; color:rgba(186,230,253,.55); margin-top:.25rem; letter-spacing:.04em; }

/* ----- Section shell -------------------------------------------------- */
.us-section{
	position:relative; isolation:isolate;
	background:linear-gradient(160deg, rgba(15,23,42,0.78), rgba(7,12,24,0.78));
	border:1px solid rgba(148,175,215,0.16);
	border-radius:24px;
	padding:clamp(1.2rem, 1.2vw + .8rem, 2.2rem) clamp(1.1rem, 1.2vw + .7rem, 2.2rem);
	margin-bottom:clamp(1.2rem, 1vw + .5rem, 1.8rem);
	box-shadow:0 26px 60px -36px rgba(2,6,23,.92), inset 0 1px 0 rgba(255,255,255,.04);
	overflow:hidden;
}
.us-section::before{
	content:""; position:absolute; inset:-30% -20% auto auto; width:480px; height:480px; z-index:-1;
	background:radial-gradient(circle at 50% 50%, rgba(52,211,153,.16), transparent 60%);
	filter:blur(60px); pointer-events:none;
}
.us-section__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.us-section__title{ display:flex; align-items:center; gap:.7rem; margin:0; font-family:"Roboto Slab","Roboto",Georgia,serif; font-size:1.25rem; font-weight:700; color:#f5f9ff; letter-spacing:-.01em; }
.us-section__title::before{
	content:""; width:10px; height:10px; border-radius:50%;
	background:linear-gradient(135deg,#34d399,#22d3ee);
	box-shadow:0 0 14px rgba(52,211,153,.85);
	animation:us-dot 2.4s ease-in-out infinite;
}
@keyframes us-dot{ 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.3); opacity:.65;} }
@media (prefers-reduced-motion: reduce){ .us-section__title::before{ animation:none; } }
.us-section__sub{ margin:0; color:rgba(186,230,253,.62); font-size:.86rem; }

/* ----- Cinematic tabs ------------------------------------------------ */
body.user-submissions-page .nav.nav-tabs{
	display:inline-flex; gap:.4rem; padding:.3rem; border:0;
	background:rgba(7,12,24,.55); border-radius:14px;
	border:1px solid rgba(125,211,252,.16); margin-bottom:0;
}
body.user-submissions-page .nav.nav-tabs .nav-item{ margin:0; }
body.user-submissions-page .nav.nav-tabs .nav-link{
	border:0 !important; background:transparent !important;
	color:rgba(186,230,253,.72) !important;
	padding:.55rem 1.1rem !important; border-radius:10px !important;
	font-size:.84rem !important; font-weight:600; letter-spacing:.02em;
	transition:all .2s ease;
}
body.user-submissions-page .nav.nav-tabs .nav-link:hover{
	background:rgba(56,189,248,.1) !important; color:#fff !important;
}
body.user-submissions-page .nav.nav-tabs .nav-link.active{
	background:linear-gradient(135deg,rgba(52,211,153,.4),rgba(34,211,238,.4)) !important;
	color:#fff !important;
	box-shadow:0 8px 22px -10px rgba(52,211,153,.55);
}

/* Tab content panel */
body.user-submissions-page .tab-content{
	background:rgba(7,12,24,.55);
	border:1px solid rgba(125,211,252,.16);
	border-radius:0 18px 18px 18px;
	padding:1rem; margin-top:-1px;
}

/* ----- Toolbar (filters + merge) -------------------------------------- */
.us-toolbar{
	display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
	padding:.85rem 1rem; margin-bottom:1.1rem; border-radius:16px;
	border:1px solid rgba(148,175,215,.14);
	background:linear-gradient(120deg, rgba(15,23,42,.7), rgba(10,16,30,.68));
}
body.user-submissions-page .us-toolbar .form-control,
body.user-submissions-page .us-toolbar .form-select,
body.user-submissions-page .us-toolbar input,
body.user-submissions-page .us-toolbar select{
	background:rgba(7,12,24,.7) !important;
	color:#e6efff !important;
	border:1px solid rgba(125,211,252,.2) !important;
	border-radius:11px !important;
	font-size:.82rem;
	min-height:38px;
	min-width:140px;
}
body.user-submissions-page .us-toolbar .form-control:focus,
body.user-submissions-page .us-toolbar .form-select:focus{
	border-color:rgba(125,211,252,.55) !important;
	box-shadow:0 0 0 3px rgba(56,189,248,.16) !important;
	outline:none;
}
body.user-submissions-page .us-toolbar .form-check-input{
	background-color:rgba(7,12,24,.7);
	border-color:rgba(125,211,252,.35);
}
body.user-submissions-page .us-toolbar .form-check-input:checked{
	background-color:#34d399; border-color:#34d399;
}
body.user-submissions-page .us-toolbar .form-check-label{
	color:rgba(186,230,253,.78); font-weight:500;
}

/* ----- Action bar: Merge / Test card details ------------------------- */
.us-action-bar{
	display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem;
}
body.user-submissions-page .us-action-bar .btn,
body.user-submissions-page #mergeSubmissions,
body.user-submissions-page #openTestCardDetails{
	background:linear-gradient(135deg,#34d399,#22d3ee) !important;
	color:#022c22 !important; border:0 !important;
	border-radius:11px !important;
	padding:.6rem 1.1rem !important;
	font-weight:700 !important; font-size:.82rem !important; letter-spacing:.02em;
	box-shadow:0 12px 26px -14px rgba(52,211,153,.55);
	transition:all .2s ease;
}
body.user-submissions-page #mergeSubmissions:hover,
body.user-submissions-page #openTestCardDetails:hover,
body.user-submissions-page .us-action-bar .btn:hover{
	transform:translateY(-1px);
	box-shadow:0 16px 32px -16px rgba(56,189,248,.6);
}
body.user-submissions-page #openTestCardDetails{
	background:rgba(56,189,248,.16) !important;
	color:#bae6fd !important;
	border:1px solid rgba(125,211,252,.4) !important;
	box-shadow:none !important;
}

/* ----- Submissions table — cinematic ---------------------------------- */
body.user-submissions-page table.submissions-table{
	width:100%; margin-bottom:0; color:#dbe6ff;
	border-collapse:separate; border-spacing:0;
	background:transparent;
}
body.user-submissions-page table.submissions-table thead th{
	background:linear-gradient(120deg, rgba(15,23,42,.95), rgba(10,16,30,.95));
	color:#bde0ff;
	font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
	border:0 !important; padding:.95rem .85rem !important;
	border-bottom:1px solid rgba(125,211,252,.2) !important;
	position:sticky; top:0; z-index:2;
}
body.user-submissions-page table.submissions-table tbody td{
	border:0; border-bottom:1px solid rgba(148,175,215,.07);
	padding:.8rem .85rem; font-size:.86rem; color:#dbe6ff;
	background:transparent; vertical-align:middle;
}
body.user-submissions-page table.submissions-table tbody tr{ transition:background .18s ease; }
body.user-submissions-page table.submissions-table tbody tr:hover{
	background:linear-gradient(120deg, rgba(56,189,248,.06), rgba(52,211,153,.06));
}
body.user-submissions-page table.submissions-table tbody tr:hover td{ color:#fff; }
body.user-submissions-page table.submissions-table tbody td button.btn-sm,
body.user-submissions-page table.submissions-table tbody td .btn{
	padding:.34rem .65rem !important; font-size:.7rem !important; border-radius:9px !important; font-weight:600 !important;
}

/* Status badges within the rows */
body.user-submissions-page table.submissions-table tbody .badge,
body.user-submissions-page table.submissions-table tbody td .badge{
	display:inline-flex; align-items:center; padding:.3rem .6rem !important; border-radius:999px !important;
	font-size:.62rem !important; font-weight:700 !important; letter-spacing:.12em; text-transform:uppercase;
	border:1px solid transparent;
}
/* Tonal badge colors mapped from typical Bootstrap classes the JS still uses */
body.user-submissions-page table.submissions-table tbody .badge.bg-success,
body.user-submissions-page table.submissions-table tbody .badge.bg-info{
	background:rgba(52,211,153,.18) !important; color:#86efac !important; border-color:rgba(52,211,153,.32);
}
body.user-submissions-page table.submissions-table tbody .badge.bg-warning{
	background:rgba(251,191,36,.18) !important; color:#fde68a !important; border-color:rgba(251,191,36,.32);
}
body.user-submissions-page table.submissions-table tbody .badge.bg-secondary,
body.user-submissions-page table.submissions-table tbody .badge.bg-dark{
	background:rgba(125,211,252,.14) !important; color:#bae6fd !important; border-color:rgba(125,211,252,.3);
}
body.user-submissions-page table.submissions-table tbody .badge.bg-danger{
	background:rgba(244,114,128,.22) !important; color:#fda4af !important; border-color:rgba(244,114,128,.32);
}
body.user-submissions-page table.submissions-table tbody .badge.bg-primary{
	background:rgba(56,189,248,.18) !important; color:#7dd3fc !important; border-color:rgba(125,211,252,.32);
}

/* Checkbox styling for rows */
body.user-submissions-page table.submissions-table tbody input[type="checkbox"],
body.user-submissions-page table.submissions-table tbody .form-check-input{
	width:18px; height:18px; cursor:pointer;
	background-color:rgba(7,12,24,.7) !important;
	border:1px solid rgba(125,211,252,.4) !important;
	border-radius:5px !important;
}
body.user-submissions-page table.submissions-table tbody input[type="checkbox"]:checked,
body.user-submissions-page table.submissions-table tbody .form-check-input:checked{
	background:linear-gradient(135deg,#34d399,#22d3ee) !important;
	border-color:transparent !important;
}

/* Empty state row */
body.user-submissions-page .loading-row td,
body.user-submissions-page table.submissions-table tbody td.empty-state{
	text-align:center; color:rgba(186,230,253,.55); font-style:italic; padding:2rem;
}

/* Pagination bar */
.us-pagination{
	display:flex; justify-content:space-between; align-items:center;
	gap:1rem; flex-wrap:wrap; padding:.85rem 1rem; margin-top:1rem;
	border-radius:14px; background:rgba(7,12,24,.55);
	border:1px solid rgba(125,211,252,.14);
}
body.user-submissions-page .us-pagination .btn,
body.user-submissions-page #paginationBar .btn{
	background:rgba(7,12,24,.6) !important;
	border:1px solid rgba(125,211,252,.28) !important;
	color:#cfe9ff !important; border-radius:10px !important;
	font-size:.78rem !important; padding:.45rem .85rem !important;
}
body.user-submissions-page .us-pagination .btn:hover,
body.user-submissions-page #paginationBar .btn:hover{
	background:rgba(56,189,248,.18) !important;
	border-color:rgba(125,211,252,.5) !important;
}
body.user-submissions-page #paginationBar #pageStats{
	color:rgba(186,230,253,.62); font-size:.78rem;
}

/* ----- Card overrides for prefs + Alt session ----------------------- */
body.user-submissions-page #gradingNotifyPrefs.card,
body.user-submissions-page #altSessionCard.card{
	background:linear-gradient(160deg, rgba(15,23,42,0.78), rgba(7,12,24,0.78)) !important;
	border:1px solid rgba(125,211,252,.18) !important;
	border-radius:18px !important;
	color:#dbe6ff;
}
body.user-submissions-page #gradingNotifyPrefs h6,
body.user-submissions-page #altSessionCard h6{
	color:#f5f9ff !important; font-family:"Roboto Slab","Roboto",Georgia,serif;
}
body.user-submissions-page #gradingNotifyPrefs .form-control,
body.user-submissions-page #gradingNotifyPrefs .form-check-input,
body.user-submissions-page #altSessionCard .form-control{
	background:rgba(7,12,24,.7) !important; color:#e6efff !important;
	border:1px solid rgba(125,211,252,.22) !important;
	border-radius:11px !important;
}
body.user-submissions-page #gradingNotifyPrefs .form-check-input:checked,
body.user-submissions-page #altSessionCard .form-check-input:checked{
	background:linear-gradient(135deg,#34d399,#22d3ee) !important;
}
body.user-submissions-page #gradingNotifyPrefs .btn-primary,
body.user-submissions-page #altSessionCard .btn-primary,
body.user-submissions-page #saveNotifyPrefsBtn,
body.user-submissions-page #requestAltCodeBtn{
	background:linear-gradient(135deg,#34d399,#22d3ee) !important;
	color:#022c22 !important; border:0 !important;
	border-radius:11px !important; font-weight:700;
}

/* ----- Modal polish — dark glass body ------------------------------- */
body.user-submissions-page .modal-content{
	background:linear-gradient(160deg, rgba(15,23,42,.96), rgba(7,12,24,.96)) !important;
	border:1px solid rgba(125,211,252,.28) !important;
	border-radius:22px !important;
	box-shadow:0 40px 80px -30px rgba(2,6,23,.95);
	color:#e6efff;
}
body.user-submissions-page .modal-header{
	border:0 !important; padding:1.2rem 1.4rem .8rem !important;
}
body.user-submissions-page .modal-header .modal-title{
	font-family:"Roboto Slab","Roboto",Georgia,serif; font-weight:700; font-size:1.15rem;
	background:linear-gradient(110deg,#e0f2fe 0%, #93c5fd 30%, #c4b5fd 60%, #f0abfc 100%);
	background-clip:text; -webkit-background-clip:text; color:transparent;
}
body.user-submissions-page .modal-footer{ border:0 !important; padding:1rem 1.4rem 1.2rem !important; }
body.user-submissions-page .modal-body{ padding:.6rem 1.4rem 1.4rem !important; }
body.user-submissions-page .modal-content .form-control,
body.user-submissions-page .modal-content .form-select,
body.user-submissions-page .modal-content input,
body.user-submissions-page .modal-content textarea,
body.user-submissions-page .modal-content select{
	background:rgba(7,12,24,.85) !important; color:#e6efff !important;
	border:1px solid rgba(125,211,252,.22) !important;
	border-radius:11px !important; min-height:42px;
}
body.user-submissions-page .modal-content .btn-close{ filter:invert(.85) hue-rotate(170deg) brightness(1.4); opacity:.85; }
body.user-submissions-page .modal-content .btn-primary{
	background:linear-gradient(135deg,#34d399,#22d3ee) !important;
	color:#022c22 !important; border:0 !important;
	border-radius:11px !important; font-weight:700;
	box-shadow:0 12px 26px -14px rgba(52,211,153,.55);
}
body.user-submissions-page .modal-content .btn-secondary{
	background:rgba(7,12,24,.55) !important;
	border:1px solid rgba(125,211,252,.28) !important;
	color:#cfe9ff !important; border-radius:11px;
}
body.user-submissions-page .modal-content table{ color:#dbe6ff; }
body.user-submissions-page .modal-content table.table-light thead,
body.user-submissions-page .modal-content .table-light{
	background:rgba(15,23,42,.95) !important; color:#bde0ff !important;
}
body.user-submissions-page .modal-content .card{
	background:linear-gradient(160deg, rgba(20,30,52,.6), rgba(9,15,28,.6)) !important;
	border:1px solid rgba(125,211,252,.18) !important;
	border-radius:14px !important;
}
body.user-submissions-page .modal-content .card .text-xs.text-uppercase.text-muted{
	color:rgba(186,230,253,.6) !important;
}
body.user-submissions-page .modal-content .card .h6{ color:#f5f9ff !important; font-family:"Roboto Slab","Roboto",Georgia,serif; }
body.user-submissions-page #liveLogs.live-log-box{
	background:rgba(3,7,16,.9) !important;
	border:1px solid rgba(125,211,252,.18); border-radius:11px;
	color:#a7f3d0; font-family:monospace;
	max-height:240px; overflow-y:auto;
}
body.user-submissions-page #gradingHistoryTimeline.bg-light{
	background:rgba(7,12,24,.55) !important; border:1px solid rgba(125,211,252,.16) !important;
	color:#dbe6ff;
}

/* Test card details button polish */
body.user-submissions-page #openTestCardDetails.btn-info{ background:rgba(56,189,248,.16) !important; }

/* ----- Mobile ------------------------------------------------------- */
@media (max-width: 760px){
	.us-section{ padding:1rem; border-radius:18px; }
	.us-stat-grid{ grid-template-columns:repeat(2, 1fr); gap:.55rem; }
	.us-stat__value{ font-size:1.15rem; }
	.us-toolbar{ flex-direction:column; align-items:stretch; }
	body.user-submissions-page .us-toolbar .form-control,
	body.user-submissions-page .us-toolbar .form-select{ width:100%; min-width:0; }
	body.user-submissions-page .nav.nav-tabs{ width:100%; justify-content:stretch; }
	body.user-submissions-page .nav.nav-tabs .nav-item{ flex:1; }
	body.user-submissions-page .nav.nav-tabs .nav-link{ text-align:center; width:100%; }
	body.user-submissions-page table.submissions-table{ display:block; overflow-x:auto; min-width:0; white-space:nowrap; }
	body.user-submissions-page table.submissions-table thead th{ white-space:nowrap; font-size:.55rem; padding:.7rem .55rem !important; }
	body.user-submissions-page table.submissions-table tbody td{ white-space:nowrap; padding:.7rem .55rem; font-size:.78rem; }
	body.user-submissions-page .us-action-bar .btn{ flex:1; min-width:0; }
	body.user-submissions-page #mergeSubmissions{ width:100%; }
}

/* ==========================================================================
   LIVE LOG STREAM — cinematic overlay over <pre id="liveLogs">
   ========================================================================== */

/* Hide the raw <pre> by default once the overlay is attached */
body.user-submissions-page #liveLogs.us-livelog__raw{
	display:none;
	background:#03070d !important; color:#86efac !important;
	border:1px solid rgba(125,211,252,.18);
	border-radius:11px; padding:.8rem 1rem;
	font-family: ui-monospace,'SFMono-Regular','Menlo','Consolas',monospace;
	font-size:.78rem; line-height:1.5;
	max-height:240px; overflow:auto;
}
body.user-submissions-page #liveLogs.us-livelog__raw--visible{ display:block; }

.us-livelog{
	border-radius:14px; overflow:hidden;
	background:linear-gradient(160deg, rgba(7,12,24,.92), rgba(3,7,16,.92));
	border:1px solid rgba(125,211,252,.22);
	box-shadow:0 16px 36px -20px rgba(2,6,23,.7);
	margin-top:.5rem;
	position:relative; isolation:isolate;
}
.us-livelog::before{
	content:""; position:absolute; left:0; right:0; top:0; height:2px;
	background:linear-gradient(90deg, transparent, #38bdf8 30%, #8b5cf6 60%, transparent);
	background-size:200% 100%;
	animation:us-livelog-scan 2.6s linear infinite;
}
@keyframes us-livelog-scan{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.us-livelog[data-stream-state="success"]::before{
	background:linear-gradient(90deg, transparent, #34d399 40%, #22d3ee 60%, transparent);
	animation:none;
}
.us-livelog[data-stream-state="error"]::before{
	background:linear-gradient(90deg, transparent, #fb7185 40%, #f472b6 60%, transparent);
	animation:none;
}
.us-livelog[data-stream-state="cancelled"]::before{
	background:linear-gradient(90deg, transparent, #fbbf24 40%, #f472b6 60%, transparent);
	animation:none;
}
@media (prefers-reduced-motion: reduce){ .us-livelog::before{ animation:none; } }

.us-livelog__head{
	display:flex; align-items:center; justify-content:space-between;
	gap:.85rem; padding:.7rem 1rem;
	background:linear-gradient(120deg, rgba(15,23,42,.85), rgba(7,12,24,.85));
	border-bottom:1px solid rgba(125,211,252,.16);
	flex-wrap:wrap;
}
.us-livelog__title{
	display:inline-flex; align-items:center; gap:.55rem;
	font-family:"Roboto Slab","Roboto",Georgia,serif;
	font-size:.84rem; font-weight:700; letter-spacing:.04em;
	color:#cfe9ff;
}
.us-livelog__pulse{
	width:10px; height:10px; border-radius:50%;
	background:#34d399;
	box-shadow:0 0 0 0 rgba(52,211,153,.7);
	animation:us-livelog-pulse 1.6s ease-out infinite;
}
.us-livelog[data-stream-state="success"] .us-livelog__pulse{
	animation:none; background:#34d399; box-shadow:0 0 12px rgba(52,211,153,.6);
}
.us-livelog[data-stream-state="error"] .us-livelog__pulse{
	animation:none; background:#fb7185; box-shadow:0 0 12px rgba(244,114,128,.6);
}
.us-livelog[data-stream-state="cancelled"] .us-livelog__pulse{
	animation:none; background:#fbbf24; box-shadow:0 0 12px rgba(251,191,36,.6);
}
@keyframes us-livelog-pulse{
	0%{box-shadow:0 0 0 0 rgba(52,211,153,.7);}
	70%{box-shadow:0 0 0 10px rgba(52,211,153,0);}
	100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}
}
@media (prefers-reduced-motion: reduce){ .us-livelog__pulse{ animation:none; } }

.us-livelog__meta{
	display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap;
}
.us-livelog__counter{
	font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
	color:rgba(186,230,253,.6); font-weight:600;
	font-variant-numeric:tabular-nums;
}
.us-livelog__chip{
	display:inline-flex; align-items:center; gap:.3rem;
	background:rgba(7,12,24,.65) !important; border:1px solid rgba(125,211,252,.24) !important;
	color:#cfe9ff !important; border-radius:999px !important;
	font-size:.7rem !important; font-weight:600 !important; letter-spacing:.02em;
	padding:.32rem .7rem !important; cursor:pointer;
	transition:all .18s ease;
}
.us-livelog__chip .material-icons-round{ font-size:14px !important; }
.us-livelog__chip:hover{
	background:rgba(56,189,248,.18) !important;
	border-color:rgba(125,211,252,.5) !important;
	color:#fff !important;
}
.us-livelog__chip[aria-pressed="true"]{
	background:linear-gradient(135deg, rgba(56,189,248,.4), rgba(139,92,246,.4)) !important;
	border-color:transparent !important; color:#fff !important;
}

.us-livelog__body{
	max-height:300px; overflow-y:auto; padding:.5rem;
	font-family: ui-monospace,'SFMono-Regular','Menlo','Consolas',monospace;
	background:rgba(3,7,16,.55);
	scroll-behavior:smooth;
}
.us-livelog__body::-webkit-scrollbar{ width:8px; }
.us-livelog__body::-webkit-scrollbar-track{ background:rgba(7,12,24,.4); }
.us-livelog__body::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#38bdf8,#8b5cf6); border-radius:999px; }

.us-livelog__row{
	display:grid; grid-template-columns:8px auto 1fr; gap:.55rem; align-items:start;
	padding:.42rem .65rem; border-radius:8px;
	font-size:.78rem; line-height:1.45;
	color:#dbe6ff;
	border-left:2px solid transparent;
	animation:us-livelog-in .25s ease;
}
@keyframes us-livelog-in{ from{opacity:0;transform:translateY(2px);} to{opacity:1;transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .us-livelog__row{ animation:none; } }

.us-livelog__sev{
	width:8px; height:8px; border-radius:50%; margin-top:.45em;
	background:#7dd3fc; box-shadow:0 0 6px rgba(125,211,252,.6);
}
.us-livelog__ts{
	font-size:.66rem; color:rgba(186,230,253,.5); white-space:nowrap;
	letter-spacing:.04em; padding-top:.05em; min-width:42px;
}
.us-livelog__msg{
	color:#dbe6ff; word-break:break-word;
}

/* Severity color mapping */
.us-livelog__row[data-sev="info"]{ background:rgba(56,189,248,.04); }
.us-livelog__row[data-sev="info"] .us-livelog__sev{ background:#7dd3fc; box-shadow:0 0 6px rgba(125,211,252,.55); }

.us-livelog__row[data-sev="meta"]{ background:transparent; opacity:.85; }
.us-livelog__row[data-sev="meta"] .us-livelog__sev{ background:rgba(186,230,253,.4); box-shadow:none; }
.us-livelog__row[data-sev="meta"] .us-livelog__msg{ color:rgba(186,230,253,.7); font-style:italic; }

.us-livelog__row[data-sev="step"]{
	background:linear-gradient(120deg, rgba(139,92,246,.12), rgba(56,189,248,.06));
	border-left-color:#a78bfa;
}
.us-livelog__row[data-sev="step"] .us-livelog__sev{ background:#a78bfa; box-shadow:0 0 8px rgba(167,139,250,.6); }
.us-livelog__row[data-sev="step"] .us-livelog__msg{ color:#e9d5ff; font-weight:600; }

.us-livelog__row[data-sev="success"]{
	background:linear-gradient(120deg, rgba(52,211,153,.14), rgba(34,211,238,.05));
	border-left-color:#34d399;
}
.us-livelog__row[data-sev="success"] .us-livelog__sev{ background:#34d399; box-shadow:0 0 8px rgba(52,211,153,.7); }
.us-livelog__row[data-sev="success"] .us-livelog__msg{ color:#bbf7d0; font-weight:600; }

.us-livelog__row[data-sev="warn"]{
	background:linear-gradient(120deg, rgba(251,191,36,.13), rgba(244,114,182,.05));
	border-left-color:#fbbf24;
}
.us-livelog__row[data-sev="warn"] .us-livelog__sev{ background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,.65); }
.us-livelog__row[data-sev="warn"] .us-livelog__msg{ color:#fde68a; }

.us-livelog__row[data-sev="error"]{
	background:linear-gradient(120deg, rgba(244,114,128,.16), rgba(251,113,133,.06));
	border-left-color:#fb7185;
}
.us-livelog__row[data-sev="error"] .us-livelog__sev{ background:#fb7185; box-shadow:0 0 8px rgba(244,114,128,.7); }
.us-livelog__row[data-sev="error"] .us-livelog__msg{ color:#fecaca; font-weight:600; }

/* Compact on mobile */
@media (max-width: 760px){
	.us-livelog__body{ max-height:220px; }
	.us-livelog__row{ font-size:.72rem; grid-template-columns:8px auto 1fr; gap:.4rem; padding:.35rem .5rem; }
	.us-livelog__ts{ font-size:.6rem; min-width:34px; }
}

/* ── PSA submission options panel (submit modal) ─────────────────────────── */
/* Self-contained styling so it doesn't depend on Bootstrap's form-switch (which
   the competing Material/glass CSS was mangling — oversized clipped toggles). */
.psa-opts{
  margin:.85rem 0;
  padding:.9rem 1rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.psa-opts__title{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin:0 0 .7rem;
  display:flex; align-items:center; gap:.5rem;
}
.psa-opts__title::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.12),transparent); }
.psa-opts__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.4rem; }
@media (max-width:480px){ .psa-opts__grid{ grid-template-columns:1fr; } }
.psa-opts__field{ display:flex; flex-direction:column; gap:.3rem; }
.psa-opts__label{ font-size:.72rem; font-weight:600; color:rgba(255,255,255,.7); }
.psa-opts__select{
  appearance:none; -webkit-appearance:none;
  width:100%; padding:.5rem 2rem .5rem .7rem;
  font-size:.85rem; color:#f3f4f6;
  background:rgba(13,17,28,.85);
  border:1px solid rgba(255,255,255,.14); border-radius:10px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2399a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .65rem center;
  transition:border-color .15s ease, box-shadow .15s ease; cursor:pointer;
}
.psa-opts__select:hover{ border-color:rgba(255,255,255,.28); }
.psa-opts__select:focus{ outline:none; border-color:#3dd0c4; box-shadow:0 0 0 3px rgba(61,208,196,.18); }
.psa-opts__select option{ background:#0d111c; color:#f3f4f6; }
.psa-opts__select option:disabled{ color:#6b7280; }

/* Custom toggle row (replaces Bootstrap form-switch) */
.psa-toggle{ display:flex; align-items:center; gap:.6rem; padding:.35rem 0; cursor:pointer; user-select:none; }
.psa-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.psa-toggle__track{
  flex:0 0 auto; position:relative; width:38px; height:22px; border-radius:999px;
  background:rgba(255,255,255,.16); transition:background .18s ease;
}
.psa-toggle__track::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .18s ease;
}
.psa-toggle input:checked + .psa-toggle__track{ background:linear-gradient(90deg,#3dd0c4,#4f8cff); }
.psa-toggle input:checked + .psa-toggle__track::after{ transform:translateX(16px); }
.psa-toggle input:focus-visible + .psa-toggle__track{ box-shadow:0 0 0 3px rgba(61,208,196,.25); }
.psa-toggle__label{ font-size:.85rem; color:#e5e7eb; line-height:1.2; }
.psa-toggle__label small{ display:block; font-size:.68rem; color:rgba(255,255,255,.45); font-weight:400; }

/* Advanced grading disclosure */
.psa-opts__adv{ margin-top:.55rem; border-top:1px solid rgba(255,255,255,.06); padding-top:.55rem; }
.psa-opts__adv > summary{
  list-style:none; cursor:pointer; font-size:.72rem; font-weight:600;
  color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.4rem;
}
.psa-opts__adv > summary::-webkit-details-marker{ display:none; }
.psa-opts__adv > summary::before{ content:"\25B8"; transition:transform .15s ease; font-size:.65rem; }
.psa-opts__adv[open] > summary::before{ transform:rotate(90deg); }
.psa-opts__adv-body{ margin-top:.5rem; padding-left:.2rem; }
.psa-opts__num{
  width:120px; padding:.4rem .6rem; font-size:.82rem; color:#f3f4f6;
  background:rgba(13,17,28,.85); border:1px solid rgba(255,255,255,.14); border-radius:8px;
}
.psa-opts__num:focus{ outline:none; border-color:#3dd0c4; box-shadow:0 0 0 3px rgba(61,208,196,.18); }

/* Run-level toggles below the options card (Dry Run / Live Logs) reuse psa-toggle */
.psa-run-toggles{ margin-top:.25rem; display:flex; flex-direction:column; gap:.1rem; }

/* end user-submissions v3 */