:root{
      --bg:#070b12; --card:#0c1220; --text:#e7eefc; --muted:#93a4c7; --line:#1f2b44;
      --ok:#3ddc97; --bad:#ff5d5d; --warn:#ffd166; --blue:#5aa9ff;
      --shadow: 0 12px 30px rgba(0,0,0,.35); --r: 16px;
      --wrapInset: 36px; /* wrap horizontal padding (18px * 2) */
    }
    *{box-sizing:border-box}
    html,body{width:100%;scrollbar-gutter:stable both-edges}
    body{margin:0;background:radial-gradient(1000px 600px at 30% -10%, #192a52 0%, transparent 60%), var(--bg);
      color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;overflow-x:hidden;overflow-y:scroll;}
    a{color:inherit;text-decoration:none} a:hover{text-decoration:underline}
    .wrap{width:1366px;max-width:1366px;min-width:1366px;margin:0 auto;padding:18px}
    header{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
    header.sticky{
      position:fixed; top:0; left:50%; z-index:50;
      /* Match the inner content width of .wrap (wrap width minus horizontal padding) */
      width:calc(1366px - var(--wrapInset));
      background:linear-gradient(180deg, rgba(7,11,18,.9), rgba(7,11,18,.75));
      backdrop-filter:blur(10px);
      padding:12px 12px 10px;
      margin:0 0 14px;
      border-radius:18px;
      border:1px solid rgba(31,43,68,.6);
      box-shadow:0 12px 30px rgba(0,0,0,.35);
      transform: translateX(-50%) translateZ(0);
    }
    .brand{display:flex;align-items:center;gap:10px}
    .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#5aa9ff,#3ddc97);box-shadow:var(--shadow)}
    h1{margin:0;font-size:16px} .sub{color:var(--muted);font-size:12px;margin-top:2px}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);font-variant-numeric:tabular-nums}
    .pill.muted{opacity:.45}
    .pill.ok{border-color:rgba(61,220,151,.4);color:var(--ok)}
    .pill.bad{border-color:rgba(255,93,93,.45);color:var(--bad)}
    .pill.warn{border-color:rgba(255,209,102,.45);color:var(--warn)}
    .pill.blue{border-color:rgba(90,169,255,.45);color:var(--blue)}
    .flowPills .pill{font-size:13px;padding:5px 8px;gap:6px}
    details > summary{list-style:none}
    details > summary::-webkit-details-marker{display:none}
    .debugGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .debugGrid .item{height:100%}
    .debugGrid pre{max-height:220px;overflow:auto}

    /* Boot overlay (admin initial load) */
    #bootOverlay{
      position:fixed; inset:0; z-index:980;
      background:rgba(7,11,18,.55);
      backdrop-filter: blur(6px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
    }
    #bootOverlay .bootBox{
      width:min(560px, 92vw);
      border:1px solid rgba(31,43,68,.55);
      border-radius:18px;
      background:rgba(12,18,32,.55);
      box-shadow:0 18px 40px rgba(0,0,0,.40);
      padding:14px 14px 12px;
      max-height:min(72vh, 620px);
      overflow:hidden;
    }
    #bootOverlay .bootHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
    #bootOverlay .bootBar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
    #bootOverlay .bootBar > div{height:100%;width:0%;background:linear-gradient(90deg, rgba(90,169,255,.0), rgba(90,169,255,.7), rgba(61,220,151,.7));transition:width .22s ease}
    #bootLog{
      margin-top:10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:11px;
      line-height:1.35;
      color:#cfe0ff;
      max-height: min(50vh, 420px);
      overflow:auto;
      border-radius:12px;
      padding:8px 10px;
      background:rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.06);
      display:flex;
      flex-direction:column;
      gap:6px;
      white-space:normal;
      word-break:break-word;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    #bootLog::-webkit-scrollbar{width:0;height:0}
    .bootLine{display:flex;gap:8px;align-items:flex-start}
    .bootIcon{
      width:16px;height:16px;flex:0 0 16px;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:50%;
      font-size:11px;line-height:1;
      border:1px solid rgba(255,255,255,.14);
      color:#cfe0ff;
      background:rgba(255,255,255,.02);
      margin-top:1px;
    }
    .bootLine.ok .bootIcon{border-color:rgba(61,220,151,.5);color:#3ddc97;background:rgba(61,220,151,.08)}
    .bootLine.bad .bootIcon{border-color:rgba(255,93,93,.55);color:#ff5d5d;background:rgba(255,93,93,.08)}
    .bootLine.warn .bootIcon{border-color:rgba(255,209,102,.55);color:#ffd166;background:rgba(255,209,102,.08)}
    .bootLine.pending .bootIcon{border-color:rgba(90,169,255,.5);color:#5aa9ff;background:rgba(90,169,255,.08)}
    .bootLine.info .bootIcon{opacity:.8}
    .bootTime{color:#8ea4c8;min-width:38px}
    .bootText{color:#d9e5ff}
    .apMarkerSel{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
    @keyframes apBlink{0%,49%{opacity:1}50%,100%{opacity:.25}}
    @keyframes apLiveGlow{
      0%,100%{box-shadow:0 0 0 rgba(255,59,59,.0);border-color:rgba(255,59,59,.35)}
      50%{box-shadow:0 0 16px rgba(255,59,59,.35);border-color:rgba(255,59,59,.55)}
    }
    .apCardLive{border-color:rgba(255,59,59,.35);animation:apLiveGlow 2s ease-in-out infinite}
    @keyframes hpLiveGlow{
      0%,100%{box-shadow:0 0 0 rgba(61,220,151,.0);border-color:rgba(61,220,151,.35)}
      50%{box-shadow:0 0 16px rgba(61,220,151,.35);border-color:rgba(61,220,151,.55)}
    }
    .hpCardLive{border-color:rgba(61,220,151,.35);animation:hpLiveGlow 2s ease-in-out infinite}
    .apTickStrip{
      position:relative;
      height:1px;
      margin:6px 0 0 0;
      background:rgba(255,59,59,.25);
      border-radius:999px;
      overflow:hidden;
    }
    .apTickStrip > span{
      position:absolute; right:0; top:-1px; height:1px; width:0%;
      background:rgba(255,59,59,.85);
      box-shadow:0 0 6px rgba(255,59,59,.35);
      border-radius:999px;
    }
    #apTimeline{scrollbar-width:none;-ms-overflow-style:none}
    #apTimeline::-webkit-scrollbar{width:0;height:0}
    .apHistoryWrap{max-height:240px;overflow:auto;padding-right:6px;margin-top:10px;scrollbar-width:none;-ms-overflow-style:none}
    .apHistoryWrap::-webkit-scrollbar{width:0;height:0}
    .apTopRow{display:flex;flex-direction:column;gap:6px}
    .apTopRow .row{gap:8px;flex-wrap:wrap;align-items:center}
    .apTopRow > *{white-space:nowrap;flex:0 0 auto}
    .apTopRow input{width:56px}
    .apTopCard{background:rgba(20,27,45,.55)}
    .apChipsRow{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow-x:auto;max-width:100%}
    .ahRow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:nowrap}
    .ahControls{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;border:1px solid rgba(90,169,255,.4);border-radius:12px;padding:6px 8px;background:rgba(90,169,255,.04);width:fit-content}
    .ahSummary{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
    .ahSummary .pill{font-size:12px}
    .schAdvancedRow{display:flex;gap:10px;flex-wrap:nowrap;align-items:center;overflow-x:auto}
    .schAdvancedRow .col{min-width:120px}
    .schAdvancedRow .muted{white-space:nowrap}
    @media (max-width: 1200px){ .apHideLg{display:none!important} }
    @media (max-width: 980px){ .apHideMd{display:none!important} }
    @media (max-width: 860px){ .apHideSm{display:none!important} }
    .pill.loading{animation:pulse 1.5s ease-in-out infinite}
    .grid{display:grid;grid-template-columns:390px 1fr;gap:14px}
    @media (max-width: 980px){ .grid{grid-template-columns:1fr} }
    /* Sticky left panel (like top bar) */
    #leftPanel{
      position: sticky;
      top: 92px; /* below header.sticky */
      align-self: start;
      z-index: 30;
      max-height: calc(100vh - 110px);
      overflow: auto;
    }
    /* Keep sticky on mobile too; panel can naturally scroll if it becomes taller than viewport. */

    /* Connection row: keep actions on the right, reduce wrapping */
    .connRow{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
    .connRow input{ flex:1 1 0; min-width:0; }
    #apiBase{ min-width: 0; }
    .connActions{ display:flex; gap:8px; flex:0 0 auto; margin-left:auto; }
    .connActions button{ white-space:nowrap; }
    .card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
    .hd{padding:12px 12px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
    .bd{padding:12px}
    .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    .col{display:flex;flex-direction:column;gap:6px}
    .muted{color:var(--muted)}
    input,select,textarea{ background:#081025;color:var(--text);border:1px solid var(--line); border-radius:12px;padding:10px 10px;outline:none }
    textarea{min-height:94px;resize:vertical}
    #bulkImportText::placeholder{color:rgba(231,238,252,.45)}
		.country-controls{
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.country-controls select{
			flex: 1;          /* combo genişlesin */
			min-width: 0;     /* taşma sorunlarını önler */
		}


		
		.old-actions{ display:none; }
		
		.icon-btn {
			width: 34px;
			height: 34px;
			border-radius: 10px;
			font-size: 16px;
			line-height: 1;
		}

		.icon-btn svg {
			width: 18px;
			height: 18px;
		}
		
		.tag.latency.low {
			background: rgba(46, 204, 113, 0.15);
			color: #2ecc71;
			border: 1px solid rgba(46, 204, 113, 0.35);
		}

		.tag.latency.mid {
			background: rgba(241, 196, 15, 0.15);
			color: #f1c40f;
			border: 1px solid rgba(241, 196, 15, 0.35);
		}

		.tag.latency.high {
			background: rgba(231, 76, 60, 0.15);
			color: #e74c3c;
			border: 1px solid rgba(231, 76, 60, 0.35);
		}



		
		
		
		.item > .head {
			background: linear-gradient(180deg, rgba(90,169,255,.08), rgba(0,0,0,0));
			border-bottom: 1px solid rgba(90,169,255,.25);
			padding: 12px 14px;
			font-weight: 700;
			letter-spacing: .2px;
		}

		button{
			background:#0b1a35;
			color:var(--text);
			border:1px solid var(--line);
			border-radius:12px;

			height:36px;
			padding:0 14px;

			cursor:pointer;
			display:inline-flex;
			align-items:center;
			justify-content:center;

			line-height:1; /* ✅ 36px yerine 1 daha stabil */
		}
		
		.actions{
			display:flex;
			gap:8px;
			align-items:center;
			justify-content:flex-end;
			flex-wrap:nowrap;
		}

		button.mini{
			height:32px;
			padding:0 12px;
			border-radius:10px;
			font-size:13px;
		}

		button.icon{
			width:38px;
			padding:0;
			justify-content:center;
			font-size:15px;
		}

		.actions button.mini.icon{
			height:32px;
			width:38px;
			font-size:15px;
		}
		
		.toolbar-row{
			justify-content:space-between;
			align-items:center;     
			flex-wrap:nowrap;
		}

		.toolbar{
			display:flex;
			gap:10px;
			align-items:center;
			flex-wrap:nowrap;
		}


		.toolbar button {
			height: 36px;
			padding: 0 14px;
			line-height: 1;
			border-radius: 12px;
		}
		
		.tag.fresh {
			background: rgba(52, 152, 219, 0.15);
			color: #3498db;
			border: 1px solid rgba(52, 152, 219, 0.35);
		}

		.tag.ok {
			background: rgba(46, 204, 113, 0.15);
			color: #2ecc71;
		}

		.tag.warn {
			background: rgba(241, 196, 15, 0.15);
			color: #f1c40f;
		}

		.tag.bad {
			background: rgba(231, 76, 60, 0.15);
			color: #e74c3c;
}



    button:hover{filter:brightness(1.08)}
    button.primary{background:linear-gradient(135deg, #2145a8, #0b1a35);border-color:#2b4ea8}
    button.danger{border-color:rgba(255,93,93,.55)}
    button.ghost{background:rgba(255,255,255,.02)}
    button:disabled{opacity:.55;cursor:not-allowed}
    .tabs{display:flex;gap:8px;flex-wrap:wrap}
    .tab{padding:8px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;user-select:none}
    .tab.active{border-color:rgba(90,169,255,.55)}
    .tab.main{padding:10px 16px;font-size:15px;font-weight:600}
    .tab.secondary{font-size:13px;opacity:0.8}
    .devToggle{border-color:rgba(90,169,255,.4);color:var(--blue);background:rgba(90,169,255,.06)}

    /* Output showcase */
    .outputShowcase{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media (max-width: 1100px){ .outputShowcase{grid-template-columns:1fr 1fr} }
    @media (max-width: 820px){ .outputShowcase{grid-template-columns:1fr} }
    .previewCard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.2)}
    .previewHead{padding:8px 10px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12px}
    .previewFrame{height:220px;display:flex;align-items:center;justify-content:center}
    .previewFrame.tall{height:300px}
    .previewFrame.wide{height:180px}
    .theme-default{background:linear-gradient(135deg,#0b1221,#0f1c33)}
    .theme-light{background:linear-gradient(135deg,#f4f7ff,#e8efff)}
    .theme-contrast{background:linear-gradient(135deg,#0b0b0b,#1b1b1b)}
    .theme-sunrise{background:linear-gradient(135deg,#3a1c71,#d76d77,#ffaf7b)}
    .list{display:flex;flex-direction:column;gap:8px}
    .item{padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.18)}
    .item.flat{padding:0;border:none;background:transparent;box-shadow:none}
    .item .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .k{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}
    .tag{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
    .tag.ok{border-color:rgba(61,220,151,.45);color:var(--ok)}
    .tag.warn{border-color:rgba(255,209,102,.45);color:var(--warn)}
    .tag.bad{border-color:rgba(255,93,93,.45);color:var(--bad)}
    .tag.blue{border-color:rgba(90,169,255,.45);color:var(--blue)}
    .apOffDot{
      display:inline-block;
      width:8px;height:8px;border-radius:50%;
      background: rgba(255,93,93,.95);
      box-shadow: 0 0 0 2px rgba(255,93,93,.18);
      margin-left:6px;transform: translateY(-1px);
    }
    pre{white-space:pre-wrap;word-break:break-word;background:#070c16;border:1px solid var(--line);
      border-radius:14px;padding:10px;color:#dce6ff;margin:0}
    .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .stack{display:grid;grid-template-columns:1fr;gap:24px}
    @media (max-width: 980px){ .two{grid-template-columns:1fr} }
    .help{font-size:12px;color:var(--muted)}
    .section-title{
      font-weight:750;
      font-size:15px;
      letter-spacing:.15px;
    }
    .drawer{ margin-top:12px; border:1px solid var(--line); border-radius:14px; background:#0b1221; padding:12px; box-shadow:var(--shadow); }
    .subhead-blue{border-left:3px solid #5aa9ff;padding-left:8px}
    /* Single oval blue line for the whole section (no double line on summary) */
    .section-blue{
      border-left:2px solid #5aa9ff;
      padding-left:12px;
      border-radius:12px;
    }
    .section-blue[open]{border-left-width:3px}
    .section-blue .subhead-blue{border-left:none;padding-left:0}
    .section-blue > summary.subhead-blue{
      padding:12px;
      border-radius:10px;
      background:rgba(255,255,255,0.03);
    }
    .discWrap{align-items:flex-start}
    .discSideBox{
      min-width:220px;
      align-self:flex-start;
      padding:10px 8px;
      height:fit-content;
    }
    .discSideBox .pill{font-size:12px}
    .discSide{
      display:flex;
      gap:6px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .discWrap .subhead-blue{
      width:100%;
      margin-right:0;
    }
    .schAdvancedRow{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
    .schAdvancedRow .col{min-width:0;flex:initial}
    .schAdvancedRow input{width:100% !important}
    #rawList{max-height:620px;overflow-y:auto;padding-right:4px;scrollbar-width:none; -ms-overflow-style:none}
    #rawList::-webkit-scrollbar{width:0;height:0}
    /* Import results: hide vertical scrollbars (keep scrolling) */
    #bulkImportResults{scrollbar-width:none;-ms-overflow-style:none}
    #bulkImportResults::-webkit-scrollbar{width:0;height:0}
    /* Import textarea: hide scrollbars (keep scrolling) */
    #bulkImportText{scrollbar-width:none;-ms-overflow-style:none}
    #bulkImportText::-webkit-scrollbar{width:0;height:0}
    .hpBar{
      height:12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.05);
      margin-bottom:10px;
      position:relative;
      overflow:hidden;
    }
    .hpBar::before{
      content:"";
      display:none;
    }
    .hpBarMarker{
      position:absolute;
      top:0;
      height:12px;
      width:1px;
      background:rgba(255,255,255,.18);
    }
    .hpBarMarker.left{left:0}
    .hpBarMarker.mid{left:50%}
    .hpBarMarker.right{right:0}
    .rawControls{align-items:center}
    .rawControls select,
    .rawControls button{
      height:28px;
      padding:6px 10px;
      font-size:11px;
      line-height:1;
    }