/* ArcShare shared UI layer
   Loaded after page-specific styles so every route shares the same theme,
   navigation shell, logo scale, typography, and foundational surfaces. */

:root {
  color-scheme: dark;
  --arc-nav-h:64px;
  --arc-content-max:1180px;
  --arc-bg:#181b20;
  --arc-s1:#23272d;
  --arc-nav-bg:#24272c;
  --arc-s2:#2a2f36;
  --arc-s3:#333943;
  --arc-s4:#3c444f;
  --arc-b1:rgba(255,255,255,.06);
  --arc-b2:rgba(255,255,255,.11);
  --arc-b3:rgba(255,255,255,.18);
  --arc-b4:rgba(255,255,255,.28);
  --arc-t0:#f4f6fb;
  --arc-t1:#dde2ed;
  --arc-t2:#aab4c8;
  --arc-t3:#7f8ba6;
  --arc-t4:#59647d;
  --arc-acc:#3766c1;
  --arc-acc2:#6f9cf0;
  --arc-acb:rgba(55,102,193,.14);
  --arc-acr:rgba(111,156,240,.30);
  --arc-go:#35c58b;
  --arc-gob:rgba(53,197,139,.10);
  --arc-gor:rgba(53,197,139,.26);
  --arc-red:#f05a70;
  --arc-reb:rgba(240,90,112,.10);
  --arc-rer:rgba(240,90,112,.26);
  --arc-amb:#e9a63a;
  --arc-ambb:rgba(233,166,58,.10);
  --arc-ambr:rgba(233,166,58,.26);
  --arc-pur:#a78bfa;
  --arc-purb:rgba(167,139,250,.12);
  --arc-shadow-xs:0 1px 2px rgba(0,0,0,.24);
  --arc-shadow-sm:0 1px 3px rgba(0,0,0,.36),0 0 0 1px var(--arc-b1);
  --arc-shadow-md:0 8px 24px rgba(0,0,0,.28),0 0 0 1px var(--arc-b1);
  --arc-shadow-lg:0 20px 60px rgba(0,0,0,.38),0 0 0 1px var(--arc-b1);
  --arc-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --arc-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --arc-radius-xs:6px;
  --arc-radius-sm:8px;
  --arc-radius-md:10px;
  --arc-radius-lg:14px;
  --arc-radius-xl:20px;

  /* Canonical variables used by the newer pages. */
  --bg:var(--arc-bg);
  --s1:var(--arc-s1);
  --s2:var(--arc-s2);
  --s3:var(--arc-s3);
  --s4:var(--arc-s4);
  --b1:var(--arc-b1);
  --b2:var(--arc-b2);
  --b3:var(--arc-b3);
  --b4:var(--arc-b4);
  --t0:var(--arc-t0);
  --t1:var(--arc-t1);
  --t2:var(--arc-t2);
  --t3:var(--arc-t3);
  --t4:var(--arc-t4);
  --acc:var(--arc-acc);
  --acc2:var(--arc-acc2);
  --acb:var(--arc-acb);
  --acr:var(--arc-acr);
  --go:var(--arc-go);
  --gob:var(--arc-gob);
  --gor:var(--arc-gor);
  --red:var(--arc-red);
  --reb:var(--arc-reb);
  --rer:var(--arc-rer);
  --amb:var(--arc-amb);
  --ambb:var(--arc-ambb);
  --ambr:var(--arc-ambr);
  --pur:var(--arc-pur);
  --purb:var(--arc-purb);
  --blue:var(--arc-acc2);
  --blb:var(--arc-acb);
  --blr:var(--arc-acr);
  --sans:var(--arc-sans);
  --mono:var(--arc-mono);
  --nav-bg:var(--arc-nav-bg);
  --nav-h:var(--arc-nav-h);
  --sh:var(--arc-shadow-sm);
  --sh2:var(--arc-shadow-md);
  --sh-lg:var(--arc-shadow-lg);

  /* Compatibility aliases used by older and utility pages. */
  --bg2:var(--arc-s1);
  --bg3:var(--arc-s2);
  --bg4:var(--arc-s3);
  --bg5:var(--arc-s4);
  --surface:var(--arc-s1);
  --surface-2:var(--arc-s2);
  --surface-3:var(--arc-s3);
  --text:var(--arc-t0);
  --text2:var(--arc-t2);
  --text3:var(--arc-t3);
  --text4:var(--arc-t4);
  --border:var(--arc-b2);
  --border2:var(--arc-b3);
  --border3:var(--arc-b4);
  --border-2:var(--arc-b3);
  --border-3:var(--arc-b4);
  --r1:var(--arc-b1);
  --r2:var(--arc-b2);
  --r3:var(--arc-b3);
  --r4:var(--arc-b4);
  --r:var(--arc-radius-lg);
  --r-sm:var(--arc-radius-sm);
  --ra:var(--arc-radius-xl);
  --rb:var(--arc-radius-lg);
  --rc:var(--arc-radius-md);
  --rd:var(--arc-radius-sm);
  --re:var(--arc-radius-xs);
  --r-xs:var(--arc-radius-xs);
  --r-md:var(--arc-radius-md);
  --r-lg:var(--arc-radius-lg);
  --r-xl:var(--arc-radius-xl);
  --acc-2:var(--arc-acc2);
  --acc-bg:var(--arc-acb);
  --acc-bg-strong:var(--arc-acr);
  --acc-rim:var(--arc-acr);
  --blue-dim:var(--arc-acb);
  --blue-txt:var(--arc-acc2);
  --green:var(--arc-go);
  --green-bg:var(--arc-gob);
  --green-br:var(--arc-gor);
  --green-dim:var(--arc-gob);
  --green-txt:var(--arc-go);
  --go-bg:var(--arc-gob);
  --go-rim:var(--arc-gor);
  --red-bg:var(--arc-reb);
  --red-br:var(--arc-rer);
  --red-dim:var(--arc-reb);
  --red-rim:var(--arc-rer);
  --amber:var(--arc-amb);
  --amber-bg:var(--arc-ambb);
  --amber-br:var(--arc-ambr);
  --amber-dim:var(--arc-ambb);
  --amb-bg:var(--arc-ambb);
  --amb-rim:var(--arc-ambr);
  --pur-bg:var(--arc-purb);
  --shadow:var(--arc-shadow-sm);
  --shadow-xs:var(--arc-shadow-xs);
  --shadow-sm:var(--arc-shadow-sm);
  --shadow-md:var(--arc-shadow-md);
  --shadow-lg:var(--arc-shadow-lg);
  --shadow-soft:var(--arc-shadow-md);
  --input-bg:var(--arc-s2);
  --input-br:var(--arc-b2);
  --btn:var(--arc-t0);
  --btn-txt:var(--arc-bg);
}

