/* ShahLLC Backup Drive — light, Windows 11–style shell. Made by WebKet.in */
:root {
  --bg: #f3f5f8;
  --pane: #ffffff;
  --pane-alt: #f9fafb;
  --line: #e5e8ec;
  --text: #1c2430;
  --muted: #677385;
  --accent: #0a64d6;
  --accent-soft: #e6f0fc;
  --sel: #cfe3fb;
  --sel-line: #9cc4f2;
  --hover: #f0f4f9;
  --folder: #e9b23a;
  --danger: #c4302b;
  --radius: 8px;
  --font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
}
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13.5px; overflow: hidden; }
code { color: #8a3b9a; }

#app { display: flex; flex-direction: column; height: 100vh; }

/* Title bar */
.titlebar { position: relative; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; background: #eef2f7; border-bottom: 1px solid var(--line); }
.app-icon { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #f4c04e, #e39b16); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.brand-mark { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, #f4c04e, #e39b16); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 14px rgba(227,155,22,.25); }

/* Command bar */
.commandbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 10px; background: var(--pane); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.commandbar .dropdown-menu, .titlebar .dropdown-menu { z-index: 1100; }
.cmd { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; padding: 5px 9px; border-radius: 6px; color: var(--text); font-size: 13px; white-space: nowrap; }
.cmd:hover:not(:disabled) { background: var(--hover); border-color: var(--line); }
.cmd:disabled { opacity: .38; cursor: default; }
.cmd .bi { font-size: 15px; }
.cmd .tiny { font-size: 9px; opacity: .6; }
.cmd.icon-only { padding: 5px 8px; }
.cmd.active { background: var(--accent-soft); border-color: var(--sel-line); }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; }

/* Address bar */
.addressbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--pane); border-bottom: 1px solid var(--line); }
.nav-btn { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 6px; color: var(--text); }
.nav-btn:hover:not(:disabled) { background: var(--hover); }
.nav-btn:disabled { opacity: .35; }
.address { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--pane-alt); display: flex; align-items: center; padding: 0 6px; cursor: text; }
.address:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.crumbs { display: flex; align-items: center; overflow: hidden; white-space: nowrap; flex: 1; }
.crumb { padding: 3px 6px; border-radius: 4px; cursor: pointer; }
.crumb:hover { background: var(--hover); }
.crumb-sep { color: var(--muted); font-size: 10px; padding: 0 1px; }
.address-input { border: 0; outline: 0; background: transparent; width: 100%; font-family: Consolas, monospace; font-size: 13px; }
.search { position: relative; width: 260px; }
.search .bi { position: absolute; left: 10px; top: 8px; color: var(--muted); font-size: 13px; }
.search input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px 0 30px; background: var(--pane-alt); outline: 0; }
.search input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }

