/* Simulador de Defeitos de PC — Estilos */


  :root {
    --bg: #0a0e17;
    --panel: #0d1321;
    --panel2: #111827;
    --border: #1e2d45;
    --accent: #00d4ff;
    --accent2: #00ff9d;
    --warn: #ff6b35;
    --danger: #ff3366;
    --text: #eef0f1;
    --text-dim: #8a9bb0;
    --text-bright: #e8f4ff;
    --glow: 0 0 20px rgba(0,212,255,0.3);
    --glow2: 0 0 20px rgba(0,255,157,0.3);
  }

  /* ── TEMA LIGHT ── */
  [data-theme="light"] {
    --bg: #f2f4f6;
    --panel: #ffffff;
    --panel2: #eaecf0;
    --border: #d0d8e4;
    --accent: #0066aa;
    --accent2: #00885a;
    --warn: #c85000;
    --danger: #bb1133;
    --text: #1c2840;
    --text-dim: #556680;
    --text-bright: #0a1520;
    --glow: 0 0 14px rgba(0,102,170,0.18);
    --glow2: 0 0 14px rgba(0,136,90,0.18);
  }

  /* Remover scanlines no tema light — ficam visíveis no fundo claro */
  [data-theme="light"] body::before { display: none; }

  /* Remover transição forçada que pode conflitar no light */
  [data-theme="light"] *, [data-theme="light"] *::before, [data-theme="light"] *::after {
    transition: background-color .2s ease, color .15s ease, border-color .15s ease !important;
  }

  /* Transição suave ao trocar tema */
  *, *::before, *::after {
    transition: background-color .25s ease, color .2s ease,
                border-color .2s ease, box-shadow .2s ease !important;
  }

  /* Ajustes específicos do tema light */
  [data-theme="light"] body { background: var(--bg); }
  [data-theme="light"] header { background: #ffffff; border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
  [data-theme="light"] .logo-small { color: var(--accent); }
  [data-theme="light"] .intro-logo { color: var(--accent); }
  [data-theme="light"] .intro-sub { color: var(--text-dim); }
  [data-theme="light"] #intro { background: var(--bg); }
  [data-theme="light"] .boot-line { color: #1a6a2a; }
  [data-theme="light"] .btn-start { border-color: var(--accent); color: var(--accent); }
  [data-theme="light"] .comp-card { background: var(--panel); border-color: var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
  [data-theme="light"] .comp-card:hover:not(.used) { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,119,187,.15); }
  [data-theme="light"] .comp-name { color: var(--text) !important; }
  [data-theme="light"] .tab-btn { color: var(--text-dim); }
  [data-theme="light"] .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(0,119,187,.05); }
  [data-theme="light"] .panel-tabs { background: var(--panel); border-bottom-color: var(--border); }
  [data-theme="light"] .symptom-box { background: var(--panel); border-color: var(--border);   padding: 12px 14px;
}
  [data-theme="light"] .symptom-text { color: var(--text); }
  [data-theme="light"] .additional-info { background: rgba(0,119,187,.05); border-left-color: var(--accent); }
  [data-theme="light"] .tools-panel { background: var(--panel); }
  [data-theme="light"] .power-section { background: var(--panel2); border-bottom-color: var(--border); }
  [data-theme="light"] .score-val { color: #00884a !important; }
  [data-theme="light"] .hint-btn { border-color: #b07000; color: #b07000; }
  [data-theme="light"] #hintPopup { background: #fffbf0; border-color: #b07000; }
  [data-theme="light"] .hint-popup-title { color: #b07000; }
  [data-theme="light"] .modal-overlay { background: rgba(0,0,0,.5); }
  [data-theme="light"] .modal-box { background: #fff; border-color: var(--border); box-shadow: 0 8px 32px rgba(0,0,0,.15); }
  [data-theme="light"] .modal-title { color: var(--text-bright); }
  [data-theme="light"] .history-bar { background: var(--panel2); border-top-color: var(--border); }
  [data-theme="light"] .case-nav { background: var(--panel2); }
  [data-theme="light"] .defect-btn { border-color: var(--border); color: var(--text-dim); }
  [data-theme="light"] .defect-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  [data-theme="light"] .score-bar-bg { background: rgba(0,0,0,.1); }
  [data-theme="light"] .comp-detail-overlay { background: rgba(0,0,0,.5); }
  [data-theme="light"] .comp-detail-photo { background: #ffffff00; }
  [data-theme="light"] .comp-detail-info-box { background: #fff; border-color: var(--border); }
  [data-theme="light"] .comp-detail-name-big { color: var(--text-bright); }
  [data-theme="light"] .comp-detail-title { color: var(--accent); }
  [data-theme="light"] .comp-detail-desc-text { color: var(--text); }
  [data-theme="light"] .comp-detail-action-btn { border-color: var(--accent); color: var(--accent); }
  [data-theme="light"] .comp-detail-close-btn { border-color: var(--border); color: var(--text-dim); }
  [data-theme="light"] .tab-section-label { color: var(--text-dim); border-bottom-color: var(--border); }
  [data-theme="light"] .defect-num { color: var(--text-dim); }
  [data-theme="light"] #svgScreen { color: #006622 !important; }
  [data-theme="light"] .monitor-frame { background: linear-gradient(160deg, #d0d8e4 0%, #b8c4d0 100%); border-color: #a0b0c0; }
  [data-theme="light"] .monitor-screen-area { background: #e8f4e8; border-color: #c0d0c0; }
  [data-theme="light"] .monitor-chin { color: var(--text-dim); }
  [data-theme="light"] .monitor-neck { background: linear-gradient(to bottom, #c0ccd8, #b0bcc8); border-color: #a0b0c0; }
  [data-theme="light"] .monitor-base { background: linear-gradient(to bottom, #c0ccd8, #b0bcc8); border-color: #a0b0c0; }
  [data-theme="light"] .tower-case { background: linear-gradient(170deg, #c8d4e0 0%, #b0bece 50%, #bcc8d4 100%); border-color: #a0b0c0; }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Exo 2',sans-serif;overflow-x:hidden;}
  
  /* Scanlines overlay */
  body::before{display:none;}

  /* INTRO SCREEN */
  #intro{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:32px;}
  .intro-logo{font-family:'Share Tech Mono',monospace;font-size:clamp(28px,5vw,52px);color:var(--accent);text-align:center;text-shadow:var(--glow);letter-spacing:4px;}
  .intro-sub{color:var(--text-dim);font-size:14px;letter-spacing:6px;text-transform:uppercase;}
  .intro-boot{font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--accent2);text-align:left;width:min(500px,90vw);line-height:2;}
  .boot-line{opacity:0;animation:bootIn .1s forwards;}
  @keyframes bootIn{to{opacity:1;}}
  .btn-start{margin-top:16px;padding:14px 48px;background:transparent;border:2px solid var(--accent);color:var(--accent);font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;letter-spacing:4px;cursor:pointer;text-transform:uppercase;transition:.2s;position:relative;overflow:hidden;}
  .btn-start::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);transition:.3s;}
  .btn-start:hover::before{transform:translateX(0);}
  .btn-start:hover{color:var(--bg);}
  .btn-start span{position:relative;z-index:1;}

  /* MAIN APP */
  #app{display:none;flex-direction:column;min-height:100vh;}
  
  /* HEADER */
  header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:50;}
  .logo-small{font-family:'Share Tech Mono',monospace;font-size:14px;color:var(--accent);letter-spacing:2px;}
  .score-display{display:flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;}
  .score-label{font-size:11px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;}
  .score-val{font-size:22px;color:var(--accent2);text-shadow:var(--glow2);}
  .case-counter{font-size:12px;color:var(--text-dim);font-family:'Share Tech Mono',monospace;}

  /* MAIN LAYOUT */
  .main-grid{display:grid;grid-template-columns:1fr 360px;gap:0;flex:1;min-height:0;}
  
  /* LEFT: PC VISUAL */
  .pc-area{padding:24px;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--border);}
  .section-label{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;}

  /* PC SVG scene */
  .pc-scene{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;justify-content: center;}
  .monitor-wrap,.tower-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:.2s;}
  .monitor-wrap:hover,.tower-wrap:hover{transform:translateY(-3px);}
  .pc-label{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);}
  
  svg.monitor-svg{width:320px;height:280px;filter:drop-shadow(0 0 8px rgba(0,212,255,.2));}
  svg.tower-svg{width:210px;height:290px;filter:drop-shadow(0 0 8px rgba(0,212,255,.2));}
  
  .click-hint{font-size:11px;color:var(--accent);letter-spacing:2px;opacity:.7;animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:.4;}50%{opacity:.9;}}

  /* SYMPTOM PANEL */
  .symptom-box{background:var(--panel2);margin-top:30px;border:1px solid var(--border);border-radius:4px;padding:16px;}
  .symptom-box h3{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
  .symptom-text{font-size:13px;line-height:1.7;color:var(--text);white-space:pre-line;}
  .additional-info{margin-top:10px;padding:10px;background:rgba(0,212,255,.05);border-left:2px solid var(--accent);font-size:12px;color:var(--text-dim);}

  /* MONITOR SCREEN DISPLAY */
  .monitor-screen{background:#000;border:1px solid var(--border);border-radius:4px;padding:14px;font-family:'Share Tech Mono',monospace;font-size:13px;color:#22cc44;min-height:70px;position:relative;}
  .monitor-screen.has-error{color:#ff4444;animation:flicker .15s infinite;}
  .monitor-screen.off{color:transparent;background:#050505;}
  @keyframes flicker{0%,100%{opacity:1;}50%{opacity:.85;}}
  .cursor{display:inline-block;width:8px;height:14px;background:#22cc44;animation:blink .8s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

  /* RIGHT: TOOLS PANEL */
  .tools-panel{background:var(--panel);display:flex;flex-direction:column;overflow-y:auto;}
  .panel-tabs{display:flex;border-bottom:1px solid var(--border);}
  .tab-btn{flex:1;padding:12px 4px;background:none;border:none;color:var(--text-dim);font-family:'Exo 2',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;transition:.2s;}
  .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
  .tab-content{padding:16px;flex:1;}
  
  /* Component cards */
  .comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .comp-card{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:10px 8px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;}
  .comp-card:hover{border-color:var(--accent);box-shadow:var(--glow);}
  .comp-card.used{opacity:.45;cursor:default;}
  .comp-card.used::after{content:'✓';position:absolute;top:4px;right:6px;color:var(--accent2);font-size:10px;}
  .comp-icon{font-size:24px;line-height:1;}
  .comp-name{font-size:10px;text-align:center;color:var(--text-dim);letter-spacing:.5px;line-height:1.3;}
  .comp-type{font-size:9px;letter-spacing:2px;text-transform:uppercase;}
  .comp-type.hw{color:var(--accent);}
  .comp-type.sw{color:var(--accent2);}

  /* Power button */
  .power-section{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
  .power-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);background:var(--panel2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.3s;position:relative;}
  .power-btn.on{border-color:var(--accent2);box-shadow:0 0 12px rgba(0,255,157,.4);}
  .power-btn.off{border-color:var(--danger);}
  .power-status{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;}
  .power-status.on{color:var(--accent2);}
  .power-status.off{color:var(--danger);}

  /* Feedback modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
  .modal-overlay.hidden{display:none;}
  .modal-box{background:var(--panel);border:1px solid var(--border);border-radius:6px;width:min(520px,92vw);padding:28px;position:relative;}
  .modal-box.success{border-color:var(--accent2);}
  .modal-box.neutral{border-color:var(--accent);}
  .modal-box.error{border-color:var(--danger);}
  .modal-title{font-size:11px;letter-spacing:4px;text-transform:uppercase;margin-bottom:6px;}
  .modal-title.success{color:var(--accent2);}
  .modal-title.neutral{color:var(--accent);}
  .modal-title.error{color:var(--danger);}
  .modal-proc{font-size:15px;font-weight:700;color:var(--text-bright);margin-bottom:12px;}
  .modal-feedback{font-size:13px;line-height:1.8;color:var(--text);}
  .modal-score-change{font-family:'Share Tech Mono',monospace;font-size:13px;margin-top:10px;}
  .modal-score-change.loss{color:var(--danger);}
  .modal-score-change.none{color:var(--accent2);}
  .modal-close{margin-top:18px;padding:10px 32px;background:transparent;border:1px solid var(--accent);color:var(--accent);font-family:'Exo 2',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:.2s;}
  .modal-close:hover{background:var(--accent);color:var(--bg);}

  /* WIN/LOSE screen */
  .modal-box.endgame{text-align:center;}
  .end-score{font-family:'Share Tech Mono',monospace;font-size:48px;color:var(--accent);text-shadow:var(--glow);margin:16px 0;}
  .end-msg{font-size:14px;color:var(--text);line-height:1.8;margin-bottom:20px;}
  .end-rating{font-size:13px;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;}

  /* Monitor popup */
  .popup-box{background:var(--panel);border:1px solid var(--accent);border-radius:4px;padding:20px;position:fixed;z-index:150;width:min(400px,90vw);box-shadow:var(--glow);}
  .popup-box.hidden{display:none;}
  .popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
  .popup-close{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;}
  .popup-screen{background:#000;border-radius:2px;padding:12px;font-family:'Share Tech Mono',monospace;font-size:12px;color:#22cc44;min-height:60px;margin-bottom:12px;}
  .popup-screen.error{color:#ff4444;}

  /* Defect navigation */
  .defect-nav{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;}
  .defect-btn{padding:6px 14px;background:transparent;border:1px solid var(--border);color:var(--text-dim);font-size:11px;letter-spacing:1px;cursor:pointer;transition:.2s;}
  .defect-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
  .defect-btn:disabled{opacity:.3;cursor:default;}
  .defect-num{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text-dim);margin:0 auto;}

  /* Cabinet view popup */
  .cabinet-popup{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:20px;position:fixed;z-index:150;width:min(420px,92vw);box-shadow:0 0 30px rgba(0,0,0,.8);}
  .cabinet-popup.hidden{display:none;}
  
  @media(max-width:700px){
    .main-grid{grid-template-columns:1fr;}
    .tools-panel{border-top:1px solid var(--border);}
  }

  /* ===== CARDS COM FOTO REAL ===== */
  .comp-grid { display:grid; grid-template-columns:1fr; gap:5px; }
  .comp-card {
    background:var(--panel2); border:1px solid var(--border); border-radius:4px;
    cursor:pointer; transition:.2s; display:flex; flex-direction:row;
    align-items:center; gap:10px; padding:6px 8px; position:relative; overflow:hidden;
  }
  .comp-card:hover { border-color:var(--accent); box-shadow:var(--glow); transform:translateX(2px); }
  .comp-card.used { opacity:.45; cursor:default; }
  .comp-card.used::after { content:'✓'; position:absolute; top:4px; right:6px; color:var(--accent2); font-size:10px; }

  .comp-thumb-wrap {
    width:58px; height:48px; border-radius:3px; overflow:hidden; flex-shrink:0;
    background:#050d18; border:1px solid #1e2d45; display:flex; align-items:center; justify-content:center;
  }
  .comp-thumb {
    width:100%; height:100%; object-fit:cover; object-position:center;
    transition:filter .3s;
  }
  .comp-card:hover .comp-thumb { filter:brightness(1.15) contrast(1.05); }
  .comp-thumb-fb { font-size:24px; line-height:1; }

  .comp-card-info { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
  .comp-name { font-size:11px; color:var(--text); line-height:1.3; }
  .comp-type { font-size:9px; letter-spacing:2px; text-transform:uppercase; }
  .comp-type.hw { color:var(--accent); }
  .comp-type.sw { color:var(--accent2); }

  /* ===== MODAL DE DETALHE DO COMPONENTE (como no simulador Intel) ===== */
  .comp-detail-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:300;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(6px); gap:20px; padding:20px;
  }
  .comp-detail-overlay.hidden { display:none; }
  .comp-detail-photo {
    background:#ffffff00; border-radius:8px; padding:16px;
    max-width:480px; width:100%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 40px rgba(0,0,0,.6);
  }
  .comp-detail-photo img {
    max-width:100%; max-height:380px; object-fit:contain; display:block;
  }
  .comp-detail-photo .comp-detail-no-img {
    font-size:80px; text-align:center; padding:40px;
  }
  .comp-detail-info-box {
    background:var(--panel); border:1px solid var(--border); border-radius:6px;
    padding:24px; max-width:320px; width:100%;
    box-shadow:0 8px 40px rgba(0,0,0,.6);
  }
  .comp-detail-title {
    font-size:11px; letter-spacing:3px; text-transform:uppercase;
    color:var(--accent); margin-bottom:8px;
  }
  .comp-detail-name-big {
    font-size:20px; font-weight:700; color:var(--text-bright); margin-bottom:12px; line-height:1.2;
  }
  .comp-detail-desc-text {
    font-size:13px; color:var(--text); line-height:1.7; margin-bottom:20px;
  }
  .comp-detail-action-btn {
    width:100%; padding:12px; background:transparent; border:2px solid var(--accent);
    color:var(--accent); font-family:'Exo 2',sans-serif; font-size:13px; font-weight:700;
    letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:.2s; margin-bottom:8px;
    position:relative; overflow:hidden;
  }
  .comp-detail-action-btn::before {
    content:''; position:absolute; inset:0; background:var(--accent); transform:translateX(-100%); transition:.3s;
  }
  .comp-detail-action-btn:hover::before { transform:translateX(0); }
  .comp-detail-action-btn:hover { color:var(--bg); }
  .comp-detail-action-btn span { position:relative; z-index:1; }
  .comp-detail-close-btn {
    width:100%; padding:8px; background:transparent; border:1px solid var(--border);
    color:var(--text-dim); font-family:'Exo 2',sans-serif; font-size:11px; letter-spacing:2px;
    text-transform:uppercase; cursor:pointer; transition:.2s;
  }
  .comp-detail-close-btn:hover { border-color:var(--accent); color:var(--accent); }

  /* ===== MONITOR E GABINETE (CSS puro, interativos) ===== */
  .monitor-outer { display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 8px 24px rgba(0,212,255,.2)); }
  .monitor-frame {
    width:320px; background:linear-gradient(160deg,#1e2d42 0%,#0d1420 100%);
    border:2px solid #2a3d5a; border-radius:10px 10px 4px 4px;
    padding:10px 10px 6px 10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .monitor-screen-area {
    background:#000c18; border-radius:4px; border:2px solid #080d18;
    height:185px; overflow:hidden; display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .monitor-screen-area::after {
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 3px);
    pointer-events:none; z-index:2; border-radius:2px;
  }
  #svgScreen { z-index:1; position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:8px; box-sizing:border-box; font-family:'Share Tech Mono',monospace; font-size:11px; color:#22cc44; word-break:break-word; line-height:1.6; text-align:center; }
  .monitor-chin { display:flex; align-items:center; justify-content:space-between; padding:5px 8px 3px; }
  .monitor-brand { font-family:'Share Tech Mono',monospace; font-size:7px; letter-spacing:3px; color:#1e3a5f; }
  .mon-led { width:7px; height:7px; border-radius:50%; background:#0d3a0d; border:1px solid #0a2a0a; transition:.4s; }
  .mon-led.on  { background:#00ff44; box-shadow:0 0 8px #00ff44; }
  .mon-led.off { background:#3a0000; }
  .monitor-neck { width:26px; height:32px; background:linear-gradient(to bottom,#1c2533,#141e2e); border-left:1px solid #2a3d5a; border-right:1px solid #2a3d5a; }
  .monitor-base { width:110px; height:12px; background:linear-gradient(to bottom,#1c2533,#0d1321); border:1px solid #2a3d5a; border-radius:0 0 8px 8px; }

  .tower-case {
    width:148px; height:260px;
    background:linear-gradient(170deg,#1e2535 0%,#0d1220 50%,#141c2e 100%);
    border:2px solid #2a3d5a; border-radius:8px; position:relative;
    box-shadow:inset 2px 0 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.5);
    overflow:hidden;
  }
  .tower-top-strip { position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(to right,#2a3d5a,#1e2d45); border-radius:6px 6px 0 0; }
  .tower-leds { position:absolute; top:14px; left:14px; display:flex; gap:8px; align-items:center; }
  .twr-led { width:10px; height:10px; border-radius:50%; background:#0d3a0d; border:1px solid #0a2a0a; transition:.4s; }
  .twr-led.on  { background:#00ff44; box-shadow:0 0 10px #00ff44; }
  .twr-led.off { background:#3a0000; }
  .twr-hdd { width:7px; height:7px; border-radius:50%; background:#0a0a3a; border:1px solid #0a0a2a; }
  .tower-dvd { position:absolute; top:36px; left:12px; right:12px; height:20px; background:#070d18; border:1px solid #1e2d45; border-radius:2px; }
  .tower-bay2 { position:absolute; top:62px; left:12px; right:12px; height:10px; background:#070d18; border:1px solid #1e2d45; border-radius:1px; }
  .tower-usbs { position:absolute; top:80px; left:12px; display:flex; gap:6px; }
  .tower-usb  { width:14px; height:8px; background:#050d18; border:1px solid #1e2d45; border-radius:1px; }
  .tower-vent { position:absolute; bottom:10px; left:12px; right:12px; height:100px; background:#050c18; border-radius:4px; border:1px solid #1a2535; display:flex; align-items:center; justify-content:center; }
  .t-fan  { width:76px; height:76px; border-radius:50%; border:2px solid #1e2d45; display:flex; align-items:center; justify-content:center; position:relative; }
  .t-fan-h { position:absolute; width:72px; height:1px; background:#1a2535; }
  .t-fan-v { position:absolute; width:1px; height:72px; background:#1a2535; }
  .t-fan-hub { width:14px; height:14px; border-radius:50%; background:#0d1321; border:1px solid #2a3d5a; }
  .tower-side-v { position:absolute; right:8px; top:120px; display:flex; flex-direction:column; gap:4px; }
  .tsr { width:8px; height:1px; background:#1e2d45; }
  svg.monitor-svg, svg.tower-svg { display:none !important; }


  .comp-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important;}
  .comp-card{flex-direction:column!important;align-items:center!important;padding:7px 4px 6px!important;gap:5px!important;position:relative;transition:transform .15s,box-shadow .15s,border-color .15s,opacity .3s;}
  .comp-card:hover:not(.used){transform:translateY(-3px) scale(1.03);box-shadow:0 6px 20px rgba(0,212,255,.25);border-color:var(--accent);}
  .comp-card.used{opacity:.38;cursor:default;pointer-events:none;}
  .comp-card.used::after{content:'✓';position:absolute;top:4px;right:6px;color:var(--accent2);font-size:10px;}
  .comp-card.wrong-flash{animation:wrongFlash .4s ease;}
  @keyframes wrongFlash{0%,100%{border-color:var(--border);}50%{border-color:#ff4444;box-shadow:0 0 12px rgba(255,0,0,.4);}}
  .comp-card.right-flash{animation:rightFlash .5s ease;}
  @keyframes rightFlash{0%,100%{border-color:var(--border);}50%{border-color:#00ff88;box-shadow:0 0 16px rgba(0,255,136,.5);}}
  .comp-thumb-wrap{width:100%!important;height:52px!important;border-radius:4px;overflow:hidden;background:#050d18;border:1px solid #1e2d45;display:flex;align-items:center;justify-content:center;}
  .comp-thumb{width:100%;height:100%;object-fit:cover;}
  .comp-thumb-fb{font-size:24px;}
  .comp-name{font-size:10px!important;text-align:center!important;line-height:1.3;color:var(--text)!important;}
  .comp-type{display:none!important;}
  .comp-card-info{text-align:center;width:100%;}
  .hint-btn{margin-left:auto;padding:6px 12px;background:transparent;border:1px solid #f0a000;color:#f0a000;font-family:'Exo 2',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:3px;transition:.2s;}
  .hint-btn:hover{background:rgba(240,160,0,.12);}
  .hint-btn .hint-cost{font-size:8px;opacity:.7;display:block;text-align:center;}
  
  .hint-popup.hidden{display:none;}
  .hint-popup-title{font-size:10px;letter-spacing:2px;color:#f0a000;margin-bottom:8px;}
  .hint-popup-text{font-size:12px;color:var(--text);line-height:1.6;}
  .hint-popup-close{margin-top:10px;width:100%;padding:6px;background:transparent;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:10px;}
  .history-bar{padding:8px 12px;background:var(--panel2);border-top:1px solid var(--border);flex-shrink:0;}
  .history-title{font-size:9px;letter-spacing:2px;color:var(--text-dim);margin-bottom:5px;}
  .history-chips{display:flex;flex-wrap:wrap;gap:4px;min-height:20px;}
  .history-chip{padding:2px 8px;border-radius:10px;font-size:10px;font-family:'Share Tech Mono',monospace;}
  .history-chip.wrong{background:rgba(255,60,60,.15);border:1px solid rgba(255,60,60,.3);color:#ff8888;}
  .history-chip.hint{background:rgba(240,160,0,.15);border:1px solid rgba(240,160,0,.3);color:#f0c060;}
  .history-chip.right{background:rgba(0,255,136,.15);border:1px solid rgba(0,255,136,.3);color:#00ff88;}
  .score-bar-bg{height:3px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;margin-top:5px;}
  .score-bar-fill{height:100%;background:linear-gradient(to right,var(--accent2),var(--accent));border-radius:2px;transition:width .5s ease;}
  .score-val.up{color:#00ff88!important;}
  .score-val.down{color:#ff4444!important;}
  .tab-section-label{font-size:9px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border);}
  .success-burst{position:fixed;pointer-events:none;z-index:9999;top:0;left:0;width:100vw;height:100vh;animation:fadeOut 2.5s forwards;}
  @keyframes fadeOut{0%{opacity:1}80%{opacity:.8}100%{opacity:0}}
  .burst-dot{position:absolute;width:8px;height:8px;border-radius:50%;animation:burstAnim 2s ease-out forwards;}
  @keyframes burstAnim{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-300px) scale(0);opacity:0}}
  .cabinet-real-photo{width:100%;border-radius:4px;display:block;max-height:280px;object-fit:cover;object-position:center top;border:1px solid var(--border);filter:brightness(.88) contrast(1.05);}
  .cabinet-photo-caption{font-size:10px;color:var(--text-dim);text-align:center;margin-top:6px;letter-spacing:1px;}


  /* FIX 1 ── Remover fundo branco das fotos dos componentes */
  .comp-thumb-wrap {
    background: #d8e4f0 !important;
    border: none !important;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.3);
    overflow: hidden;
  }
  .comp-thumb {
    mix-blend-mode: multiply;
    filter: saturate(1.25) contrast(1.08) brightness(0.97);
    transition: filter .25s;
    width: 100%; height: 100%; object-fit: cover; object-position: center;
  }
  .comp-card:hover:not(.used) .comp-thumb {
    filter: saturate(1.5) contrast(1.1) brightness(1.02);
  }
  /* Fallback emoji centralizado quando imagem falha */
  .comp-thumb-fb {
    font-size: 26px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  }


  /* FIX 4 — LEDs com pulso animado */
  @keyframes ledPulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }
  .led-on  { animation: ledPulse 2s ease-in-out infinite; }
  .led-off { animation: none; }


  /* FIX 3 — hint popup definitivo */
  #hintPopup {
    position: fixed !important;
    z-index: 9999 !important;
    width: 272px;
    background: #0b1525;
    border: 1px solid #f0a000;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.8);
    top: 80px;
    right: 16px;
  }
  #hintPopup.hidden { display: none !important; }


  
  /* LED como div posicionado sobre a foto */
  #monLed {
    position: absolute;
    bottom: var(--led-bottom);
    right:  var(--led-right);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #051205;
    transition: background .3s, box-shadow .3s;
    z-index: 3;
  }
  /* Fallback SVG caso a foto não exista */
  .monitor-fallback-svg { display: none; }

  /* Tema light: tela com tom mais claro */
  [data-theme="light"] .monitor-screen-overlay { background: #e8f4e8; }
  [data-theme="light"] #svgScreen { color: #006622; }


  /* ── Melhorias visuais do tema light ── */

  /* Área principal: fundo limpo sem gradientes */
  [data-theme="light"] .left-panel,
  [data-theme="light"] .app-layout,
  [data-theme="light"] #app { background: var(--bg); }

  /* Header mais limpo */
  [data-theme="light"] header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  }

  /* Painel de sintomas */
  [data-theme="light"] .symptom-box {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  [data-theme="light"] .additional-info {
    background: rgba(0,102,170,.06) !important;
    border-left: 3px solid var(--accent) !important;
    color: var(--text-dim) !important;
  }

  /* Painel direito (tools) */
  [data-theme="light"] .tools-panel { background: #ffffff !important; }
  [data-theme="light"] .power-section {
    background: var(--panel2) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  [data-theme="light"] .tab-section-label {
    color: var(--text-dim) !important;
    border-bottom-color: var(--border) !important;
    letter-spacing: 2px;
  }
  [data-theme="light"] .history-bar {
    background: var(--panel2) !important;
    border-top: 1px solid var(--border) !important;
  }

  /* Botão power */
  [data-theme="light"] .power-btn {
    background: rgba(0,102,170,.08) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  [data-theme="light"] .power-btn.on {
    background: rgba(0,136,90,.12) !important;
    border-color: var(--accent2) !important;
    color: var(--accent2) !important;
    box-shadow: 0 0 12px rgba(0,136,90,.2) !important;
  }
  [data-theme="light"] .power-status.on { color: var(--accent2) !important; }
  [data-theme="light"] .power-status.off { color: var(--text-dim) !important; }

  /* Botão de navegação */
  [data-theme="light"] .defect-btn {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    color: var(--text-dim) !important;
  }
  [data-theme="light"] .defect-btn:hover:not(:disabled) {
    background: rgba(0,102,170,.06) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }

  /* Cards dos componentes */
  [data-theme="light"] .comp-card {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  }
  [data-theme="light"] .comp-card:hover:not(.used) {
    border-color: var(--accent) !important;
    box-shadow: 0 3px 10px rgba(0,102,170,.14) !important;
    transform: translateY(-2px) scale(1.02) !important;
  }
  [data-theme="light"] .comp-name { color: var(--text) !important; }

  /* Tabs */
  [data-theme="light"] .panel-tabs {
    background: var(--panel2) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  [data-theme="light"] .tab-btn { color: var(--text-dim) !important; background: transparent !important; }
  [data-theme="light"] .tab-btn.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
    background: rgba(0,102,170,.06) !important;
  }

  /* Score e progresso */
  [data-theme="light"] .score-val { color: #007740 !important; }
  [data-theme="light"] #scoreLabel { color: var(--text-dim); }

  /* Label de click */
  [data-theme="light"] .click-hint { color: var(--accent) !important; opacity: .8; }
  [data-theme="light"] .pc-label { color: var(--text-dim) !important; }

  /* Popups */
  [data-theme="light"] .modal-box {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  }
  [data-theme="light"] .modal-title.success { color: #006630 !important; }
  [data-theme="light"] .modal-title.neutral  { color: var(--accent) !important; }
  [data-theme="light"] .modal-title.error    { color: var(--danger) !important; }
  [data-theme="light"] .modal-feedback       { color: var(--text) !important; }
  [data-theme="light"] .modal-proc           { color: var(--accent) !important; }
  [data-theme="light"] .modal-close {
    border-color: var(--border) !important;
    color: var(--text-dim) !important;
    background: transparent !important;
  }
  [data-theme="light"] .modal-close:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }

  /* Dica */
  [data-theme="light"] .hint-btn {
    border-color: #9a6000 !important;
    color: #9a6000 !important;
    background: rgba(154,96,0,.06) !important;
  }
  [data-theme="light"] #hintPopup {
    background: #fffdf5 !important;
    border-color: #c89000 !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
  }
  [data-theme="light"] .hint-popup-title { color: #9a6000 !important; }
  [data-theme="light"] .hint-popup-text  { color: var(--text) !important; }
  [data-theme="light"] .hint-popup-close {
    border-color: var(--border) !important;
    color: var(--text-dim) !important;
  }

  /* Chips do histórico */
  [data-theme="light"] .history-chip.wrong { background: rgba(187,17,51,.08); border-color: rgba(187,17,51,.3); color: #aa0022; }
  [data-theme="light"] .history-chip.right { background: rgba(0,136,90,.08);  border-color: rgba(0,136,90,.3);  color: #006630; }
  [data-theme="light"] .history-chip.hint  { background: rgba(154,96,0,.08);  border-color: rgba(154,96,0,.3);  color: #7a5000; }

  /* Componente de detalhe popup */
  [data-theme="light"] .comp-detail-overlay { background: rgba(0,0,0,.45) !important; }
  [data-theme="light"] .comp-detail-photo   { background: #ffffff00 !important; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
  [data-theme="light"] .comp-detail-info-box {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
  }
  [data-theme="light"] .comp-detail-action-btn {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  [data-theme="light"] .comp-detail-action-btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
  }

  /* Botão de tema */
  [data-theme="light"] #themeToggleBtn {
    border-color: var(--border) !important;
    color: var(--text-dim) !important;
    background: #ffffff !important;
  }


  /* Timer de pontuação do caso */
  #casePoints {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 700;
    transition: color .3s;
  }
  .pts-high   { color: #00ff9d !important; }
  .pts-medium { color: #f0c800 !important; }
  .pts-low    { color: #ff6633 !important; }


  /* ── NAVBAR COM ÍCONE ─────────────────────────────────────────────────────── */
  .nav-icon {
    width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
    display: block; flex-shrink: 0;
  }
  .nav-icon-fb {
    width: 32px; height: 32px; border-radius: 6px; display: none;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    font-size: 18px;
  }
  .nav-brand {
    display: flex; align-items: center; gap: 10px;
  }
  .nav-brand-text {
    display: flex; flex-direction: column; gap: 1px;
  }
  .nav-brand-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px; color: var(--accent); letter-spacing: 2px;
    line-height: 1;
  }
  .nav-brand-sub {
    font-size: 9px; color: var(--text-dim); letter-spacing: 2px;
    text-transform: uppercase; line-height: 1;
  }


  /* ── LOGIN / RANKING ──────────────────────────────────────────────────────── */
  .login-overlay {
    position: fixed; inset: 0; background: rgba(5,10,20,.96);
    display: flex; align-items: center; justify-content: center;
    z-index: 900; backdrop-filter: blur(6px);
  }
  .login-box {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 36px 32px; width: min(420px, 90vw);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
  }
  .login-logo {
    text-align: center; margin-bottom: 24px;
  }
  .login-logo-icon {
    font-size: 40px; display: block; margin-bottom: 8px;
  }
  .login-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px; color: var(--accent); letter-spacing: 3px;
    text-align: center; text-transform: uppercase;
  }
  .login-sub {
    font-size: 10px; color: var(--text-dim); letter-spacing: 2px;
    text-align: center; margin-top: 4px;
  }
  .login-field {
    margin-top: 18px;
  }
  .login-label {
    font-size: 9px; letter-spacing: 2px; color: var(--text-dim);
    text-transform: uppercase; display: block; margin-bottom: 6px;
  }
  .login-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px; background: var(--panel2);
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-family: 'Exo 2', sans-serif;
    font-size: 13px; outline: none; transition: border-color .2s;
  }
  .login-input:focus { border-color: var(--accent); }
  .login-btn {
    width: 100%; margin-top: 22px; padding: 12px;
    background: var(--accent); border: none; border-radius: 6px;
    color: #000; font-family: 'Exo 2', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px;
    cursor: pointer; text-transform: uppercase; transition: opacity .2s;
  }
  .login-btn:hover { opacity: .85; }
  .login-btn:disabled { opacity: .4; cursor: not-allowed; }
  .login-err {
    font-size: 11px; color: #ff6644; text-align: center;
    margin-top: 10px; min-height: 16px;
  }
  .login-ranking-link {
    text-align: center; margin-top: 14px;
    font-size: 11px; color: var(--text-dim);
  }
  .login-ranking-link a {
    color: var(--accent2); cursor: pointer; text-decoration: none;
  }
  .login-ranking-link a:hover { text-decoration: underline; }

  /* ── TELA DE RANKING ─────────────────────────────────────────────────────── */
  .ranking-overlay {
    position: fixed; inset: 0; background: rgba(5,10,20,.97);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; z-index: 800;
    backdrop-filter: blur(6px);
  }
  .ranking-box {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; width: min(680px, 92vw);
    max-height: 85vh; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.7);
  }
  .ranking-header {
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  }
  .ranking-header h2 {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px; color: var(--accent); letter-spacing: 3px;
    text-transform: uppercase; margin: 0; flex: 1;
  }
  .ranking-close-btn {
    padding: 6px 14px; background: transparent;
    border: 1px solid var(--border); color: var(--text-dim);
    font-family: 'Exo 2', sans-serif; font-size: 10px;
    letter-spacing: 1px; cursor: pointer; border-radius: 4px; transition: .2s;
  }
  .ranking-close-btn:hover { border-color: var(--accent); color: var(--accent); }
  .ranking-list {
    overflow-y: auto; flex: 1; padding: 12px 20px;
  }
  .ranking-row {
    display: grid; grid-template-columns: 40px 1fr 140px 80px 60px 60px;
    align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 6px; margin-bottom: 4px;
    border: 1px solid transparent; transition: background .15s;
  }
  .ranking-row:hover { background: var(--panel2); }
  .ranking-row.top1 { background: rgba(255,215,0,.08); border-color: rgba(255,215,0,.2); }
  .ranking-row.top2 { background: rgba(180,180,200,.06); border-color: rgba(180,180,200,.15); }
  .ranking-row.top3 { background: rgba(176,120,60,.07); border-color: rgba(176,120,60,.15); }
  .ranking-row.mine  { background: rgba(0,212,255,.06); border-color: rgba(0,212,255,.2); }
  .rank-pos {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px; font-weight: 700; text-align: center;
  }
  .rank-name { font-size: 13px; color: var(--text-bright); font-weight: 600; }
  .rank-id   { font-size: 10px; color: var(--text-dim); }
  .rank-score {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px; font-weight: 700; color: var(--accent2);
    text-align: right;
  }
  .rank-pct  { font-size: 11px; color: var(--text-dim); text-align: right; }
  .rank-date { font-size: 9px; color: var(--text-dim); text-align: center; }
  .ranking-header-row {
    display: grid; grid-template-columns: 40px 1fr 140px 80px 60px 60px;
    gap: 8px; padding: 6px 12px; margin-bottom: 6px;
  }
  .ranking-header-row span {
    font-size: 9px; letter-spacing: 2px; color: var(--text-dim);
    text-transform: uppercase;
  }
  .ranking-empty {
    text-align: center; padding: 40px; color: var(--text-dim); font-size: 13px;
  }
  .ranking-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }
  .ranking-status { font-size: 10px; color: var(--text-dim); }
  .ranking-btn-refresh {
    padding: 6px 14px; background: transparent;
    border: 1px solid var(--accent2); color: var(--accent2);
    font-family: 'Exo 2', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: 1px; cursor: pointer;
    border-radius: 4px; transition: .2s;
  }
  .ranking-btn-refresh:hover { background: rgba(123,47,255,.1); }

  /* Notificação de score salvo */
  .score-saved-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #0d2a1a; border: 1px solid #00cc66;
    border-radius: 8px; padding: 12px 20px;
    font-size: 12px; color: #00ff9d; letter-spacing: 1px;
    z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,.5);
    display: none; white-space: nowrap;
  }


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE — Tablet e Mobile
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TABLET (≤ 1024px) ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .main-grid { grid-template-columns: 1fr 300px; }
}

/* ── MOBILE + TABLET PEQUENO (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {

  /* Layout principal: empilhar coluna */
  .main-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
  }

  /* Header compacto */
  header {
    padding: 8px 12px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-brand-title { font-size: 11px !important; letter-spacing: 1px !important; }
  .nav-brand-sub   { display: none; }
  .nav-icon, .nav-icon-fb { width: 26px !important; height: 26px !important; }
  .case-counter    { font-size: 10px !important; }
  #themeToggleBtn span:last-child { display: none; } /* esconder label LIGHT */

  /* PC scene: imagens menores */
  .pc-scene { gap: 12px; padding: 10px; }
  .monitor-screen-area { width: 140px !important; height: 95px !important; }
  .monitor-svg         { width: 160px !important; }
  .monitor-wrap img    { max-width: 120px; }
  .tower-wrap img, .cabinet-img { max-height: 160px !important; max-width: 120px !important; }
  .section-label       { font-size: 9px !important; padding: 6px 12px !important; }
  .pc-label            { font-size: 9px !important; }

  /* Symptom box: mais compacto */
  .symptom-box   { padding: 10px 12px !important; margin: 8px !important; }
  .symptom-title { font-size: 11px !important; }
  .symptom-text  { font-size: 11px !important; line-height: 1.5 !important; }
  .additional-info { font-size: 10px !important; }

  /* Hints section */
  #hintsSection { margin: 0 8px 8px !important; }
  #hintsSection > div:first-child { font-size: 8px !important; }

  /* Painel direito: largura total, altura automática */
  .tools-panel {
    max-height: none !important;
    overflow-y: visible !important;
    border-top: 2px solid var(--border);
  }

  /* Power section */
  .power-section { padding: 8px 10px !important; gap: 8px !important; flex-wrap: wrap; }
  .power-btn     { width: 34px !important; height: 34px !important; font-size: 16px !important; }
  .power-status  { font-size: 11px !important; }
  #scoreVal      { font-size: 18px !important; }
  #casePointsMain { font-size: 18px !important; }

  /* Score bar */
  #caseNumBar, #totalCasesBar { font-size: 10px !important; }

  /* Navegação PULAR */
  .defect-nav   { padding: 6px 10px !important; }
  #defectNum    { font-size: 10px !important; }

  /* Grid de componentes: 4 colunas */
  .hw-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 6px !important;
  }

  /* Cards de componente: menores */
  .comp-card {
    padding: 6px 4px !important;
  }
  .comp-card img {
    width: 36px !important;
    height: 36px !important;
  }
  .comp-card-name {
    font-size: 8px !important;
    margin-top: 3px !important;
  }

  /* Tabs HW/SW */
  .panel-tabs    { padding: 0 !important; }
  .panel-tab-btn { font-size: 10px !important; padding: 8px 10px !important; }

  /* Histórico de tentativas */
  #historyChips  { padding: 6px 10px !important; gap: 4px !important; }

  /* Modais: largura total */
  .modal-box     { width: 95vw !important; max-width: none !important;
                   padding: 16px 14px !important; }
  .endgame       { max-height: 95vh !important; overflow-y: auto !important; }

  /* Tela final: stats 2 colunas */
  #endBox > div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grade de casos: 6 colunas */
  #endCasesGrid { grid-template-columns: repeat(6, 1fr) !important; }

  /* Ações tela final: coluna */
  #endBox > div:last-child { flex-direction: column !important; }

  /* Ranking: tabela simplificada */
  .ranking-row {
    grid-template-columns: 32px 1fr 70px 50px !important;
  }
  .ranking-row div:nth-child(3) { display: none !important; }
  .ranking-header-row span:nth-child(3) { display: none !important; }
  .ranking-row .rank-date { display: none !important; }
  .ranking-header-row {
    grid-template-columns: 32px 1fr 70px 50px !important;
  }
  .ranking-header-row span:last-child { display: none !important; }

  /* Login */
  .login-box { padding: 24px 18px !important; }

  /* Hint cards: menores no mobile */
  #hintsSection .hint-card-name { font-size: 9px !important; }
  #hintsSection .hint-card-desc { display: none !important; }
  #hintsSection > div:nth-child(2) { gap: 6px !important; }

  /* Popup de resultado de dica */
  #hintResultBox { width: min(340px, 94vw) !important; }
}

/* ── MOBILE PEQUENO (≤ 480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Grid 3 colunas no mobile pequeno */
  .hw-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* PC scene: side by side menor */
  .monitor-screen-area { width: 110px !important; height: 75px !important; }

  /* Score compacto */
  .power-section { padding: 6px 8px !important; }
  #scoreVal { font-size: 16px !important; }

  /* Hint cards: sem descrição, só ícone + nome + custo */
  #hintsSection { margin: 0 4px 4px !important; }

  /* Ranking: 2 colunas úteis */
  .ranking-row {
    grid-template-columns: 28px 1fr 65px !important;
  }
  .ranking-row .rank-pct,
  .ranking-row .rank-date { display: none !important; }
  .ranking-header-row {
    grid-template-columns: 28px 1fr 65px !important;
  }
  .ranking-header-row span:nth-child(n+4) { display: none !important; }
}