.tt-shell { max-width: 1240px; margin: 0 auto; padding: 24px 0 56px; }
.tt-heading, .tt-dashboard-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tt-heading h1 { margin: 4px 0 8px; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.05em; }
.tt-dashboard-card { margin: 24px 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid #8a1538; border-radius: var(--r-lg, 16px); }
.tt-dashboard-card h2 { margin: 4px 0 8px; }
.tt-dashboard-card p { color: var(--ink-muted); max-width: 65ch; margin-bottom: 0; }
.tt-tabs, .tt-toolbar, .tt-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0; }
.tt-tabs { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.tt-shell .btn-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.tt-hint { color: var(--ink-muted); font-size: .86rem; line-height: 1.65; margin: 8px 0 12px; }
.tt-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); margin: 18px 0; min-width: 0; }
.tt-card h2 { margin: 0 0 14px; font-size: 1.15rem; }
.tt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tt-grid .tt-card { margin: 0; }
.tt-field { display: grid; gap: 6px; font-size: .76rem; font-weight: 600; min-width: 150px; flex: 1; }
.tt-shell input, .tt-shell select, .tt-shell textarea, .tt-copy-dialog textarea { font: inherit; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; max-width: 100%; }
.tt-shell select { min-height: 42px; }
.tt-shell input:focus, .tt-shell select:focus, .tt-shell textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.tt-shell textarea { width: 100%; min-height: 340px; line-height: 1.8; resize: vertical; margin-top: 16px; }
.tt-shell [lang=ar] { line-height: 1.9; }
.tt-shell input[type=checkbox] { width: 18px; height: 18px; accent-color: #8a1538; }
.tt-check { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.tt-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; margin: 20px 0; }
.tt-metric { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 8px; }
.tt-metric strong { font-size: 1.55rem; font-family: 'IBM Plex Mono', monospace; letter-spacing: -.06em; }
.tt-metric span { color: var(--ink-muted); font-size: .76rem; }
.tt-quote { background: var(--surface-2); border-left: 3px solid #8a1538; padding: 16px 20px; border-radius: 0 12px 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tt-quote p { margin: 0; font-size: 1rem; }
.tt-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 18px 0; }
.tt-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.tt-table th, .tt-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tt-table thead th { background: var(--surface-2); white-space: nowrap; }
.tt-table tbody th { min-width: 170px; font-weight: 600; }
.tt-table tbody tr:last-child > * { border-bottom: 0; }
.tt-table input[type=number], .tt-table input[inputmode=decimal] { width: 100px; }
.tt-table .tt-field { min-width: 150px; font-size: .7rem; }
.tt-table small { display: block; color: var(--ink-muted); margin-top: 6px; }
.tt-pill { display: inline-flex; align-items: center; background: var(--surface-2); color: var(--ink-muted); padding: 7px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.tt-alert { color: var(--danger); background: var(--danger-soft); }
.tt-good { color: var(--good); background: var(--good-soft); }
.tt-invalid, .tt-error { color: var(--danger) !important; border-color: var(--danger) !important; }
.tt-error { border: 1px solid; padding: 12px; border-radius: 8px; }
.tt-lesson { display: block; width: 100%; text-align: left; margin: 8px 0; }
.tt-bar-row { display: grid; grid-template-columns: 70px minmax(60px, 1fr) 30px; gap: 12px; align-items: center; font-size: .8rem; margin: 12px 0; }
.tt-bar-row meter { width: 100%; height: 22px; accent-color: #8a1538; }
.tt-copy-dialog { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); width: min(680px, 92vw); }
.tt-copy-dialog textarea { width: 100%; min-height: 300px; margin-bottom: 12px; }
@media (max-width: 700px) { .tt-heading, .tt-dashboard-card { align-items: start; flex-direction: column; } .tt-grid { grid-template-columns: 1fr; } .tt-card { padding: 16px; } .tt-quote { align-items: start; flex-direction: column; } .tt-shell { padding-top: 16px; } .tt-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-metric { padding: 14px; } }