html[data-theme='light'] {
  color-scheme: light;
  --arc-bg:#edf0f4;
  --arc-s1:#ffffff;
  --arc-nav-bg:#f8f8f4;
  --arc-s2:#f5f7fa;
  --arc-s3:#e8ecf2;
  --arc-s4:#dbe1e9;
  --arc-b1:rgba(16,24,40,.05);
  --arc-b2:rgba(16,24,40,.10);
  --arc-b3:rgba(16,24,40,.17);
  --arc-b4:rgba(16,24,40,.26);
  --arc-t0:#111724;
  --arc-t1:#263044;
  --arc-t2:#4f5f78;
  --arc-t3:#78859b;
  --arc-t4:#a2acba;
  --arc-acc:#315fba;
  --arc-acc2:#2855a7;
  --arc-acb:rgba(49,95,186,.09);
  --arc-acr:rgba(49,95,186,.24);
  --arc-go:#087957;
  --arc-gob:rgba(8,121,87,.09);
  --arc-gor:rgba(8,121,87,.22);
  --arc-red:#c92d49;
  --arc-reb:rgba(201,45,73,.08);
  --arc-rer:rgba(201,45,73,.22);
  --arc-amb:#9a6716;
  --arc-ambb:rgba(154,103,22,.09);
  --arc-ambr:rgba(154,103,22,.22);
  --arc-shadow-xs:0 1px 2px rgba(17,24,39,.04);
  --arc-shadow-sm:0 1px 3px rgba(17,24,39,.08),0 0 0 1px var(--arc-b1);
  --arc-shadow-md:0 8px 24px rgba(17,24,39,.09),0 0 0 1px var(--arc-b1);
  --arc-shadow-lg:0 20px 60px rgba(17,24,39,.13),0 0 0 1px var(--arc-b1);
  --nav-bg:var(--arc-nav-bg);
  --btn:var(--arc-t0);
  --btn-txt:#ffffff;
  --input-bg:#ffffff;
  --input-br:var(--arc-b3);
}

html,
body {
  background:var(--bg)!important;
  color:var(--t0)!important;
  font-family:var(--sans)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family:inherit;
}

a {
  text-underline-offset:2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:2px solid var(--acc2)!important;
  outline-offset:2px!important;
}

/* Canonical application navigation. */
.topnav {
  --nav-h:var(--arc-nav-h);
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  height:var(--arc-nav-h)!important;
  min-height:var(--arc-nav-h)!important;
  padding:0 24px!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  background:var(--nav-bg)!important;
  border:0!important;
  border-bottom:1px solid var(--b2)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  flex-shrink:0!important;
}

