:root {
  --bg-primary: #0d0d0f;
  --bg-secondary: #15161a;
  --bg-tertiary: #1e1f24;
  --bg-card: #1a1b20;
  --accent-primary: #00d4ff;
  --accent-secondary: #7b5cff;
  --accent-success: #00e676;
  --accent-warning: #ffab00;
  --accent-error: #ff5252;
  --text-primary: #ffffff;
  --text-secondary: #a0a4b8;
  --text-muted: #6b6f80;
  --border-color: #2a2b32;
  --border-light: #3a3b45;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition-fast: .15s ease;
  --transition-normal: .25s ease;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
--safe-area-right: env(safe-area-inset-right, 0px)}

*,*:before,*:after {
  box-sizing:border-box;
  margin:0;
padding:0}

html {
  font-size:16px;
  -webkit-text-size-adjust:100%;
-webkit-tap-highlight-color:transparent}

body {
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.5;
  min-height:100vh;
  min-height:-webkit-fill-available;
overflow-x:hidden}

.app-container {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:-webkit-fill-available;
padding:var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left)}

.app-header {
  padding:var(--spacing-lg) var(--spacing-xl);
  background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);
  border-bottom:1px solid var(--border-color);
text-align:center}

.app-header h1 {
  font-size:1.75rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
letter-spacing:-.02em}

.app-header .subtitle {
  color:var(--text-secondary);
  font-size:.875rem;
margin-top:var(--spacing-xs)}

.test-suite {
  flex:1;
  padding:var(--spacing-lg);
  display:grid;
  gap:var(--spacing-xl);
  max-width:1200px;
  margin:0 auto;
width:100%}

@media(min-width:768px) {
  .test-suite {
    grid-template-columns:repeat(2,1fr);
  padding:var(--spacing-xl)}

}

@media(min-width:1024px) {
  .test-suite {
  grid-template-columns:repeat(3,1fr)}

}

.test-group {
  display:flex;
  flex-direction:column;
gap:var(--spacing-md)}

.test-group h2 {
  font-size:1.125rem;
  font-weight:600;
  color:var(--text-primary);
  padding-bottom:var(--spacing-sm);
  border-bottom:2px solid var(--border-color);
  display:flex;
  align-items:center;
gap:var(--spacing-sm)}

.test-card {
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--spacing-md);
  border:1px solid var(--border-color);
transition:all var(--transition-normal)}

.test-card:hover {
  border-color:var(--border-light);
transform:translateY(-2px)}

.test-card.passed {
  border-color:var(--accent-success);
box-shadow:0 0 20px #00e6761a}

.test-card.failed {
  border-color:var(--accent-error);
box-shadow:0 0 20px #ff52521a}

.test-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
margin-bottom:var(--spacing-sm)}

.test-name {
  font-weight:600;
font-size:.9375rem}

.test-status {
font-size:1.25rem}

.test-desc {
  color:var(--text-secondary);
  font-size:.8125rem;
margin-bottom:var(--spacing-md)}

.test-demo {
  background:var(--bg-secondary);
  border-radius:var(--radius-sm);
  padding:var(--spacing-md);
margin-top:var(--spacing-md)}

.test-demo p {
  font-size:.875rem;
margin-bottom:var(--spacing-sm)}

.test-demo p:last-child {
margin-bottom:0}

button {
  background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);
  color:var(--bg-primary);
  border:none;
  border-radius:var(--radius-sm);
  padding:var(--spacing-sm) var(--spacing-md);
  font-size:.875rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition-fast);
  touch-action:manipulation;
-webkit-appearance:none}

