:root {
  --gd-g: #0a0a0c; --gd-s: #111216; --gd-s2: #15171c; --gd-t: #e8e6e3;
  --gd-m: rgba(232, 230, 227, .66); --gd-m2: rgba(232, 230, 227, .5);
  --gd-hair: rgba(255, 255, 255, .09); --gd-hair2: rgba(255, 255, 255, .16);
  --gd-amber: #e6c07b; --gd-mint: #a8e6a1; --gd-red: #e88b80;
  --gd-font: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
}


body, .MuiTypography-root, .MuiButtonBase-root, .MuiInputBase-root, .MuiTableCell-root, .MuiMenuItem-root, .MuiChip-label {
  font-family: var(--gd-font) !important;
}
body { font-variant-numeric: tabular-nums; }


.gd-hide { display: none !important; }


html.gd-visitor #root, html.gd-visitor #app-loader { visibility: hidden !important; }
html.gd-fallback #root, html.gd-fallback #app-loader { visibility: visible !important; }


.gd-avatar .MuiAvatar-root { background: transparent url(/_ui/mark.png) center / 30px 30px no-repeat !important; color: transparent !important; }


.MuiDrawer-paper { background: var(--gd-g) !important; }
.MuiDrawer-paper .MuiButtonBase-root { border-radius: 8px !important; }
.MuiTreeItem-content { border-radius: 8px !important; }
.gd-disk { margin: 6px 10px 2px; font-size: 11.5px; color: var(--gd-m); }
.gd-disk .cap { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-m2); font-weight: 600; margin-top: 8px; }
.gd-disk .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); margin: 5px 0 4px; overflow: hidden; }
.gd-disk .bar i { display: block; height: 100%; background: var(--gd-t); }


.gd-nav { margin: 10px 8px 4px; border-top: 1px solid var(--gd-hair); padding-top: 8px; }
.gd-nav .cap { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-m2); font-weight: 600; padding: 2px 10px 4px; }
.gd-nav a { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; color: var(--gd-t); text-decoration: none; font: 13.5px var(--gd-font); }
.gd-nav a:hover { background: rgba(255, 255, 255, .05); }
.gd-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }


[data-gd-ext]::after {
  content: attr(data-gd-ext); font: 600 9px/1 var(--gd-font); letter-spacing: .08em; border: 1px solid var(--gd-hair2);
  color: var(--gd-m); border-radius: 4px; padding: 2px 4px; margin-left: 7px; vertical-align: 1px; white-space: nowrap;
}
[data-gd-exp]::before {
  content: attr(data-gd-exp); font: 600 9px/1 var(--gd-font); letter-spacing: .08em; border: 1px solid rgba(230, 192, 123, .45);
  color: var(--gd-amber); border-radius: 4px; padding: 2px 5px; margin-right: 8px; vertical-align: 1px; white-space: nowrap;
}


.MuiLinearProgress-root { background: rgba(255, 255, 255, .1) !important; border-radius: 2px; }
.MuiLinearProgress-bar { background: var(--gd-t) !important; }


.MuiDialog-paper, .MuiMenu-paper, .MuiPopover-paper { border: 1px solid var(--gd-hair2); box-shadow: 0 12px 40px rgba(0, 0, 0, .55) !important; }
.MuiButton-containedPrimary { box-shadow: none !important; }


.gd-share { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 6px; font-family: var(--gd-font); color: var(--gd-t); }
.gd-share .cap { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-m2); font-weight: 600; }
.gd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-chip { appearance: none; background: none; border: 1px solid var(--gd-hair2); border-radius: 8px; padding: 6px 11px; font: 500 13px var(--gd-font); color: var(--gd-m); cursor: pointer; }
.gd-chip[aria-pressed="true"] { border-color: var(--gd-t); color: var(--gd-t); }
.gd-pw { display: flex; align-items: center; gap: 8px; border: 1px solid var(--gd-hair2); border-radius: 9px; padding: 8px 10px; background: rgba(255, 255, 255, .03); }
.gd-pw input { flex: 1; background: none; border: 0; outline: 0; color: var(--gd-t); font: 14px ui-monospace, Menlo, monospace; }
.gd-pw label { color: var(--gd-m2); font-size: 12.5px; }
.gd-note { font-size: 12px; color: var(--gd-m); }

.gd-share-native-hidden .MuiDialogContent-root > div:not(.gd-share) { position: absolute !important; left: -10000px !important; top: 0; width: 360px; pointer-events: none; }


