:root{
    --bg:#0e0d13; --panel:#16151d; --panel2:#1c1b25; --line:#2a2833;
    --ink:#eceaf2; --muted:#8e8a9e; --dim:#6a6679;
    --accent:#7c78f0; --accent2:#a29dff;
    --ok:#3fbf87; --warn:#e0a33c; --err:#e06a6a; --info:#5aa9e6;
    --r:12px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
       font:15px/1.55 ui-sans-serif,system-ui,"Segoe UI",Inter,sans-serif}
  a{color:var(--accent2)}
  code,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px}

  /* --- ust cubuk --- */
  header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
         padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);
         position:sticky;top:0;z-index:20}
  .logo{width:26px;height:26px;border-radius:7px;background:#141019;flex:none;
        display:grid;place-items:center;color:var(--accent2);font-size:15px}
  h1{font-size:15px;font-weight:650;margin:0;letter-spacing:-.01em;white-space:nowrap}
  select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
         border-radius:9px;padding:8px 11px;font:inherit;font-size:14px;min-width:190px}
  select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .badges{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-left:auto}
  .badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;
         border:1px solid var(--line);color:var(--muted);white-space:nowrap}
  .badge.ok{color:var(--ok);border-color:#1f4d3a;background:#12271e}
  .badge.warn{color:var(--warn);border-color:#4d3d1c;background:#251e10}
  .badge.err{color:var(--err);border-color:#4d2424;background:#261414}
  .badge.sb{color:var(--info);border-color:#1e3c52;background:#101f2a}

  /* --- sekmeler --- */
  nav{display:flex;gap:2px;padding:0 22px;background:var(--panel);
      border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:19}
  nav button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
             font:inherit;font-weight:600;font-size:14px;padding:11px 15px;cursor:pointer}
  nav button:hover{color:var(--ink)}
  nav button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

  main{padding:22px;max-width:1280px;margin:0 auto}
  .hidden{display:none!important}

  /* --- ozet --- */
  .chips{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 16px}
  .chip{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
        padding:10px 15px;min-width:104px}
  .chip b{display:block;font-size:21px;font-weight:650;line-height:1.2;letter-spacing:-.02em}
  .chip span{font-size:12px;color:var(--muted)}
  .chip.pending b{color:var(--muted)} .chip.ready b{color:var(--info)}
  .chip.posted b{color:var(--ok)} .chip.failed b{color:var(--err)}

  .bar{display:flex;gap:9px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
  button.act{background:var(--accent);color:#0d0c12;border:0;border-radius:9px;
             padding:9px 15px;font:inherit;font-weight:650;font-size:14px;cursor:pointer}
  button.act:hover{background:var(--accent2)}
  button.act:disabled{opacity:.5;cursor:default}
  button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  button.ghost:hover{border-color:var(--accent);color:var(--accent2)}
  button.danger{background:transparent;color:var(--err);border:1px solid #4d2424}
  button.danger:hover{background:#261414}
  .note{color:var(--muted);font-size:13px}

  /* --- tablo --- */
  .tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
             overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:720px}
  th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
     color:var(--dim);font-weight:650;padding:11px 14px;border-bottom:1px solid var(--line)}
  td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
  tbody tr:last-child td{border-bottom:0}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:var(--panel2)}
  tbody tr[aria-selected="true"]{background:#201d35}
  .thumb{width:38px;height:57px;object-fit:cover;border-radius:6px;background:var(--panel2);
         border:1px solid var(--line);display:block}
  .st{font-size:12px;font-weight:650;padding:3px 9px;border-radius:99px;white-space:nowrap}
  .st.pending{color:var(--muted);background:#232131}
  .st.generating{color:var(--accent2);background:#221f3a}
  .st.ready{color:var(--info);background:#10202b}
  .st.posted{color:var(--ok);background:#12271e}
  .st.failed{color:var(--err);background:#261414}
  .ttl{font-weight:600;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sub{color:var(--dim);font-size:12.5px}
  .empty{padding:46px 20px;text-align:center;color:var(--muted)}

  /* --- detay --- */
  .detail{margin-top:16px;background:var(--panel);border:1px solid var(--line);
          border-radius:var(--r);padding:18px}
  .detail h3{margin:0 0 3px;font-size:15px}
  .grid{display:grid;grid-template-columns:150px 1fr;gap:16px;margin-top:14px}
  @media(max-width:700px){.grid{grid-template-columns:1fr}}
  .grid img{width:100%;border-radius:9px;border:1px solid var(--line)}
  label{display:block;font-size:12px;color:var(--muted);margin:11px 0 5px;font-weight:600}
  input[type=text],textarea{width:100%;background:var(--panel2);color:var(--ink);
    border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px}
  textarea{resize:vertical;min-height:74px}
  input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .err-box{margin-top:11px;padding:10px 13px;border-radius:9px;background:#261414;
           border:1px solid #4d2424;color:#f0b4b4;font-size:13px}
  .ok-box{margin-top:11px;padding:10px 13px;border-radius:9px;background:#12271e;
          border:1px solid #1f4d3a;color:#9fe0c2;font-size:13px}

  /* --- uretim --- */
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:900px){.cols{grid-template-columns:1fr}}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
  .drop{border:1.5px dashed var(--line);border-radius:10px;padding:26px 16px;text-align:center;
        color:var(--muted);cursor:pointer;font-size:14px}
  .drop:hover,.drop.on{border-color:var(--accent);color:var(--accent2)}
  .seg{display:flex;gap:9px;margin:5px 0 3px}
  .seg button{flex:1;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
              border-radius:10px;padding:11px;font:inherit;font-weight:600;cursor:pointer}
  .seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent2);background:#1d1a2e}
  .check{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:13.5px;color:var(--ink)}
  .check input{accent-color:var(--accent);width:16px;height:16px}

/* Hesaplar tablosu: rozetler tek satirda kalsin, satirlar kisa olsun */
#allrows td .st{margin:0 3px 0 0;display:inline-block}
#allrows td:nth-child(2){white-space:nowrap}