/* Main */
.main { flex: 1; display: flex; min-height: 0; }
.navpane { width: 250px; flex: none; background: var(--pane); border-right: 1px solid var(--line); overflow: auto; padding: 8px 4px; display: flex; flex-direction: column; }
.tree { flex: 1; }
.tnode { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; user-select: none; }
.tnode:hover { background: var(--hover); }
.tnode.active { background: var(--sel); }
.tnode.drop-over { background: var(--accent-soft); outline: 1px dashed var(--accent); }
.tnode .twist { width: 16px; text-align: center; color: var(--muted); font-size: 10px; flex: none; }
.tnode .bi-folder-fill, .tnode .bi-folder2-open, .ficon.dir { color: var(--folder); }
.tnode .lbl { overflow: hidden; text-overflow: ellipsis; }
.tchildren { padding-left: 14px; }
.nav-section { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.nav-link-item { display: flex; gap: 8px; align-items: center; padding: 5px 10px; color: var(--text); text-decoration: none; border-radius: 5px; }
.nav-link-item:hover { background: var(--hover); color: var(--text); }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--pane); position: relative; outline: 0; }
.list-head { display: grid; grid-template-columns: 34px minmax(200px, 1fr) 170px 140px 100px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); user-select: none; }
.list-head > div { padding: 6px 8px; border-right: 1px solid transparent; }
.list-head .sortable { cursor: pointer; }
.list-head .sortable:hover { background: var(--hover); border-right-color: var(--line); }
.list-head .col-size { text-align: right; }
.list { flex: 1; overflow: auto; padding: 2px 0 40px; user-select: none; }
.row-item { display: grid; grid-template-columns: 34px minmax(200px, 1fr) 170px 140px 100px; align-items: center; border: 1px solid transparent; margin: 0 4px; border-radius: 4px; cursor: default; }
.row-item > div { padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item:hover { background: var(--hover); }
.row-item.selected { background: var(--sel); border-color: var(--sel-line); }
.row-item.cut { opacity: .5; }
.row-item.drop-over { background: var(--accent-soft); outline: 1px dashed var(--accent); }
.row-item .form-check-input { opacity: 0; margin: 0; }
.row-item:hover .form-check-input, .row-item.selected .form-check-input { opacity: 1; }
.row-item .col-name { display: flex; align-items: center; gap: 8px; }
.row-item .col-date, .row-item .col-type { color: var(--muted); }
.row-item .col-size { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ficon { font-size: 17px; flex: none; width: 20px; text-align: center; }
.ficon.code { color: #6b4fbb; } .ficon.img { color: #1e8e5a; } .ficon.zip { color: #a1660a; }
.ficon.doc { color: #2b6cb0; } .ficon.link { color: var(--muted); } .ficon.txt { color: #5a6474; }
.rename-input { border: 1px solid var(--accent); border-radius: 3px; padding: 1px 4px; width: 100%; outline: 0; font: inherit; }
.badge-link { font-size: 10px; background: #eef1f5; color: var(--muted); border-radius: 3px; padding: 0 4px; }
.empty-folder { color: var(--muted); text-align: center; padding: 60px 20px; }
.empty-folder .bi { font-size: 40px; color: #c9d1dc; display: block; margin-bottom: 8px; }

/* Tiles view */
.content.tiles .list-head { display: none; }
.content.tiles .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; padding: 10px; align-content: start; }
.content.tiles .row-item { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 6px; margin: 0; text-align: center; }
.content.tiles .row-item > div { padding: 0; }
.content.tiles .col-check, .content.tiles .col-date, .content.tiles .col-type, .content.tiles .col-size { display: none; }
.content.tiles .col-name { flex-direction: column; gap: 4px !important; white-space: normal; width: 100%; }
.content.tiles .col-name .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; font-size: 12.5px; }
.content.tiles .ficon { font-size: 40px; width: auto; }

.drop-hint { position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 12px; background: rgba(230,240,252,.92); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--accent); font-size: 15px; pointer-events: none; z-index: 5; }
.drop-hint .bi { font-size: 44px; }
.drop-hint.show { display: flex; }

/* Status bar */
.statusbar { display: flex; align-items: center; padding: 4px 14px; background: var(--pane); border-top: 1px solid var(--line); font-size: 12px; }

/* Context menu */
.ctx { position: fixed; display: none; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px; z-index: 1500; }
.ctx.show { display: block; }
.ctx a { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-radius: 5px; color: var(--text); text-decoration: none; font-size: 13px; }
.ctx a:hover { background: var(--hover); }
.ctx a.disabled { opacity: .4; pointer-events: none; }
.ctx a.danger { color: var(--danger); }
.ctx .kbd { margin-left: auto; color: var(--muted); font-size: 11px; }
.ctx hr { margin: 4px 0; border-color: var(--line); opacity: 1; }

/* Progress panel */
.progress-panel { position: fixed; right: 16px; bottom: 34px; width: 380px; max-height: 60vh; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: none; flex-direction: column; z-index: 1200; }
.progress-panel.show { display: flex; }
.progress-panel.min .pp-body { display: none; }
.pp-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.pp-body { overflow: auto; padding: 6px 12px 10px; }
.pp-job { padding: 8px 0; border-bottom: 1px solid var(--line); }
.pp-job:last-child { border-bottom: 0; }
.pp-job .progress { height: 6px; margin: 6px 0 4px; }
.pp-stats { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); }
.pp-stats .ok { color: #1e8e5a; } .pp-stats .bad { color: var(--danger); }
.pp-files { max-height: 140px; overflow: auto; font-size: 11.5px; margin-top: 4px; }
.pp-files div { display: flex; gap: 6px; align-items: center; }

/* Modals & tables */
.modal-content { border-radius: 10px; border: 1px solid var(--line); }
.modal-body { font-size: 13.5px; }
.tbl { font-size: 12.5px; }
.tbl th { font-weight: 600; color: var(--muted); background: var(--pane-alt); position: sticky; top: 0; z-index: 1; }
.tbl td { vertical-align: middle; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; word-break: break-all; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--pane-alt); }
.cmp-card.in { border-color: var(--sel-line); background: var(--accent-soft); }
.cmp-card .lab { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; }
.choice:hover { background: var(--hover); }
.choice input { margin-top: 3px; }
.choice small { display: block; color: var(--muted); }
.status-pill { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #eef1f5; color: var(--muted); }
.status-pill.completed, .status-pill.success, .status-pill.verified { background: #e3f5ec; color: #1e7a4d; }
.status-pill.partial, .status-pill.awaiting_decision, .status-pill.staged, .status-pill.uploading { background: #fff4dc; color: #8a5a00; }
.status-pill.failed, .status-pill.corrupt { background: #fde8e7; color: var(--danger); }
.status-pill.rolled_back, .status-pill.cancelled { background: #eef1f5; color: var(--muted); }

/* Auth pages */
.auth-body { background: linear-gradient(160deg, #eef3fa 0%, #f7f9fc 60%); overflow: auto; }
.auth-card { width: 100%; max-width: 380px; border-radius: 12px; border: 1px solid var(--line); }

@media (max-width: 820px) {
  .navpane { display: none; }
  .search { width: 150px; }
  .list-head, .row-item { grid-template-columns: 34px minmax(140px, 1fr) 0 0 80px; }
  .col-date, .col-type { display: none; }
}

/* Branding — ShahLLC Backup Drive, made by WebKet.in */
.app-logo { height: 30px; width: auto; display: block; }
.brand-logo { height: 72px; width: auto; display: block; margin: 0 auto; }
.made-by { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); text-decoration: none; }
.made-by img { height: 22px; width: auto; }
.made-by span:last-child { font-weight: 600; color: #1f4f8f; }
.made-by:hover span:last-child { text-decoration: underline; }

/* ---------------- Login page ---------------- */
.lg-body { min-height: 100vh; overflow: auto; margin: 0; font-family: var(--font); color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #e8f0fb 0%, transparent 60%),
              radial-gradient(900px 500px at 110% 110%, #fdecec 0%, transparent 55%), #f6f8fb; position: relative; }
.lg-blob { position: fixed; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; z-index: 0; }
.lg-blob-1 { width: 380px; height: 380px; background: #cfe0f7; top: -120px; left: -80px; }
.lg-blob-2 { width: 320px; height: 320px; background: #fbd5d5; bottom: -120px; right: -60px; }
.lg-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; max-width: 1040px; min-height: 600px;
  margin: 5vh auto; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); border: 1px solid rgba(220,226,234,.9);
  border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(30,50,80,.28), 0 2px 6px rgba(30,50,80,.05); overflow: hidden; }

.lg-brand { position: relative; padding: 46px 44px; background: linear-gradient(160deg, #f9fbfe 0%, #eef3fa 55%, #f7eded 100%);
  border-right: 1px solid #e6ebf1; display: flex; flex-direction: column; overflow: hidden; }
.lg-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(#c9d4e3 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%); }
.lg-brand > * { position: relative; z-index: 1; }
.lg-logo { height: 70px; width: auto; align-self: flex-start; }
.lg-title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 22px 0 8px; color: #222a35; }
.lg-title span { display: block; background: linear-gradient(90deg, #1f4f8f, #c62828); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-tag { color: #5b6677; font-size: 14.5px; line-height: 1.55; max-width: 380px; margin-bottom: 26px; }

.lg-visual { position: relative; height: 190px; margin: 4px 0 24px; }
.lg-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #e3e8ef;
  border-radius: 14px; box-shadow: 0 12px 28px -14px rgba(30,50,80,.35); font-size: 13px; animation: lg-float 6s ease-in-out infinite; }
.lg-card b { display: block; font-weight: 600; color: #222a35; }
.lg-card small { color: #7a8494; font-size: 11.5px; }
.lg-card > .bi:first-child { font-size: 24px; }
.lg-card-a { top: 0; left: 0; width: 240px; } .lg-card-a > .bi { color: #e9b23a; }
.lg-card-b { top: 66px; left: 90px; width: 250px; animation-delay: -2s; } .lg-card-b > .bi:first-child { color: #6b4fbb; }
.lg-card-c { top: 132px; left: 24px; width: 230px; animation-delay: -4s; } .lg-card-c > .bi { color: #1e8e5a; }
.lg-ok { margin-left: auto; color: #1e8e5a; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; background: #1e8e5a; box-shadow: 0 0 0 4px rgba(30,142,90,.15); }
@keyframes lg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.lg-feats { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 10px; }
.lg-feats li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #3c4655; }
.lg-feats .bi { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e3e8ef; color: #1f4f8f; font-size: 15px; }

.lg-form-wrap { display: flex; align-items: center; justify-content: center; padding: 46px 44px; background: #fff; }
.lg-form { width: 100%; max-width: 360px; }
.lg-logo-sm { display: none; height: 56px; margin: 0 auto 6px; }
.lg-app-sm { display: none; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #1f4f8f; margin-bottom: 18px; }
.lg-form h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; color: #222a35; }
.lg-sub { color: #6b7686; font-size: 14px; margin-bottom: 26px; }
.lg-label { display: block; font-size: 12.5px; font-weight: 600; color: #3c4655; margin-bottom: 6px; }
.lg-field { position: relative; display: flex; align-items: center; height: 48px; border: 1.5px solid #dfe5ec; border-radius: 12px;
  background: #f9fbfd; margin-bottom: 16px; transition: border-color .15s, box-shadow .15s, background .15s; }
.lg-field:focus-within { border-color: #2f6fd0; background: #fff; box-shadow: 0 0 0 4px rgba(47,111,208,.12); }
.lg-field > .bi { position: absolute; left: 15px; color: #8a95a5; font-size: 17px; pointer-events: none; }
.lg-field:focus-within > .bi { color: #2f6fd0; }
.lg-field input { flex: 1; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 44px 0 44px; font-size: 14.5px; color: #222a35; border-radius: 12px; }
.lg-field input::placeholder { color: #a4adba; }
.lg-eye { position: absolute; right: 6px; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; color: #7a8494; }
.lg-eye:hover { background: #eef2f7; color: #222a35; }
.lg-caps { display: none; margin: -8px 0 12px; font-size: 12px; color: #b26b00; }
.lg-caps.show { display: block; }
.lg-btn { width: 100%; height: 50px; border: 0; border-radius: 12px; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 15px; color: #fff; background: linear-gradient(135deg, #1f4f8f 0%, #2f6fd0 100%);
  box-shadow: 0 12px 24px -12px rgba(31,79,143,.7); transition: transform .12s, box-shadow .12s, filter .12s; }
.lg-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 28px -12px rgba(31,79,143,.75); }
.lg-btn:active:not(:disabled) { transform: translateY(0); }
.lg-btn:disabled { opacity: .85; }
.lg-btn .bi { transition: transform .15s; } .lg-btn:hover .bi { transform: translateX(3px); }
.lg-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 18px; }
.lg-alert .bi { font-size: 16px; line-height: 1.2; }
.lg-alert.err { background: #fdeceb; color: #a8231d; border: 1px solid #f6c9c6; }
.lg-alert.info { background: #e9f2fd; color: #1f4f8f; border: 1px solid #c8dcf5; }
.lg-secure { margin-top: 18px; font-size: 12px; color: #6b7686; text-align: center; }
.lg-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid #eef1f5; text-align: center; }

@media (max-width: 860px) {
  .lg-shell { grid-template-columns: 1fr; margin: 0; min-height: 100vh; border-radius: 0; border: 0; }
  .lg-brand { display: none; }
  .lg-form-wrap { padding: 40px 22px; align-items: flex-start; }
  .lg-logo-sm, .lg-app-sm { display: block; }
  .lg-form h2, .lg-sub { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .lg-card { animation: none; } }