.nav-logo {
  width:112px!important;
  height:100%!important;
  margin:0 22px 0 0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 112px!important;
  overflow:hidden!important;
  text-decoration:none!important;
}

.nav-logo img {
  display:none!important;
  width:auto!important;
  height:52px!important;
  max-width:112px!important;
  object-fit:contain!important;
  object-position:left center!important;
  flex:none!important;
}

html[data-theme='dark'] .nav-logo .logo-dark,
html[data-theme='light'] .nav-logo .logo-light {
  display:block!important;
}

.nav-links {
  display:flex!important;
  align-items:center!important;
  gap:2px!important;
  min-width:0!important;
  flex:1!important;
}

.nav-link {
  min-height:34px!important;
  padding:0 11px!important;
  border:0!important;
  border-radius:8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  color:var(--t3)!important;
  font-family:var(--sans)!important;
  font-size:13px!important;
  font-weight:550!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transition:background .14s,color .14s!important;
}

.nav-link:hover {
  background:var(--b1)!important;
  color:var(--t0)!important;
}

.nav-link.active {
  background:var(--b2)!important;
  color:var(--t0)!important;
  font-weight:650!important;
}

.nav-right {
  min-width:max-content!important;
  margin-left:14px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-shrink:0!important;
}

.nav-pip {
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:var(--go)!important;
  border:1px solid color-mix(in srgb,var(--go) 70%,var(--s1))!important;
  box-shadow:none!important;
  animation:none!important;
}

.nav-theme-btn,
.nav-theme,
.theme-btn,
.btn-theme,
.arc-theme-toggle {
  width:auto!important;
  min-width:94px!important;
  height:34px!important;
  padding:0 10px!important;
  border:1px solid var(--b2)!important;
  border-radius:9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  background:var(--s2)!important;
  color:var(--t2)!important;
  font-family:var(--mono)!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:background .14s,border-color .14s,color .14s!important;
}

.nav-theme-btn:hover,
.nav-theme:hover,
.theme-btn:hover,
.btn-theme:hover,
.arc-theme-toggle:hover {
  background:var(--s3)!important;
  border-color:var(--b3)!important;
  color:var(--t0)!important;
}

.arc-theme-icon {
  width:14px;
  text-align:center;
  font-size:13px;
  line-height:1;
}

.arc-theme-label {
  min-width:29px;
  text-align:left;
}

.nav-tpill {
  width:28px!important;
  height:16px!important;
  border-radius:999px!important;
  background:var(--acc)!important;
  position:relative!important;
  flex-shrink:0!important;
  transition:background .15s!important;
}

.nav-tpill.off {
  background:var(--b4)!important;
}

.nav-tthumb {
  width:12px!important;
  height:12px!important;
  border-radius:50%!important;
  background:#fff!important;
  position:absolute!important;
  top:2px!important;
  right:2px!important;
  left:auto!important;
  transition:left .15s,right .15s!important;
}

.nav-tpill.off .nav-tthumb {
  left:2px!important;
  right:auto!important;
}

.arc-menu-btn {
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--b2);
  border-radius:9px;
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--s2);
  color:var(--t2);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.arc-mobile-panel {
  position:absolute;
  top:calc(100% + 8px);
  right:14px;
  width:min(300px,calc(100vw - 28px));
  padding:8px;
  border:1px solid var(--b2);
  border-radius:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  background:var(--s1);
  box-shadow:var(--shadow-lg);
}

.arc-mobile-panel[hidden] {
  display:none!important;
}

.arc-mobile-panel .nav-link {
  justify-content:flex-start!important;
  width:100%!important;
}

/* Compact detail-page navigation uses the same bar and logo dimensions. */
.arc-detail-nav {
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
}

.arc-detail-title {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--t1);
  font-size:13px;
  font-weight:650;
}

.arc-detail-spacer {
  flex:1;
}

.arc-detail-action {
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--b2);
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--t2);
  background:var(--s2);
  font-size:12px;
  font-weight:550;
  text-decoration:none;
  white-space:nowrap;
}

.arc-detail-action:hover {
  color:var(--t0);
  background:var(--s3);
  border-color:var(--b3);
}

body[data-arc-shell='detail'] > .arc-detail-nav {
  position:fixed!important;
  left:0!important;
  top:0!important;
  margin:0!important;
}

body[data-arc-shell='detail'] {
  padding-top:calc(var(--arc-nav-h) + 24px)!important;
}

