/* design.nuhub.com.au -- the NuPod Hub's palette, so this reads as the same family */
:root{ --paper:#13171B; --ink:#E9EBED; --muted:#98A2AC; --line:#272E35; --field:#1A2026; --edge:#3B444D;
       --accent:#8FB6C7; --accent-soft:#1D262C; --warn:#E0916F; --warn-soft:#2C1F1A; --ok:#7FC3A2; --ok-soft:#18261F;
       --card:#191E23; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme:dark; }
/* always dark. Both logos are drawn for a light page: they sit on a light chip so they don't vanish */
.logo{ background:#FBFAF8; border-radius:8px; padding:6px 10px; }
html footer img{ background:#FBFAF8; border-radius:6px; padding:3px 7px; height:22px; }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--paper); color:var(--ink);
           font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; }
header{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line); }
header a.brand{ display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
header .logo{ height:30px; width:auto; display:block; }
header .label{ font-weight:700; font-size:1.08rem; letter-spacing:-.015em; padding-left:12px; border-left:1px solid var(--edge); }
.who{ margin-left:auto; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.88rem; }
main{ max-width:460px; margin:48px auto 32px; padding:0 20px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:28px 28px 24px; }
h1{ margin:0 0 6px; font-size:1.45rem; letter-spacing:-.02em; }
.lede{ margin:0 0 22px; color:var(--muted); line-height:1.5; font-size:.95rem; }
.row{ display:flex; gap:12px; }
.row > label{ flex:1; }
label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:14px; }
input{ display:block; width:100%; margin-top:6px; padding:11px 12px; font:inherit; font-size:16px; color:var(--ink);
       background:var(--field); border:1px solid var(--edge); border-radius:9px; }
input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.btn{ display:block; width:100%; margin-top:6px; padding:12px; font:inherit; font-weight:700; font-size:1rem; text-align:center;
      text-decoration:none; border-radius:9px; cursor:pointer; }
.btn.primary{ color:#fff; background:#2E4A5A; border:0; }
.btn.primary:hover{ filter:brightness(1.08); }
.btn.secondary{ color:var(--accent); background:transparent; border:1px solid var(--edge); }
.btn.secondary:hover{ background:var(--accent-soft); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn.small{ display:inline-block; width:auto; margin:0; padding:7px 14px; font-size:.88rem; }
.or{ display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--muted); font-size:.85rem; }
.or::before, .or::after{ content:""; flex:1; height:1px; background:var(--line); }
.hint{ margin:14px 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; }
.links{ display:flex; justify-content:space-between; margin-top:12px; font-size:.88rem; }
.links a, .alt a{ color:var(--accent); font-weight:600; text-decoration:none; }
.links a:hover, .alt a:hover{ text-decoration:underline; }
.alt{ text-align:center; margin:18px 0 0; color:var(--muted); font-size:.92rem; }
.msg{ display:none; margin-top:16px; padding:12px 14px; border-radius:9px; font-size:.92rem; line-height:1.5; }
.msg.ok{ display:block; background:var(--ok-soft); color:var(--ok); }
.msg.bad{ display:block; background:var(--warn-soft); color:var(--warn); }
.msg.info{ display:block; background:var(--accent-soft); color:var(--ink); }
.hidden{ display:none !important; }
.spinner{ width:34px; height:34px; margin:6px auto 16px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent);
          animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
footer{ max-width:460px; margin:0 auto 40px; padding:0 20px; display:flex; align-items:center; justify-content:space-between;
        color:var(--muted); font-size:.8rem; }
footer img{ height:28px; width:auto; box-sizing:content-box; }
@media (max-width:480px){ .row{ display:block; } main{ margin-top:28px; } .card{ padding:22px 18px 18px; } header .label{ display:none; } }

/* the tool, streaming inside the page: a slim bar on top, the stream fills the rest */
body.streaming main, body.streaming footer, body.streaming header.full{ display:none; }
#stream{ display:none; }
body.streaming #stream{ display:flex; flex-direction:column; position:fixed; inset:0; }
#stream .bar{ display:flex; align-items:center; gap:12px; padding:6px 14px; height:46px; border-bottom:1px solid var(--line); background:var(--paper); }
#stream .bar .logo{ height:24px; }
#appstream-container{ flex:1; min-height:0; background:#0d1117; }
#appstream-container iframe{ width:100%; height:100%; border:0; display:block; }
#s-cover{ position:absolute; left:0; right:0; top:46px; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
          background:var(--paper); text-align:center; padding:20px; z-index:2; }
#s-cover.hidden{ display:none !important; }
#s-cover .cover-logo{ height:44px; width:auto; margin-bottom:22px; }
#s-cover h1{ margin:0 0 8px; max-width:560px; line-height:1.3; }

/* (inline style attributes aren't allowed by the page's Content-Security-Policy) */
.center{ text-align:center; }
.mt10{ margin-top:10px !important; }
.mt12{ margin-top:12px !important; }
.secret{ font-family:Consolas,"SFMono-Regular",Menlo,monospace; font-size:1.05rem; letter-spacing:.06em; word-break:break-all;
         background:var(--accent-soft); border-radius:9px; padding:12px 14px; margin:0 0 14px; text-align:center; user-select:all; }
.steps{ margin:0 0 18px; padding-left:20px; color:var(--muted); line-height:1.6; font-size:.92rem; }

/* ---- My Files: our own file window over the stream (files.js) ---- */
#stream .bar .btn-files{ display:inline-flex; align-items:center; gap:7px; margin-left:6px; padding:6px 12px; font:inherit; font-size:.88rem; font-weight:600;
  color:var(--ink); background:transparent; border:1px solid var(--edge); border-radius:8px; cursor:pointer; }
