:root{
      --ink:#153040;
      --muted:#667f8f;
      --muted-2:#8da0ac;
      --line:#d9e3e8;
      --bg:#f4f7f8;
      --panel:#ffffff;
      --soft:#f8fafb;
      --soft-2:#eef3f5;
      --orange:#f16722;
      --orange-2:#ffefe7;
      --shadow:0 10px 28px rgba(16,47,61,.045);
      --deer:#8ea7a7;
      --rer:#9fb7b7;
      --delgaz:#b7c6c1;
      --deo:#d5ddd6;
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:Inter,Arial,sans-serif;
      background:var(--bg);
      color:var(--ink);
      line-height:1.55;
    }
    .page{
      max-width:1160px;
      margin:0 auto;
      padding:26px 20px 54px;
    }
    .lead{
      margin:0 0 20px;
      color:#627b8a;
      font-size:14px;
    }
    .grid{
      display:grid;
      grid-template-columns:minmax(0,1.58fr) minmax(340px,1fr);
      gap:18px;
      align-items:start;
    }
    .card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    /* stânga */
    .map-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:16px;
      padding:20px 22px 16px;
      border-bottom:1px solid var(--line);
    }
    .map-header h2,
    .side h2,
    .operator-box h3,
    p{margin-top:0}
    .map-header h2{
      margin-bottom:3px;
      font-size:18px;
      line-height:1.25;
      letter-spacing:-.02em;
      color: var(--orange);
    }
    .map-sub{
      margin:0;
      color:var(--muted);
      font-size:12px;
    }
    .header-tools{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 14px;
      background:var(--soft-2);
      border-radius:999px;
      font-size:11px;
      font-weight:600;
      color:#627987;
      white-space:nowrap;
    }
    .refresh-btn{
      appearance:none;
      border:1px solid #cfdce2;
      background:#fff;
      color:#26495c;
      border-radius:10px;
      padding:10px 14px;
      font:700 13px Inter,Arial,sans-serif;
      cursor:pointer;
      transition:.18s ease;
    }
    .refresh-btn:hover{border-color:var(--orange);background:#fff8f4}

    .map-stage{
      position:relative;
      min-height:352px;
      background:linear-gradient(180deg,#fbfcfd 0%,#f7fafb 100%);
      border-bottom:1px solid var(--line);
      overflow:hidden;
    }
    #mapWrap{
      height:100%;
      min-height:352px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px 24px 20px;
    }
    .map-frame{
      width:100%;
      max-width:510px;
      height:100%;
      min-height:250px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto;
    }
    #romaniaSvg{
      width:100%;
      max-width:410px;
      max-height:250px;
      display:block;
      overflow:visible;
      filter:drop-shadow(0 2px 0 rgba(255,255,255,.2));
    }
    #romaniaSvg path{
      cursor:pointer;
      stroke:#ffffff;
      stroke-width:1.55;
      stroke-linejoin:round;
      stroke-linecap:round;
      vector-effect:non-scaling-stroke;
      shape-rendering:geometricPrecision;
      transition:fill .15s ease,opacity .15s ease,filter .15s ease;
      transform-origin:center;
    }
    /* SVG paths are keyboard-focusable; suppress the browser's rectangular focus ring. */
    #romaniaSvg path:focus,
    #romaniaSvg path:focus-visible{
      outline:none !important;
    }
    #romaniaSvg path:focus-visible{
      stroke:#f16722 !important;
      stroke-width:2.5 !important;
    }
    #romaniaSvg path:hover{
      filter:brightness(.97);
    }
    #romaniaSvg path.is-selected{
      stroke:#ffffff;
      stroke-width:1.85;
      filter:drop-shadow(0 0 0.9px rgba(207,78,17,.9)) drop-shadow(0 0 1.2px rgba(207,78,17,.45));
    }
    #mapState{
      position:absolute;
      left:18px;
      bottom:14px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:10px;
      padding:7px 12px;
      color:#728895;
      font-size:11px;
      pointer-events:none;
    }
    #mapStatus{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      text-align:center;
      padding:20px;
      background:rgba(248,250,251,.96);
      color:#607684;
      font-size:13px;
      z-index:5;
    }
    #mapStatus[hidden]{display:none}
    .map-tip{
      position:absolute;
      z-index:7;
      pointer-events:none;
      display:none;
      background:#173947;
      color:#fff;
      border-radius:10px;
      padding:8px 11px;
      font-size:11px;
      font-weight:600;
      line-height:1.2;
      white-space:nowrap;
      box-shadow:0 10px 24px rgba(14,40,52,.14);
    }

    .operators{
      padding:18px 18px 14px;
      background:#fff;
    }
    .operators h3{
      margin:0 0 12px;
      font-size:12px;
      color:#5a7483;
      letter-spacing:.04em;
      font-weight:800;
    }
    .operator-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:10px;
    }
    .operator-chip{
      appearance:none;
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      padding:16px 10px 14px;
      min-height:108px;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      transition:.18s ease;
    }
    .operator-chip:hover{
      border-color:#cfdae0;
      background:#fcfdfd;
      transform:translateY(-1px);
    }
    .operator-chip.is-active{
      border-color:#f0b08b;
      background:#fff8f4;
      box-shadow:0 0 0 1px rgba(241,103,34,.14) inset;
    }
    .operator-chip img{
      display:block;
      max-width:148px;
      height:46px;
      object-fit:contain;
    }
    .operator-chip span{
      display:block;
      text-align:center;
      font-size:11px;
      font-weight:600;
      color:#5f7785;
      line-height:1.25;
    }
    .source-links{
      margin-top:12px;
      font-size:11px;
      color:#708490;
    }
    .source-links a,
    .source a{
      color:#335f79;
      text-decoration:underline;
      text-underline-offset:2px;
    }

    /* dreapta */
    .side{
      padding:22px 22px 20px;
    }
    .eyebrow{
      margin:0 0 14px;
      color:var(--orange);
      font-size:11px;
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .side h2{
      margin-bottom:14px;
      font-size:22px;
      line-height:1.22;
      letter-spacing:-.03em;
    }
    .side .desc{
      margin:0 0 20px;
      color:var(--muted);
      font-size:12px;
    }
    .field-label{
      display:block;
      margin-bottom:8px;
      font-size:11px;
      font-weight:800;
      color:#183342;
    }
    select{
      width:100%;
      height:48px;
      border:1px solid #cfdde3;
      border-radius:12px;
      padding:0 16px;
      background:#fff;
      color:var(--ink);
      font:500 14px Inter,Arial,sans-serif;
      outline:none;
    }
    select:focus-visible,
    .refresh-btn:focus-visible,
    .operator-chip:focus-visible,
    .cta:focus-visible,
    a:focus-visible{
      outline:3px solid #f8c5a8;
      outline-offset:2px;
    }
    .operator-box{
      margin-top:18px;
      border:1px solid var(--line);
      border-radius:16px;
      padding:18px;
      background:linear-gradient(180deg,#fff 0%,#fcfdfd 100%);
      min-height:270px;
    }
    .operator-box .top-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
      min-height:54px;
    }
    .operator-logo{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      min-height:72px;
      min-width:205px;
      max-width:270px;
      padding:10px 14px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
    }
    .operator-logo[hidden]{display:none}
    .operator-logo img{
      display:block;
      max-width:205px;
      max-height:48px;
      object-fit:contain;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 11px;
      background:var(--soft-2);
      color:#5f7886;
      border-radius:999px;
      font-size:10px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .operator-box h3{
      margin-bottom:10px;
      font-size:18px;
      line-height:1.3;
      letter-spacing:-.02em;
    }
    .operator-meta{
      color:var(--muted);
      font-size:12px;
      margin-bottom:18px;
    }
    .meta-list{
      margin:0 0 18px;
      padding:0;
      list-style:none;
      display:grid;
      gap:8px;
    }
    .meta-item{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#506a79;
      font-size:12px;
    }
    .meta-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#9ab4b2;
      margin-top:6px;
      flex:none;
    }
    .cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 16px;
      border-radius:11px;
      background:var(--orange);
      color:#fff;
      font-weight:800;
      font-size:13px;
      text-decoration:none;
      transition:.18s ease;
    }
    .cta:hover{background:#dc591c}
    .cta[hidden]{display:none}
    .note{
      margin-top:18px;
      padding:16px;
      border-radius:14px;
      background:#eef3f5;
      color:#57707e;
      font-size:12px;
    }
    .note strong{
      display:block;
      margin-bottom:6px;
      color:#446270;
    }
    .source{
      margin-top:18px;
      font-size:12px;
    }
    .refresh-line{
      margin-top:14px;
      display:flex;
      align-items:center;
      gap:8px;
      color:#69808d;
      font-size:12px;
    }
    .refresh-line .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#73a488;
      flex:none;
    }

    @media (max-width: 980px){
      .grid{grid-template-columns:1fr}
      .map-stage,#mapWrap{min-height:360px}
      .map-frame{max-width:560px}
      #romaniaSvg{max-width:430px;max-height:270px}
    }
    @media (max-width: 640px){
      .page{padding:18px 12px 34px}
      .map-header,.side{padding-left:16px;padding-right:16px}
      .map-header{flex-direction:column;align-items:flex-start}
      .header-tools{justify-content:flex-start}
      .map-stage,#mapWrap{min-height:300px}
      #mapWrap{padding:14px 10px 18px}
      .map-frame{max-width:100%}
      #romaniaSvg{max-width:325px;max-height:205px}
      .operator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .operator-chip{min-height:92px}
      .operator-chip img{max-width:118px;height:36px}
      .operator-box{min-height:auto}
      .operator-logo{min-width:0;width:100%;max-width:100%}
      .operator-box .top-row{flex-direction:column;align-items:flex-start}
    }