.gd-qr { display: flex; gap: 12px; align-items: center; margin: 10px 0 2px; font: 12px var(--gd-font); color: var(--gd-m); }
.gd-qr canvas, .gd-qr img { width: 112px; height: 112px; border-radius: 8px; background: #fff; padding: 6px; image-rendering: pixelated; }


.gd-shares { padding: 18px 24px; font-family: var(--gd-font); color: var(--gd-t); }
.gd-shares h1 { font-size: 22px; font-weight: 600; margin: 4px 0 14px; display: flex; align-items: center; gap: 12px; }
.gd-shares table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gd-shares th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-m2); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--gd-hair2); }
.gd-shares td { padding: 9px 8px; border-bottom: 1px solid var(--gd-hair); vertical-align: middle; }
.gd-shares td.r, .gd-shares th.r { text-align: right; }
.gd-shares .warn { color: var(--gd-amber); font-weight: 600; }
.gd-shares .dim { color: var(--gd-m2); }
.gd-act { appearance: none; background: none; border: 1px solid var(--gd-hair2); color: var(--gd-t); border-radius: 7px; padding: 4px 9px; font: 600 12px var(--gd-font); cursor: pointer; margin-left: 4px; }
.gd-act:hover { border-color: var(--gd-t); }
.gd-act.stop { color: var(--gd-red); }
.gd-empty { color: var(--gd-m); padding: 30px 8px; }
.gd-shares-native-hidden > *:not(.gd-shares) { display: none !important; }


.gd-v { position: fixed; inset: 0; z-index: 2147483000; background: var(--gd-g); color: var(--gd-t); font-family: var(--gd-font);
  display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); overflow: auto; }
.gd-v .wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.gd-v .wrap.wide { max-width: 560px; }
.gd-v .top { text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gd-m2); font-weight: 600; }
.gd-v .box { background: var(--gd-s); border: 1px solid var(--gd-hair2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gd-v .file { display: flex; gap: 12px; align-items: center; }
.gd-v .file img.ic { width: 30px; height: 30px; }
.gd-v .name { font-weight: 600; word-break: break-word; }
.gd-v .meta { color: var(--gd-m); font-size: 12.5px; }
.gd-v .btn { appearance: none; border: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--gd-t); color: var(--gd-g); border-radius: 10px; padding: 11px; font: 600 15px var(--gd-font); cursor: pointer; width: 100%; }
.gd-v .btn[disabled] { opacity: .5; }
.gd-v input[type=password], .gd-v input[type=text] { width: 100%; border: 1px solid var(--gd-hair2); border-radius: 10px; padding: 11px 12px; background: rgba(255, 255, 255, .035); color: var(--gd-t); font: 15px var(--gd-font); outline: 0; }
.gd-v input:focus { border-color: var(--gd-t); }
.gd-v .err { color: var(--gd-red); font-size: 13px; }
.gd-v .pv { border-radius: 10px; overflow: hidden; background: #000; display: grid; place-items: center; }
.gd-v .pv img, .gd-v .pv video { max-width: 100%; max-height: 60vh; display: block; }
.gd-v .row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--gd-hair); }
.gd-v .row:last-child { border-bottom: 0; }
.gd-v .row .name { flex: 1; font-weight: 500; }
.gd-v .row button { appearance: none; background: none; border: 1px solid var(--gd-hair2); color: var(--gd-t); border-radius: 8px; padding: 5px 10px; font: 600 12.5px var(--gd-font); cursor: pointer; }
.gd-v svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


html.gd-login #root { visibility: hidden; }
html.gd-fallback.gd-login #root { visibility: visible; }
.gd-login-card .lock { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 4px; }
.gd-login-card .lock img { width: 30px; height: 30px; }
.gd-login-card .lock b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.gd-login-card .lock i { display: block; font-style: normal; font-size: 9px; letter-spacing: .34em; color: var(--gd-m2); margin-top: 4px; }
.gd-v .btn.ghost { background: transparent; color: var(--gd-t); border: 1px solid var(--gd-hair2); }


.gd-tabs { display: none; }
@media (max-width: 600px) {
  html.gd-owner:not(.gd-visitor):not(.gd-login) .gd-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: var(--gd-g); border-top: 1px solid var(--gd-hair);
    padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); justify-content: space-around;
  }
  html.gd-owner:not(.gd-visitor):not(.gd-login) #root { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .gd-tabs button { appearance: none; background: none; border: 0; color: var(--gd-m); display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 10.5px var(--gd-font); padding: 4px 10px; cursor: pointer; }
  .gd-tabs button.on { color: var(--gd-t); }
  .gd-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .gd-shares { padding: 12px; }
  .gd-shares .hide-sm { display: none; }
}


.gd-toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--gd-s2); border: 1px solid var(--gd-hair2); color: var(--gd-t); padding: 9px 14px; border-radius: 9px; font: 13.5px var(--gd-font); z-index: 2147483600; }