#stream .bar .btn-files:hover{ background:var(--accent-soft); }
#stream .bar .btn-files.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.btn.danger{ color:#fff; background:#A8473F; border:0; }
.btn.danger:hover{ filter:brightness(1.1); }
body.fx-moving, body.fx-moving *{ user-select:none !important; }
body.fx-moving #appstream-container{ pointer-events:none; }
.fx{ position:fixed; z-index:30; display:flex; flex-direction:column; min-width:480px; min-height:320px; background:#161B20; color:var(--ink);
  border:1px solid #333C45; border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); overflow:hidden; font-size:.88rem; outline:none; }
.fx.max{ border-radius:0; border-left:0; border-right:0; border-bottom:0; }
.fx button{ font:inherit; color:inherit; }
.fx svg{ display:block; flex:none; }
.fx-title{ display:flex; align-items:center; gap:8px; height:36px; padding:0 4px 0 12px; background:#1C2228; border-bottom:1px solid var(--line); cursor:default; user-select:none; touch-action:none; }
.fx-ttext{ font-weight:600; font-size:.86rem; }
.fx-grow{ flex:1; }
.fx-wb{ width:40px; height:30px; display:grid; place-items:center; background:none; border:0; border-radius:6px; color:var(--muted); cursor:pointer; }
.fx-wb:hover{ background:#2A323A; color:var(--ink); }
.fx-wb.close:hover{ background:#B5463C; color:#fff; }
.fx-nav, .fx-cmd{ display:flex; align-items:center; gap:4px; padding:6px 8px; border-bottom:1px solid var(--line); }
.fx-cmd{ background:#171C21; }
.fx-tb{ height:30px; min-width:30px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 7px; background:none;
  border:1px solid transparent; border-radius:6px; color:var(--ink); cursor:pointer; white-space:nowrap; }
.fx-tb.text{ padding:0 10px 0 8px; }
.fx-tb:hover:not(:disabled){ background:#242B32; border-color:#2F3840; }
.fx-tb:disabled{ color:#566069; cursor:default; }
.fx-tb.on{ background:var(--accent-soft); border-color:#3A5260; color:var(--accent); }
.fx-tb.spin svg{ animation:spin .9s linear infinite; }
.fx-sep{ width:1px; height:20px; background:var(--line); margin:0 4px; }
.fx-views{ display:flex; gap:2px; }
.fx-crumbs{ flex:1; min-width:0; display:flex; align-items:center; gap:2px; height:30px; padding:0 6px; margin:0 4px; background:var(--field);
  border:1px solid var(--edge); border-radius:7px; overflow:hidden; white-space:nowrap; }
.fx-crumb{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 7px; background:none; border:0; border-radius:5px; cursor:pointer; color:var(--ink); }
.fx-crumb:hover{ background:#2A323A; }
.fx-crumb.plain{ cursor:default; color:var(--muted); }
.fx-crumb.plain:hover{ background:none; }
.fx-crumb svg{ width:15px; height:15px; color:var(--accent); }
.fx-chev{ color:#5F6A74; padding:0 1px; }
.fx-search{ display:flex; align-items:center; gap:6px; width:210px; height:30px; padding:0 9px; background:var(--field); border:1px solid var(--edge);
  border-radius:7px; color:var(--muted); margin:0; font-weight:400; }
.fx-search:focus-within{ border-color:var(--accent); }
.fx-search input{ margin:0; padding:0; border:0; background:none; box-shadow:none; font-size:.86rem; height:100%; min-width:0; }
.fx-search input:focus{ box-shadow:none; }
.fx-main{ flex:1; min-height:0; display:flex; }
.fx-side{ width:172px; flex:none; padding:8px 6px; border-right:1px solid var(--line); overflow:auto; background:#151A1E; }
.fx.narrow .fx-side{ display:none; }
.fx.narrow .fx-tb.text span{ display:none; }
.fx.narrow .fx-search{ width:150px; }
.fx-sitem{ display:flex; align-items:center; gap:9px; width:100%; height:32px; padding:0 9px; background:none; border:0; border-radius:6px; text-align:left; cursor:pointer; }
.fx-sitem:hover{ background:#20272D; }
.fx-sitem.on{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.fx-shead{ margin:14px 9px 5px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6C7782; }
.fx-content{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.fx-note{ display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; font-size:.84rem; line-height:1.4; border-bottom:1px solid var(--line); }
.fx-note span{ flex:1; }
.fx-note.bad{ background:var(--warn-soft); color:var(--warn); }
.fx-note.info{ background:var(--accent-soft); color:var(--ink); }
.fx-x{ width:24px; height:24px; flex:none; background:none; border:0; border-radius:5px; font-size:1.1rem; line-height:1; cursor:pointer; color:inherit; opacity:.75; }
.fx-x:hover{ opacity:1; background:rgba(255,255,255,.08); }
.fx-head, .fx-row{ display:grid; grid-template-columns:minmax(180px,1fr) 168px 140px 84px; align-items:center; }
/* a slim list (narrow window, or the side panel taking the room) drops the Type column */
.fx-content.slim .fx-head, .fx-content.slim .fx-row{ grid-template-columns:minmax(140px,1fr) 150px 0 76px; }
.fx-content.slim .c-type{ visibility:hidden; overflow:hidden; padding:0; border:0; }
.fx-head{ padding:0 10px 0 8px; height:30px; border-bottom:1px solid var(--line); background:#161B20; }
.fx-hc{ display:flex; align-items:center; gap:6px; height:100%; padding:0 8px; background:none; border:0; border-right:1px solid #232A31; text-align:left;
  color:var(--muted); font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; }
.fx-hc:last-child{ border-right:0; justify-content:flex-end; }
.fx-hc:hover{ color:var(--ink); background:#1D2329; }
.fx-hc.on{ color:var(--ink); }
.fx-arrow{ font-size:.6rem; color:var(--accent); }
.fx-body{ flex:1; min-height:0; overflow:auto; outline:none; padding:4px 10px 10px 8px; user-select:none; }
.fx-row{ height:34px; border-radius:6px; border:1px solid transparent; cursor:default; }
.fx-row:hover, .fx-tile:hover{ background:#1E252B; }
.fx-row.sel, .fx-tile.sel{ background:#23394A; border-color:#355A72; }
.fx-row.droptarget, .fx-tile.droptarget{ background:#24413A; border-color:var(--ok); }
.fx-c{ padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:.83rem; }
.fx-c.c-name{ display:flex; align-items:center; gap:9px; color:var(--ink); font-size:.86rem; }
.fx-c.c-size{ text-align:right; }
.fx-ic{ display:flex; flex:none; }
.fx-name{ display:flex; flex-direction:column; min-width:0; }
.fx-ntext{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-where{ font-size:.74rem; color:#77838E; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-body.v-details .fx-row:has(.fx-where){ height:42px; }
.fx-body.v-icons, .fx-body.v-thumbs{ display:grid; align-content:start; gap:6px; padding:10px; }
.fx-body.v-icons{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
.fx-body.v-thumbs{ grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:10px; }
.fx-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px 8px; border-radius:8px; border:1px solid transparent; text-align:center; cursor:default; min-width:0; }
.fx-tile .fx-name{ width:100%; align-items:center; }
.fx-tile .fx-ntext{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; font-size:.84rem; line-height:1.3; }
.fx-pic{ display:grid; place-items:center; }
.v-icons .fx-pic{ height:56px; }
.v-thumbs .fx-pic{ width:100%; height:150px; border-radius:6px; background:#11161A; border:1px solid #232A31; }
.v-thumbs .fx-pic.has{ background:#fff; border-color:#3A434C; overflow:hidden; }
.fx-thumbimg{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.fx-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 24px; color:var(--muted); grid-column:1/-1; }
.fx-state p{ margin:3px 0; line-height:1.5; }
.fx-state p:first-of-type{ color:var(--ink); font-weight:600; font-size:.95rem; margin-bottom:6px; }
.fx-state .btn{ margin-top:14px; }
.fx-rename{ margin:0; padding:2px 6px; height:24px; font-size:.86rem; border-radius:5px; width:100%; max-width:260px; }
.fx-transfers{ border-top:1px solid var(--line); background:#14191D; max-height:34%; display:flex; flex-direction:column; }
.fx-txhead{ display:flex; align-items:center; justify-content:space-between; padding:7px 12px 5px; font-weight:600; font-size:.82rem; }
.fx-txlist{ overflow:auto; padding:0 8px 6px; }
.fx-tx{ display:flex; align-items:center; gap:9px; padding:4px 4px; }
.fx-txmid{ flex:1; min-width:0; }
.fx-txname{ font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.fx-bar{ height:4px; border-radius:2px; background:#262E35; overflow:hidden; }
.fx-fill{ height:100%; background:var(--accent); border-radius:2px; transition:width .2s; }
.fx-tx.done .fx-fill{ background:var(--ok); }
.fx-tx.failed .fx-fill{ background:var(--warn); width:100% !important; opacity:.5; }
.fx-txst{ font-size:.78rem; color:var(--muted); white-space:nowrap; max-width:46%; overflow:hidden; text-overflow:ellipsis; }
.fx-tx.failed .fx-txst{ color:var(--warn); }
.fx-tx.done .fx-txst{ color:var(--ok); }
.fx-link{ background:none; border:0; color:var(--accent) !important; font-weight:600; font-size:.8rem; cursor:pointer; padding:2px 6px; }
.fx-link:hover{ text-decoration:underline; }
.fx-status{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:26px; flex:none; padding:0 12px; border-top:1px solid var(--line);
  background:#1A2026; color:var(--muted); font-size:.76rem; white-space:nowrap; }
.fx-sl, .fx-sr{ overflow:hidden; text-overflow:ellipsis; }
.fx-drop{ position:absolute; inset:36px 0 0 0; z-index:5; display:grid; place-items:center; background:rgba(16,22,27,.72); border:2px dashed var(--accent);
  border-radius:0 0 10px 10px; }
.fx-drop.passthru{ pointer-events:none; }
.fx-dropin{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 26px; border-radius:12px; background:#1C2A33; color:var(--accent);
  box-shadow:var(--shadow); pointer-events:none; }
.fx-dropin svg{ width:34px; height:34px; }
.fx-droptext{ color:var(--ink); font-weight:600; }
.fx-modal{ position:absolute; inset:0; z-index:10; display:grid; place-items:center; background:rgba(8,11,14,.55); }
.fx-ask{ width:min(400px, 90%); background:#1C2228; border:1px solid #333C45; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.5); padding:18px 18px 16px; }
.fx-ask h3{ margin:0 0 6px; font-size:1rem; }
.fx-ask p{ margin:0 0 16px; color:var(--muted); line-height:1.5; }
.fx-askbtns{ display:flex; gap:8px; justify-content:flex-end; }
.fx-rz{ position:absolute; z-index:6; touch-action:none; }
.fx.max .fx-rz{ display:none; }
/* (inside the edge: the window clips anything outside its rounded corners) */
.fx-rz.n{ top:0; left:12px; right:12px; height:5px; cursor:ns-resize; }
.fx-rz.s{ bottom:0; left:12px; right:12px; height:5px; cursor:ns-resize; }
.fx-rz.e{ right:0; top:12px; bottom:12px; width:5px; cursor:ew-resize; }
.fx-rz.w{ left:0; top:12px; bottom:12px; width:5px; cursor:ew-resize; }
.fx-rz.ne{ right:0; top:0; width:12px; height:12px; cursor:nesw-resize; }
.fx-rz.sw{ left:0; bottom:0; width:12px; height:12px; cursor:nesw-resize; }
.fx-rz.nw{ left:0; top:0; width:12px; height:12px; cursor:nwse-resize; }
.fx-rz.se{ right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize; }
.fx-menu{ position:fixed; z-index:40; min-width:200px; padding:5px; background:#1E252B; border:1px solid #38424B; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.fx-mi{ display:flex; align-items:center; gap:10px; width:100%; height:30px; padding:0 10px; background:none; border:0; border-radius:5px; color:var(--ink);
  font:inherit; font-size:.86rem; text-align:left; cursor:pointer; }
.fx-mi span:nth-child(2){ flex:1; }
.fx-mi svg, .fx-mg{ width:16px; height:16px; color:var(--muted); flex:none; }
.fx-mi:hover:not(:disabled){ background:#2A3640; }
.fx-mi:disabled{ color:#5A646D; cursor:default; }
.fx-mi.danger{ color:#F0A08A; }
.fx-mi.danger svg{ color:#F0A08A; }
.fx-mk{ color:#6F7A85; font-size:.76rem; }
.fx-msep{ height:1px; background:#323B43; margin:4px 6px; }
/* the drop target over the Design Tool while a file is dragged out of My Files */
.fx-opentarget{ position:fixed; left:0; right:0; top:46px; bottom:0; z-index:25;
  background:rgba(16,22,27,.35); border:2px dashed rgba(143,182,199,.55); transition:background .12s; }
.fx-opentarget.over{ background:rgba(29,38,44,.62); border-color:var(--accent); }
.fx-opentin{ position:absolute; visibility:hidden; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 30px; border-radius:14px; background:#1C2A33;
  color:var(--accent); box-shadow:var(--shadow); pointer-events:none; max-width:420px; text-align:center; }
.fx-opentarget.over .fx-opentin{ visibility:visible; }
.fx-opentitle{ color:var(--ink); font-weight:700; font-size:1.05rem; }
.fx-opentname{ color:var(--muted); font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.fx-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:35; display:flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:10px; background:#1C2A33; border:1px solid #355A72; color:var(--ink); font-size:.9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45); max-width:80vw; }
.fx-tspin{ display:none; width:14px; height:14px; border-radius:50%; border:2px solid #355A72; border-top-color:var(--accent); animation:spin .9s linear infinite; flex:none; }
.fx-toast.busy .fx-tspin{ display:block; }
/* the stream sits inside a thin border of the page: a file dragged in from the desktop crosses it first,
   so the page sees the drag and can put its drop zone over the tool (files.js desktopDrop) */
body.streaming #stream{ padding:0 6px 6px; background:var(--paper); }
body.streaming #stream .bar{ margin:0 -6px; }
.fx-deskdrop{ left:6px; right:6px; bottom:6px; }
/* armed: invisible, over the tool only while this window isn't the active one (files.js desktopDrop) */
.fx-deskdrop.armed{ background:transparent; border-color:transparent; transition:none; }
.fx-deskdrop.armed .fx-opentin{ visibility:hidden; }
/* My Files: box select, cut items, drop targets for moves */
.fx-body{ position:relative; }
.fx-band{ position:absolute; z-index:3; border:1px solid var(--accent); background:rgba(143,182,199,.14); border-radius:3px; pointer-events:none; }
.fx-row.cut, .fx-tile.cut{ opacity:.45; }
.fx-crumb.droptarget, .fx-sitem.droptarget{ background:#24413A; outline:1px solid var(--ok); }