/* =====================================================================
   IMAP Taşıma Aracı — Kurumsal tasarım sistemi
   Tek kaynak: renk, tipografi, boşluk ve bileşenler burada tanımlıdır.
   CSP nedeniyle satır-içi stil YOKTUR; her şey sınıflarla yönetilir.
   ===================================================================== */

/* ---------------------------------------------------------- 1. Jetonlar */
:root {
  /* Marka */
  --brand-50:#eef4ff; --brand-100:#dbe6fe; --brand-200:#bfd3fe;
  --brand-500:#3b6ef0; --brand-600:#2557d6; --brand-700:#1d43ab; --brand-900:#152a63;

  /* Nötr */
  --n-0:#ffffff; --n-25:#fbfcfe; --n-50:#f5f7fb; --n-100:#eef1f7; --n-200:#e0e5ee;
  --n-300:#cbd3e1; --n-400:#98a3b8; --n-500:#6b7789; --n-600:#4d5768;
  --n-700:#37404f; --n-800:#232b38; --n-900:#141a24; --n-950:#0c1017;

  /* Anlamsal */
  --ok-bg:#e7f7ef; --ok-line:#a7e3c6; --ok:#0b7a55; --ok-strong:#0e9f6e;
  --warn-bg:#fff6e5; --warn-line:#f6ce8a; --warn:#96650a;
  --bad-bg:#fdecec; --bad-line:#f5b5b5; --bad:#b42222; --bad-strong:#e02424;
  --info-bg:#e9f1fe; --info-line:#b9d2fb; --info:#1b4fb5;

  /* Yüzeyler */
  --bg:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-25);
  --surface-sunken:var(--n-100); --line:var(--n-200); --line-soft:var(--n-100);
  --ink:var(--n-900); --ink-2:var(--n-600); --ink-3:var(--n-500);
  --accent:var(--brand-600); --accent-ink:#fff; --accent-soft:var(--brand-50);
  --ring:rgba(59,110,240,.35);

  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 12px 32px -8px rgba(16,24,40,.16),0 4px 10px -4px rgba(16,24,40,.08);
  --shadow-pop:0 16px 44px -12px rgba(16,24,40,.28);

  --r-xs:6px; --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --header-h:60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:var(--n-950); --surface:#131a25; --surface-2:#171f2c;
    --surface-sunken:#0f1620; --line:#26303f; --line-soft:#1d2634;
    --ink:#e8edf5; --ink-2:#a6b2c4; --ink-3:#7f8b9e;
    --accent:var(--brand-500); --accent-soft:rgba(59,110,240,.14);
    --ok-bg:rgba(14,159,110,.12); --ok-line:rgba(14,159,110,.35); --ok:#3ddc9a; --ok-strong:#3ddc9a;
    --warn-bg:rgba(234,166,32,.12); --warn-line:rgba(234,166,32,.35); --warn:#f2be55;
    --bad-bg:rgba(224,36,36,.12); --bad-line:rgba(224,36,36,.35); --bad:#ff8a8a; --bad-strong:#ff6b6b;
    --info-bg:rgba(59,110,240,.12); --info-line:rgba(59,110,240,.32); --info:#8ab0ff;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:0 12px 32px -8px rgba(0,0,0,.6),0 4px 10px -4px rgba(0,0,0,.4);
    --shadow-pop:0 16px 44px -12px rgba(0,0,0,.7);
    --ring:rgba(59,110,240,.45);
  }
}
:root[data-theme="dark"] {
  --bg:var(--n-950); --surface:#131a25; --surface-2:#171f2c;
  --surface-sunken:#0f1620; --line:#26303f; --line-soft:#1d2634;
  --ink:#e8edf5; --ink-2:#a6b2c4; --ink-3:#7f8b9e;
  --accent:var(--brand-500); --accent-soft:rgba(59,110,240,.14);
  --ok-bg:rgba(14,159,110,.12); --ok-line:rgba(14,159,110,.35); --ok:#3ddc9a; --ok-strong:#3ddc9a;
  --warn-bg:rgba(234,166,32,.12); --warn-line:rgba(234,166,32,.35); --warn:#f2be55;
  --bad-bg:rgba(224,36,36,.12); --bad-line:rgba(224,36,36,.35); --bad:#ff8a8a; --bad-strong:#ff6b6b;
  --info-bg:rgba(59,110,240,.12); --info-line:rgba(59,110,240,.32); --info:#8ab0ff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px -8px rgba(0,0,0,.6),0 4px 10px -4px rgba(0,0,0,.4);
  --shadow-pop:0 16px 44px -12px rgba(0,0,0,.7);
  --ring:rgba(59,110,240,.45);
}