button:hover:not(:disabled) {
  transform:scale(1.02);
box-shadow:0 4px 12px #00d4ff4d}

button:active:not(:disabled) {
transform:scale(.98)}

button:disabled {
  opacity:.5;
cursor:not-allowed}

button+button {
margin-left:var(--spacing-sm)}

input[type=text],input[type=number] {
  width:100%;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:var(--spacing-sm) var(--spacing-md);
  color:var(--text-primary);
  font-size:.9375rem;
transition:all var(--transition-fast)}

input[type=text]:focus,input[type=number]:focus {
  outline:none;
  border-color:var(--accent-primary);
box-shadow:0 0 0 3px #00d4ff26}

.slider-group {
  display:flex;
  align-items:center;
gap:var(--spacing-md)}

.slider-group label {
  font-size:.875rem;
  color:var(--text-secondary);
white-space:nowrap}

input[type=range] {
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:8px;
  background:var(--bg-tertiary);
  border-radius:4px;
outline:none}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:24px;
  height:24px;
  background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 6px #0000004d;
transition:transform var(--transition-fast)}

input[type=range]::-webkit-slider-thumb:hover {
transform:scale(1.15)}

input[type=range]:active::-webkit-slider-thumb {
transform:scale(1.1)}

.slider-value {
  min-width:36px;
  text-align:center;
  font-weight:600;
  font-variant-numeric:tabular-nums;
color:var(--accent-primary)}

.items-list {
  display:flex;
  flex-wrap:wrap;
  gap:var(--spacing-sm);
margin-bottom:var(--spacing-md)}

.item-tag {
  background:var(--bg-tertiary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-sm);
  padding:var(--spacing-xs) var(--spacing-sm);
  font-size:.75rem;
color:var(--accent-primary)}

.hidden-text {
  margin-top:var(--spacing-sm);
  padding:var(--spacing-sm);
  background:#00e6761a;
  border-radius:var(--radius-sm);
  color:var(--accent-success);
font-size:.875rem}

.device-list {
  margin-top:var(--spacing-md);
  padding:var(--spacing-md);
  background:var(--bg-secondary);
border-radius:var(--radius-sm)}

.device-list h4 {
  font-size:.75rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
margin-bottom:var(--spacing-sm)}

.device-list>div+div {
margin-top:var(--spacing-md)}

.device-item {
  padding:var(--spacing-sm);
  background:var(--bg-tertiary);
  border-radius:var(--radius-sm);
  font-size:.875rem;
margin-bottom:var(--spacing-xs)}

.device-item.seqtrak {
  background:linear-gradient(135deg,#00d4ff26,#7b5cff26);
border:1px solid var(--accent-primary)}

.sysex-note {
  margin-top:var(--spacing-md);
  padding:var(--spacing-sm);
  background:#00e6761a;
  border-radius:var(--radius-sm);
  color:var(--accent-success);
  font-size:.8125rem;
font-weight:500}

.test-summary {
  grid-column:1 / -1;
  background:var(--bg-secondary);
  border-radius:var(--radius-lg);
  padding:var(--spacing-xl);
  text-align:center;
border:1px solid var(--border-color)}

.test-summary h2 {
  justify-content:center;
margin-bottom:var(--spacing-lg)}

.summary-stats {
  display:flex;
  justify-content:center;
  gap:var(--spacing-xl);
margin-bottom:var(--spacing-lg)}

.stat {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:var(--spacing-lg);
  border-radius:var(--radius-md);
min-width:100px}

.stat.passed {
background:#00e6761a}

.stat.failed {
background:#ff52521a}

.stat-value {
  font-size:2.5rem;
font-weight:700}

.stat.passed .stat-value {
color:var(--accent-success)}

.stat.failed .stat-value {
color:var(--accent-error)}

.stat-label {
  font-size:.875rem;
  color:var(--text-secondary);
margin-top:var(--spacing-xs)}

.verdict {
  font-size:1.125rem;
  font-weight:600;
color:var(--accent-success)}

.verdict.warning {
color:var(--accent-warning)}

.app-footer {
  padding:var(--spacing-lg);
  text-align:center;
  color:var(--text-muted);
  font-size:.8125rem;
border-top:1px solid var(--border-color)}

@media(hover:none)and (pointer:coarse) {
  button {
    min-height:44px;
  min-width:44px}

  input[type=range]::-webkit-slider-thumb {
    width:32px;
  height:32px}

}

@media(orientation:landscape)and (max-height:600px) {
  .app-header {
  padding:var(--spacing-md) var(--spacing-xl)}

  .app-header h1 {
  font-size:1.5rem}

  .test-suite {
  padding:var(--spacing-md)}

}