/* Normalize common page shells without flattening page-specific layouts. */
body[data-arc-page='tools'] .page-wrap,
body[data-arc-page='webtools'] .page,
body[data-arc-page='guides'] .app-wrap {
  width:min(var(--arc-content-max),calc(100% - 40px))!important;
  max-width:var(--arc-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body[data-arc-page='scripts'] .page-wrap {
  max-width:1400px!important;
}

body[data-arc-page='chat-lobby'] .page {
  min-height:calc(100vh - var(--arc-nav-h))!important;
}

body[data-arc-page='transfer'] .page {
  height:calc(100vh - var(--arc-nav-h))!important;
}

body[data-arc-page='request'] > main,
body[data-arc-page='paste'] > main,
body[data-arc-page='shorten'] > main {
  padding-top:28px!important;
}

/* Shared surface, input, and disabled-state polish. */
.card,
.panel,
.lc,
.join-card,
.reader,
.modal,
.home-card,
.file-card {
  border-color:var(--b2)!important;
}

input,
textarea,
select {
  accent-color:var(--acc);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor:not-allowed!important;
  opacity:.55!important;
}

.toast {
  box-shadow:var(--shadow-md)!important;
}

@media (max-width:1120px) {
  .topnav {
    padding:0 16px!important;
  }
  .nav-logo {
    width:100px!important;
    flex-basis:100px!important;
    margin-right:12px!important;
  }
  .nav-logo img {
    max-width:100px!important;
  }
  .nav-link {
    padding:0 8px!important;
    font-size:12px!important;
  }
  .arc-theme-label {
    display:none;
  }
  .nav-theme-btn,
  .nav-theme,
  .theme-btn,
  .btn-theme,
  .arc-theme-toggle {
    min-width:58px!important;
  }
}

@media (max-width:820px) {
  :root {
    --arc-nav-h:58px;
  }
  .topnav {
    height:var(--arc-nav-h)!important;
    min-height:var(--arc-nav-h)!important;
    padding:0 14px!important;
  }
  .nav-logo {
    width:96px!important;
    flex-basis:96px!important;
    margin-right:10px!important;
  }
  .nav-logo img {
    height:46px!important;
    max-width:96px!important;
  }
  .topnav:not(.arc-detail-nav) > .nav-links {
    display:none!important;
  }
  .arc-menu-btn {
    display:inline-flex;
  }
  .nav-right {
    margin-left:auto!important;
  }
  .nav-pip {
    display:none!important;
  }
  .arc-detail-title {
    font-size:12px;
  }
  .arc-detail-action {
    padding:0 9px;
    font-size:11px;
  }
  body[data-arc-page='tools'] .page-wrap,
  body[data-arc-page='webtools'] .page,
  body[data-arc-page='guides'] .app-wrap {
    width:calc(100% - 28px)!important;
  }
  body[data-arc-shell='detail'] {
    padding-top:calc(var(--arc-nav-h) + 18px)!important;
  }
}

@media (max-width:520px) {
  .nav-logo {
    width:84px!important;
    flex-basis:84px!important;
  }
  .nav-logo img {
    max-width:84px!important;
  }
  .nav-theme-btn,
  .nav-theme,
  .theme-btn,
  .btn-theme,
  .arc-theme-toggle {
    min-width:54px!important;
    padding:0 8px!important;
  }
  .arc-detail-title {
    display:none;
  }
  .arc-detail-action {
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* ArcShare compact shell viewport anchor */
body[data-arc-shell='compact'] > .arc-detail-nav,
body[data-arc-shell='detail'] > .arc-detail-nav {
  position:fixed!important;
  top:0!important;
  right:0!important;
  left:0!important;
  width:100%!important;
  margin:0!important;
  transform:none!important;
}

body[data-arc-shell='compact'],
body[data-arc-shell='detail'] {
  padding-top:calc(var(--arc-nav-h) + 24px)!important;
}

@media (max-width:820px) {
  body[data-arc-shell='compact'],
  body[data-arc-shell='detail'] {
    padding-top:calc(var(--arc-nav-h) + 18px)!important;
  }
}


/* ArcShare route overflow containment */
body[data-arc-page='chat-lobby'] .page {
  overflow-x:clip!important;
}

body[data-arc-page='chat-lobby'] .page::before {
  width:min(720px,100vw)!important;
}


/* ArcShare Receive shell viewport anchor */
body[data-arc-page='get'] > .arc-app-nav {
  position:fixed!important;
  top:0!important;
  right:0!important;
  left:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

body[data-arc-page='get'] {
  padding-top:var(--arc-nav-h)!important;
}

body[data-arc-page='get'] > .back,
body[data-arc-page='get'] > .theme-btn {
  display:none!important;
}


/* ArcShare legacy navigation cleanup */
body[data-arc-page='home'] .mobile-nav {
  display:none!important;
}

@media (max-width:640px) {
  body[data-arc-page='home'] .upload-shell {
    padding-bottom:32px!important;
  }
}