/* ------------------------------------------------------------ 2. Temel */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:14px;line-height:1.55;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.011em;line-height:1.3}
h1{font-size:19px}h2{font-size:15px}h3{font-size:13.5px}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:12.5px}
.muted{color:var(--ink-2)}
.tiny{font-size:12px}

/* --------------------------------------------------------- 3. Düğmeler */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:550;
  cursor:pointer;white-space:nowrap;transition:background .13s,border-color .13s,
  box-shadow .13s,transform .06s;box-shadow:var(--shadow-sm);
}
.btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--n-300)}
.btn:active:not(:disabled){transform:translateY(.5px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn .ic{width:15px;height:15px;flex:none}

.btn-primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);
  box-shadow:0 1px 2px rgba(37,87,214,.28)}
.btn-primary:hover:not(:disabled){background:var(--brand-700);border-color:transparent}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){background:var(--surface-sunken);color:var(--ink)}
.btn-soft{background:var(--accent-soft);border-color:transparent;color:var(--accent);box-shadow:none}
.btn-soft:hover:not(:disabled){background:var(--brand-100);border-color:transparent}
.btn-danger{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.btn-danger:hover:not(:disabled){background:var(--bad-line);border-color:var(--bad-line)}
.btn-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.btn-sm{height:30px;padding:0 10px;font-size:12.5px}
.btn-lg{height:42px;padding:0 20px;font-size:14.5px}
.btn-block{width:100%}
.btn-icon{width:32px;height:32px;padding:0;border-radius:var(--r-sm)}

/* ----------------------------------------------------------- 4. Formlar */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > .lbl{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.005em}
.field .help{font-size:11.5px;color:var(--ink-3)}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  height:36px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;width:100%;
  transition:border-color .13s,box-shadow .13s;min-width:0;
}
textarea{height:auto;padding:9px 11px;resize:vertical;font-family:var(--mono);font-size:12.5px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
input::placeholder{color:var(--n-400)}
input:disabled,select:disabled{background:var(--surface-sunken);color:var(--ink-3);cursor:not-allowed}
input.bad,select.bad{border-color:var(--bad-strong)}
select{appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7789' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}

.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;
  color:var(--ink-2);user-select:none}
.check input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.check:hover{color:var(--ink)}

/* --- parola seçici (yeni kullanıcı / parola sıfırlama) --- */
.check input[type=radio]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.pw-choice{display:flex;flex-direction:column;gap:9px;padding:11px 13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.pw-manual-box{display:flex;flex-direction:column;gap:6px;margin-top:10px;
  padding-left:13px;border-left:2px solid var(--accent-soft)}
.pw-row{display:flex;gap:8px;align-items:center}
.pw-row .pw-wrap{flex:1;min-width:0}
.pw-row .btn{flex:none}
.help.bad{color:var(--bad)}
.help.good{color:var(--ok)}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:38px}
.pw-eye{position:absolute;right:2px;top:2px;width:32px;height:32px;display:flex;
  align-items:center;justify-content:center;border:0;background:none;cursor:pointer;
  color:var(--ink-3);border-radius:var(--r-xs)}
.pw-eye:hover{color:var(--ink);background:var(--surface-sunken)}

/* ------------------------------------------------------------ 5. Kart */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:14px var(--sp-5);border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.card-head .t{display:flex;align-items:center;gap:10px;min-width:0}
.card-head .t h2{font-size:14.5px}
.card-head .sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.card-body{padding:var(--sp-5)}
.card-body.tight{padding:var(--sp-4) var(--sp-5)}
.card-foot{padding:12px var(--sp-5);border-top:1px solid var(--line-soft);
  background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}

.step-badge{width:24px;height:24px;border-radius:var(--r-pill);background:var(--accent-soft);
  color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;
  justify-content:center;flex:none}

/* ---------------------------------------------------------- 6. Rozetler */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--surface-sunken);color:var(--ink-2);border:1px solid transparent}
.badge.ok,.badge.done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.badge.err,.badge.error{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.badge.warn,.badge.paused{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge.info,.badge.running,.badge.queued{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.badge.loading{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.running .dot{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* --------------------------------------------------------- 7. Uyarılar */
.alert{display:flex;gap:10px;padding:11px 14px;border-radius:var(--r);font-size:13px;
  border:1px solid transparent;align-items:flex-start}
.alert .ic{flex:none;margin-top:1px}
.alert-err{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.alert-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.alert-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}

/* ------------------------------------------------------- 8. GİRİŞ SAYFASI */
/* Kurumsal, dingin bir giris ekrani: parlak degrade ve isiltilar yerine
   duz koyu arduvaz panel, ince ayirac cizgileri ve olculu tipografi. */
.login-page{min-height:100vh;display:grid;grid-template-columns:1.02fr .98fr}

.login-hero{
  background:#111823;                       /* duz, dusuk doygunluklu kurumsal koyu ton */
  border-right:1px solid rgba(255,255,255,.06);
  color:#e9edf3;padding:52px 56px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.hero-logo{width:150px;height:auto;opacity:.96;flex:none;align-self:flex-start}

.hero-main{max-width:44ch}
.hero-main h2{font-size:24px;font-weight:600;line-height:1.34;letter-spacing:-.014em;color:#fff}
.hero-main > p{margin-top:12px;font-size:14px;line-height:1.7;color:#98a4b6}

.hero-facts{margin:34px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.09)}
.hero-facts > div{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.hero-facts dt{font-size:13px;font-weight:600;color:#dbe3ee;letter-spacing:.002em}
.hero-facts dd{margin:4px 0 0;font-size:12.5px;line-height:1.62;color:#8592a6}

.hero-foot{font-size:11.5px;line-height:1.65;color:#69758a}

.login-panel{display:flex;align-items:center;justify-content:center;padding:40px 32px;
  background:var(--surface);
  /* Genel `main` kurali margin:0 auto veriyor; otomatik kenar boslugu grid
     ogesinin stretch olmasini engelledigi icin burada sifirlanmali. */
  margin:0;max-width:none;width:100%}
.login-box{width:100%;max-width:368px}
.login-mark{display:none}
.login-box .lead{margin-bottom:26px}
.login-box .lead h1{font-size:21px;font-weight:620;letter-spacing:-.016em}
.login-box .lead p{color:var(--ink-2);margin-top:5px;font-size:13.5px}
.login-form{display:flex;flex-direction:column;gap:15px}
.login-form .btn-primary{margin-top:4px;background:var(--brand-700)}
.login-form .btn-primary:hover:not(:disabled){background:var(--brand-900)}

.login-foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.75}
.login-foot .lock{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}

/* Koyu temada sag panel de arka planla uyumlu kalsin */
:root[data-theme="dark"] .login-panel{background:var(--bg)}

/* Dar ekran: bilgi paneli gizlenir, logo koyu plaka uzerinde gosterilir
   (logo beyaz oldugu icin acik zeminde gorunmez). */
@media (max-width:920px){
  .login-page{grid-template-columns:1fr}
  .login-hero{display:none}
  .login-mark{display:flex;justify-content:center;margin-bottom:30px}
  .login-mark img{height:28px;width:auto;display:block}
}

/* ---------------------------------------------------------- 9. UYGULAMA */
.appbar{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--surface);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-6);box-shadow:var(--shadow-sm)}
.appbar .brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:14.5px;
  letter-spacing:-.01em;white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
/* Marka logosu temaya gore degisir: acik temada renkli (koyu yazili) surum,
   koyu temada beyaz surum. Boylece plakaya/cerceveye gerek kalmaz. */
.brand-plate{display:inline-flex;align-items:center;flex:none}
.brand-logo{height:20px;width:auto;display:block}
.brand-logo.on-dark{display:none}
:root[data-theme="dark"] .brand-logo.on-light{display:none}
:root[data-theme="dark"] .brand-logo.on-dark{display:block}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.appbar .spacer{flex:1}
.appbar .conn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.conn .dot{width:7px;height:7px}
.conn.live{color:var(--ok)}
.conn.down{color:var(--bad)}

.tabs{display:flex;gap:2px;background:var(--surface-sunken);padding:3px;border-radius:var(--r-sm)}
.tab{height:30px;padding:0 13px;border:0;background:none;border-radius:var(--r-xs);cursor:pointer;
  font:inherit;font-size:13px;font-weight:550;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

.usermenu{position:relative}
.avatar{width:32px;height:32px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:650;flex:none}
.user-btn{display:flex;align-items:center;gap:9px;height:40px;padding:0 8px 0 4px;border:0;
  background:none;cursor:pointer;border-radius:var(--r-sm);font:inherit;color:var(--ink)}
.user-btn:hover{background:var(--surface-sunken)}
.user-btn .nm{text-align:left;line-height:1.25}
.user-btn .nm b{display:block;font-size:13px;font-weight:600}
.user-btn .nm span{font-size:11px;color:var(--ink-3)}
.menu{position:absolute;right:0;top:46px;min-width:230px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop);
  padding:5px;z-index:60}
.menu .mi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;
  background:none;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);
  border-radius:var(--r-xs);text-align:left}
.menu .mi:hover{background:var(--surface-sunken)}
.menu .mi.danger{color:var(--bad)}
.menu .mi.danger:hover{background:var(--bad-bg)}
.menu .sep{height:1px;background:var(--line-soft);margin:5px 0}
.menu .mhead{padding:9px 10px 7px;border-bottom:1px solid var(--line-soft);margin-bottom:4px}
.menu .mhead b{display:block;font-size:13px}
.menu .mhead span{font-size:11.5px;color:var(--ink-3);word-break:break-all}

main{max-width:1240px;margin:0 auto;padding:var(--sp-6) var(--sp-6) 72px}
.stack{display:flex;flex-direction:column;gap:var(--sp-5)}
.page-head{margin-bottom:var(--sp-5)}
.page-head h1{font-size:20px}
.page-head p{color:var(--ink-2);margin-top:4px;font-size:13.5px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.srv-grid{display:grid;grid-template-columns:1fr 96px;gap:var(--sp-3) var(--sp-4);align-items:end}
.srv-grid .full{grid-column:1/-1}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}

/* Kaynak/hedef renk kodu */
.side-src{--side:#8b5cf6}
.side-dst{--side:#0ea5e9}
.card.sided{border-top:2.5px solid var(--side)}
.side-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;
  border-radius:var(--r-pill);font-size:11px;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;background:color-mix(in srgb,var(--side) 13%,transparent);color:var(--side)}

/* ------------------------------------------------- 10. Mailbox tablosu */
.mb-table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.mb-head,.mb-cells{display:grid;
  grid-template-columns:30px 34px minmax(150px,1.25fr) minmax(110px,.85fr) minmax(150px,1.25fr) minmax(110px,.85fr) 128px 66px;
  gap:8px;align-items:center}
.mb-head{padding:9px 12px;background:var(--surface-sunken);border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.mb-row{border-bottom:1px solid var(--line-soft);background:var(--surface);transition:background .12s}
.mb-row:last-child{border-bottom:0}
.mb-row:hover{background:var(--surface-2)}
.mb-row.dragging{opacity:.4}
.mb-row.drag-over{box-shadow:inset 0 2px 0 var(--accent)}
.mb-cells{padding:8px 12px}
.mb-cells input{height:32px;font-size:13px}
.drag{cursor:grab;color:var(--n-400);display:flex;align-items:center;justify-content:center;
  height:32px;border-radius:var(--r-xs);user-select:none}
.drag:hover{color:var(--ink-2);background:var(--surface-sunken)}
.drag:active{cursor:grabbing}
.rownum{font-size:12px;color:var(--ink-3);text-align:center;font-weight:600}
.r-actions{display:flex;gap:3px;justify-content:flex-end}
.mini{width:29px;height:29px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);padding:0;transition:all .12s}
.mini:hover:not(:disabled){background:var(--surface-sunken);color:var(--ink)}
.mini:disabled{opacity:.35;cursor:not-allowed}
.mini.go:hover:not(:disabled){background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.mini.x:hover:not(:disabled){background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.r-status{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}

.r-prog{display:flex;align-items:center;gap:10px;padding:0 12px 9px 76px;font-size:11.5px;
  color:var(--ink-3)}
.r-bar{flex:none;width:130px;height:5px;background:var(--surface-sunken);border-radius:var(--r-pill);
  overflow:hidden}
.r-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:var(--r-pill);
  transition:width .3s ease}
.r-prog-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-report{flex:none;font-size:11.5px;font-weight:600}

.empty{padding:38px 20px;text-align:center;color:var(--ink-3)}
.empty .ic{margin-bottom:10px;opacity:.45}
.empty b{display:block;color:var(--ink-2);font-size:13.5px;margin-bottom:3px}
.empty span{font-size:12.5px}

/* --------------------------------------------------- 11. İlerleme paneli */
.overall{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface-sunken);
  border-radius:var(--r);font-size:13px;font-weight:550;margin-bottom:var(--sp-4)}
.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:var(--sp-4)}
.stat{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:12px 14px}
.stat .num{display:block;font-size:20px;font-weight:680;letter-spacing:-.02em;line-height:1.2}
.stat .lbl{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  font-weight:600}
.stat.ok .num{color:var(--ok-strong)}
.stat.bad .num{color:var(--bad-strong)}
@media (max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr)}}

.bar{height:8px;background:var(--surface-sunken);border-radius:var(--r-pill);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand-500),var(--brand-600));transition:width .35s ease}
.bar-meta{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-size:12px;
  color:var(--ink-3)}
.bar-meta #bar-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-meta #bar-pct{font-weight:650;color:var(--ink);flex:none}

.log{margin-top:var(--sp-4);background:var(--n-950);color:#c9d5e6;border-radius:var(--r);
  padding:12px 14px;height:250px;overflow-y:auto;font-family:var(--mono);font-size:11.5px;
  line-height:1.75;border:1px solid var(--line)}
.log .l{white-space:pre-wrap;word-break:break-word}
.log:empty::before{content:"Taşıma başladığında işlem satırları burada canlı olarak akar…";
  color:#5b6779;font-style:italic}
.log .folder{color:#9ecbff;font-weight:600}
.log .copy{color:#5ddba4}
.log .skip{color:#8b97a7}
.log .err{color:#ff9b9b}
.log .reconn{color:#f2c46b}
.log-head{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-4)}
.log-head h3{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}

/* ------------------------------------------------------- 12. Yönetim */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;padding:10px 12px;background:var(--surface-sunken);color:var(--ink-3);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:650;
  border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.table .actions{display:flex;gap:5px;justify-content:flex-end}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.u-cell{display:flex;align-items:center;gap:10px;min-width:0}
.u-cell .avatar{width:30px;height:30px;font-size:11.5px}
.u-cell b{display:block;font-size:13px;font-weight:600}
.u-cell span{font-size:11.5px;color:var(--ink-3)}
.role-admin{background:var(--brand-100);color:var(--brand-700);border-color:transparent}
:root[data-theme="dark"] .role-admin{background:rgba(59,110,240,.18);color:#9dbaff}

/* ------------------------------------------------------- 13. Diyalog */
.overlay{position:fixed;inset:0;background:rgba(9,14,22,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);width:100%;max-width:460px;max-height:88vh;display:flex;
  flex-direction:column}
.modal.wide{max-width:660px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px var(--sp-5);border-bottom:1px solid var(--line-soft)}
.modal-body{padding:var(--sp-5);overflow-y:auto;display:flex;flex-direction:column;gap:15px}
.modal-foot{padding:14px var(--sp-5);border-top:1px solid var(--line-soft);display:flex;
  justify-content:flex-end;gap:9px;background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg)}

.secret{display:flex;align-items:center;gap:10px;background:var(--surface-sunken);
  border:1px dashed var(--line);border-radius:var(--r);padding:12px 14px}
.secret code{flex:1;font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.02em;word-break:break-all;color:var(--ink)}

/* ---------------------------------------------------------- 14. Toast */
.toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;
  gap:9px;max-width:calc(100vw - 40px)}
.toast{display:flex;align-items:flex-start;gap:10px;min-width:270px;max-width:400px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:11px 14px;box-shadow:var(--shadow-pop);font-size:13px;
  animation:slidein .22s ease}
.toast.ok{border-left-color:var(--ok-strong)}
.toast.err{border-left-color:var(--bad-strong)}
.toast.warn{border-left-color:var(--warn)}
.toast .ic{flex:none;margin-top:1px}
.toast b{display:block;font-weight:600;margin-bottom:1px}
.toast p{color:var(--ink-2);font-size:12.5px}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- 15. Yardımcı */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.hint{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.hint b{color:var(--ink-2);font-weight:600}
.divider{height:1px;background:var(--line-soft);margin:var(--sp-2) 0}
.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.worker-field{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.worker-field input{width:62px;height:32px;text-align:center}

@media (max-width:1080px){
  .mb-head,.mb-cells{grid-template-columns:28px 30px 1fr 1fr 106px 58px}
  .mb-head .h-duser,.mb-head .h-dpass,.mb-cells .r-duser,.mb-cells .r-dpass{display:none}
  .r-prog{padding-left:12px}
}
@media (max-width:680px){
  main{padding:var(--sp-4) var(--sp-3) 60px}
  .appbar{padding:0 var(--sp-3);gap:var(--sp-2)}
  .appbar .brand small,.user-btn .nm{display:none}
  .card-body{padding:var(--sp-4)}
  .srv-grid{grid-template-columns:1fr}
}