/* Elimina complet dreptunghiul nativ de focus din Chromium pe SVG. */
#romaniaSvg, #romaniaSvg path, #romaniaSvg path:focus, #romaniaSvg path:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
#romaniaSvg path:focus-visible {
  stroke: #f16722 !important;
  stroke-width: 2.2 !important;
}

/* Harta SVG precisă, bazată pe fișierul furnizat. */
#romaniaSvg { width:100%; height:auto; max-width:475px; max-height:292px; overflow:visible; filter:none; }
#romaniaSvg path { fill:#d2dddc; stroke:#fff; stroke-width:.8px; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; cursor:pointer; outline:none !important; filter:none !important; transition:fill .14s ease, opacity .14s ease; }
#romaniaSvg path:hover { stroke:#fff; stroke-width:1.25px; filter:none !important; }
#romaniaSvg path.is-selected { stroke:#fff; stroke-width:1.5px; filter:none !important; }
#romaniaSvg path:focus, #romaniaSvg path:focus-visible { outline:none!important; box-shadow:none!important; stroke:#fff!important; stroke-width:1.5px!important; }
#romaniaSvg .county-code { fill:#fff; opacity:.88; font:600 7px Inter,Arial,sans-serif; pointer-events:none; user-select:none; text-anchor:middle; }
@media(max-width:640px) { #romaniaSvg{ max-width:365px; max-height:235px } #romaniaSvg .county-code{font-size:6px} }

/* Evidențiere operatori/județ — prioritate corectă pentru SVG inline */
#romaniaSvg path { fill:var(--county-color,#a6bdbd); stroke:#fff; stroke-width:.85px; }
#romaniaSvg path.is-selected { fill:#f16722!important; stroke:#fff!important; stroke-width:1.8px!important; }
#romaniaSvg path:hover:not(.is-selected) { filter:brightness(.93)!important; }
.operator-chip.is-active {border-color:#f16722; background:#fff4eb; box-shadow:inset 0 0 0 1px #f16722;}


/* NOVA - carduri aliniate în ambele stări, fără spații albe necontrolate */
@media (min-width:981px){
  .grid{align-items:stretch;grid-template-columns:minmax(0,1.58fr) minmax(340px,1fr);gap:18px}
  .grid > .card{height:100%;min-width:0}
  .grid > .card:first-child{display:flex;flex-direction:column}
  .map-header,.operators{flex:0 0 auto}
  .map-stage{flex:1 1 auto;min-height:335px;display:flex;flex-direction:column}
  #mapWrap{flex:1 1 auto;min-height:335px;height:auto;display:flex;justify-content:center;align-items:center}
  .map-frame{width:100%;max-width:565px;min-height:0;display:flex;align-items:center;justify-content:center}
  #romaniaSvg{width:100%;max-width:505px;max-height:340px;height:auto}
  .side{display:flex;flex-direction:column;height:100%}
  .side .operator-box{flex:0 0 auto}
  .side .note{margin-top:auto}
  .side .refresh-line{flex:0 0 auto}
}
@media (max-width:980px){
  .grid{align-items:start}
  .grid>.card{height:auto}
  .map-stage{min-height:320px}
}