/* ArcShare transfer content. Shared tokens and primitives: workspace-ui.css. */
:root { --ui-control-radius:var(--arc-radius-sm); --ui-panel-radius:var(--arc-radius-md); --ui-float-shadow:var(--shadow-md); --ui-motion:140ms ease; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--sans); color:var(--t0); -webkit-font-smoothing:antialiased; margin:0; padding:0; min-height:100dvh; justify-content:flex-start; align-items:stretch; }
[data-theme="light"] .logo-dark { display:none; }
[data-theme="light"] .logo-light { display:block; }
.page { display:flex; height:calc(100dvh - var(--arc-nav-h)); overflow:hidden; }
.sidebar { flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; }
.btn-new-folder { color:var(--t2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .13s; }
.folder-list { flex:1; overflow-y:auto; }
.folder-item { display:flex; align-items:center; cursor:pointer; transition:all .13s; font-weight:500; color:var(--t1); user-select:none; }
.folder-item:hover { color:var(--t0); }
.folder-icon { flex-shrink:0; }
.folder-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-count { flex-shrink:0; }
.folder-del { opacity:0; width:16px; height:16px; border-radius:4px; background:transparent; border:none; color:var(--red); cursor:pointer; font-size:var(--text-xs); display:flex; align-items:center; justify-content:center; transition:opacity .13s; flex-shrink:0; }
.folder-item:hover .folder-del { opacity:1; }
.folder-divider { height:1px; background:var(--b1); margin:8px 4px; }
.ws-info { font-size:var(--text-xs); color:var(--t3); font-family:var(--mono); }
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.main-header { display:flex; align-items:center; flex-shrink:0; }
.folder-breadcrumb { color:var(--t0); flex:1; }
.btn-upload { height:var(--control-action-h); padding:0 14px; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .13s; font-family:var(--sans); }
.btn-upload svg { width:14px; height:14px; stroke:currentColor; stroke-width:2.5; fill:none; }
.btn-secondary { height:var(--control-action-h); padding:0 12px; color:var(--t1); border:1px solid var(--b2); border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .13s; font-family:var(--sans); }
.btn-secondary:hover { color:var(--t0); }
.file-area { flex:1; overflow-y:auto; }
.drop-zone-overlay { position:absolute; display:none; align-items:center; justify-content:center; z-index:10; pointer-events:none; }
.drop-zone-overlay.active { display:flex; }
.drop-hint { font-weight:600; color:var(--acc2); text-align:center; }
.file-grid { display:grid; }
.file-card { cursor:default; transition:all .13s; position:relative; display:flex; flex-direction:column; }
.file-card-icon { line-height:1; }
.file-card-name { color:var(--t0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all; }
.file-card-size { font-family:var(--mono); }
.file-card-dl { position:absolute; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity .13s; }
.file-card-dl svg { width:13px; height:13px; stroke:currentColor; stroke-width:2.5; fill:none; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--t3); }
.empty-text { text-align:center; line-height:1.6; }
.empty-text strong { display:block; }
.home-screen { display:flex; flex-direction:column; height:100%; text-align:center; width:min(var(--workspace-max),100%); margin:0 auto; padding:32px var(--arc-page-gutter); justify-content:flex-start; align-items:stretch; gap:24px; }
.home-title { color:var(--t0); font-size:var(--text-title); font-weight:650; line-height:1.2; letter-spacing:-.6px; justify-content:flex-start; }
.home-cards { grid-template-columns:1fr 1fr; max-width:620px; }
.home-card { transition:all .18s; flex-direction:column; gap:8px; min-height:72px; cursor:pointer; }
.join-form { display:flex; flex-direction:column; }
.join-inp { padding:0 12px; font-family:var(--mono); color:var(--t0); text-transform:uppercase; outline:none; width:100%; transition:border-color .13s; }
.btn-join { color:#fff; border:none; font-size:14px; cursor:pointer; transition:all .13s; width:100%; font-family:var(--sans); }
.btn-back { background:none; border:none; font-size:12px; cursor:pointer; font-family:var(--sans); }
.modal-bg { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-bg.open { display:flex; }
.modal { width:100%; max-width:380px; }
.modal-title { font-weight:700; color:var(--t0); margin-bottom:16px; }
.modal-inp { width:100%; border:1px solid var(--b2); color:var(--t0); padding:0 12px; font-family:var(--sans); font-size:14px; outline:none; transition:border-color .13s; }
.modal-inp:focus { border-color:var(--acc); }
.modal-btns { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }
.btn-modal-cancel { height:var(--control-action-h); padding:0 14px; background:transparent; border:1px solid var(--b2); color:var(--t1); border-radius:8px; font-size:13px; cursor:pointer; font-family:var(--sans); }
.btn-modal-ok { height:var(--control-action-h); padding:0 16px; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans); }
.toast { position:fixed; left:50%; transform:translateX(-50%) translateY(80px); color:var(--t0); font-size:13px; font-weight:500; z-index:999; opacity:0; transition:all .25s; pointer-events:none; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.upload-progress { position:fixed; max-width:320px; z-index:500; display:none; }
.upload-progress.show { display:block; }
.up-title { font-size:12px; font-weight:600; color:var(--t1); margin-bottom:8px; }
.up-bar-bg { background:var(--b2); border-radius:2px; overflow:hidden; }
.up-bar { height:100%; border-radius:2px; transition:width .2s; width:0%; }
.up-status { font-size:var(--text-xs); color:var(--t3); margin-top:6px; font-family:var(--mono); }
.ws-code-display { font-family:var(--mono); font-weight:700; color:var(--t0); cursor:pointer; transition:all .13s; text-align:center; }
@media (max-width:640px) {.sidebar { width:180px; }
.file-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }}
@media (max-width:480px) {.page { flex-direction:column; height:calc(100dvh - var(--arc-nav-h)); }
.sidebar { width:100%; height:auto; border-right:none; border-bottom:1px solid var(--b1); }
.folder-list { display:flex; flex-direction:row; overflow-x:auto; padding:4px 8px; gap:4px; }
.folder-item { flex-shrink:0; white-space:nowrap; }}
body { background:var(--bg); margin:0; padding:0; min-height:100dvh; justify-content:flex-start; align-items:stretch; }
.home-screen { padding:32px var(--arc-page-gutter); gap:24px; background:var(--bg); width:min(var(--workspace-max),100%); margin:0 auto; justify-content:flex-start; align-items:stretch; }
.home-screen>div:first-child { max-width:none; }
.home-title { display:flex; align-items:center; justify-content:flex-start; gap:10px; font-size:var(--text-title); font-weight:650; letter-spacing:-.6px; line-height:1.2; }
.home-title::before { content:""; width:24px; height:24px; flex:0 0 24px; background:var(--t2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; display:none; }
.home-title::after { content:"Shared Workspace"; font-size:28px; color:var(--t0); display:none; }
.home-sub { max-width:720px; margin-inline:0; color:var(--t2); font-size:14px; line-height:1.5; text-align:left; }
.home-cards { width:100%; max-width:620px; display:flex; flex-direction:column; gap:9px; }
.home-card { min-height:72px; display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:2px; align-items:center; padding:14px 16px; border:1px solid var(--b2); border-radius:var(--ui-panel-radius); background:var(--s1); box-shadow:none; text-align:left; transform:none; overflow:hidden; cursor:pointer; }
.home-card::after { display:none; }
.home-card:first-child { border-color:var(--acc); background:var(--acc); }
.home-card:hover { border-color:var(--b3); background:var(--s2); box-shadow:none; transform:none; }
.home-card:first-child:hover { border-color:var(--acc2); background:var(--acc); opacity:.94; }
.home-card-icon { grid-row:1 / -1; width:24px; height:24px; display:block; position:relative; font-size:0 !important; color:var(--t2); }
.home-card-icon::before { content:""; position:absolute; inset:1px; background:currentColor; }
.home-card:first-child .home-card-icon { color:#fff; }
.home-card:first-child .home-card-icon::before { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center/contain no-repeat; }
.home-card:nth-child(2) .home-card-icon::before { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M13 8l4 4-4 4M17 12H8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M13 8l4 4-4 4M17 12H8'/%3E%3C/svg%3E") center/contain no-repeat; }
.home-card-label { grid-column:2; font-size:14px; font-weight:700; letter-spacing:-.1px; color:var(--t0); }
.home-card:first-child .home-card-label { color:#fff; }
.home-card-desc { grid-column:2; max-width:none; color:var(--t3); font-family:var(--sans); font-size:var(--text-xs); line-height:1.45; }
.home-card:first-child .home-card-desc { color:#fff; }
.join-form { width:100%; max-width:390px !important; padding:22px; gap:13px; border:1px solid var(--b2); border-radius:var(--ui-panel-radius); background:var(--s1); box-shadow:none; }
.join-label { color:var(--t2); font-family:var(--sans); font-size:var(--text-xs); font-weight:600; }
.join-inp { height:46px; border:1px solid var(--b2); border-radius:var(--ui-control-radius); background:var(--s2); box-shadow:none; font-size:17px; letter-spacing:2.5px; }
.join-inp:focus { border-color:var(--acc2); box-shadow:none; }
#create-expiry { height:46px !important; padding-inline:12px !important; border:1px solid var(--b2) !important; border-radius:var(--ui-control-radius) !important; background:var(--s2) !important; }
.btn-join { height:46px; border-radius:var(--ui-control-radius); background:var(--acc); box-shadow:none; font-weight:700; transform:none; }
.btn-join:hover { opacity:.92; box-shadow:none; transform:none; }
.btn-back { padding:4px; color:var(--t3); text-decoration:none; }
.btn-back:hover { color:var(--t0); }
.page#ws-screen { height:calc(100vh - 64px); background:var(--bg); }
.sidebar { width:240px; border-right:1px solid var(--b1); background:var(--s1); box-shadow:none; }
.sidebar-header { padding:17px 14px 9px; }
.sidebar-title { color:var(--t3); font-family:var(--sans); font-size:var(--text-xs); font-weight:700; letter-spacing:0; text-transform:none; }
.btn-new-folder { width:30px; height:var(--control-action-h); border:1px solid var(--b2); border-radius:var(--ui-control-radius); background:transparent; font-size:16px; transform:none; }
.btn-new-folder:hover { border-color:var(--b3); background:var(--s2); color:var(--t0); transform:none; }
.folder-list { padding:5px 9px 18px; }
.folder-item { gap:9px; margin-bottom:2px; padding:8px 9px; border:1px solid transparent; border-radius:var(--ui-control-radius); font-size:13px; }
.folder-item:hover { background:var(--s2); }
.folder-item.active { border-color:var(--b2); background:var(--acb); box-shadow:none; color:var(--t0); }
.folder-icon { width:17px; height:17px; display:inline-block; flex:0 0 17px; background:var(--t3); border:0; border-radius:0; font-size:0 !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.folder-icon::before { display:none; }
.folder-item.active .folder-icon { background:var(--acc2); }
.folder-count { padding:0; border:0; border-radius:0; background:transparent; color:var(--t3); font-family:var(--sans); font-size:var(--text-xs); }
.ws-info { padding:13px 14px; border-top:1px solid var(--b1); background:var(--s1); }
#ws-code-label { letter-spacing:0 !important; }
.ws-code-display { padding:10px; border:1px solid var(--b2); border-radius:var(--ui-control-radius); background:var(--s2); box-shadow:none; font-size:18px; letter-spacing:3px; }
.ws-code-display:hover { border-color:var(--b3); background:var(--s2); box-shadow:none; color:var(--t0); }
.main { background:var(--bg); }
.main-header { min-height:62px; gap:8px; padding:11px 17px; border-bottom:1px solid var(--b1); background:var(--bg); backdrop-filter:none; }
.folder-breadcrumb { display:flex; align-items:center; gap:8px; font-size:0; font-weight:700; letter-spacing:-.15px; }
.folder-breadcrumb::before { content:""; width:18px; height:18px; flex:0 0 18px; background:var(--t3); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.folder-breadcrumb span { color:var(--t1); font-size:16px; }
.btn-upload,
.btn-secondary { height:var(--control-action-h); padding:0 12px; border-radius:var(--ui-control-radius); box-shadow:none; font-size:12px; transform:none; }
.btn-upload { background:var(--acc); }
.btn-upload:hover { opacity:.92; box-shadow:none; transform:none; }
.btn-secondary { border-color:var(--b2); background:transparent; }
.btn-secondary:hover { border-color:var(--b3); background:var(--s2); transform:none; }
.file-area { padding:17px; scrollbar-gutter:stable; }
.file-grid { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:10px; }
.file-card { min-height:126px; gap:6px; padding:13px; border:1px solid var(--b1); border-radius:var(--ui-panel-radius); background:var(--s1); box-shadow:none; transform:none; overflow:hidden; }
.file-card::before { display:none; }
.file-card:hover { border-color:var(--b2); background:var(--s2); box-shadow:none; transform:none; }
.file-card-icon { width:34px; height:34px; display:block; position:relative; margin-bottom:3px; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:0 !important; }
.file-card-icon::before { content:""; position:absolute; inset:5px 7px 4px 6px; background:var(--t2); border:0; border-radius:0; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.8h8l4 4V21H6z'/%3E%3Cpath d='M14 2.8V7h4M9 12h6M9 16h6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.8h8l4 4V21H6z'/%3E%3Cpath d='M14 2.8V7h4M9 12h6M9 16h6'/%3E%3C/svg%3E") center/contain no-repeat; }
.file-card-name { font-size:13px; font-weight:600; line-height:1.35; }
.file-card-size { color:var(--t3); font-size:var(--text-xs); }
.file-card-time { color:var(--t3); font-size:var(--text-xs); }
.file-card-dl { top:9px; right:9px; width:29px; height:29px; border:1px solid var(--b1); border-radius:var(--ui-control-radius); background:transparent; color:var(--t2); opacity:.72; }
.file-card:hover .file-card-dl { opacity:1; }
.file-card-dl:hover { border-color:var(--b2); background:var(--s3); color:var(--t0); }
.empty-state { height:min(58vh,500px); margin:0; padding:44px; gap:10px; border:0; border-radius:0; background:transparent; }
.empty-icon { width:32px; height:32px; background:var(--t3); border:0; border-radius:0; opacity:.72; font-size:0 !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.empty-text { font-size:13px; }
.empty-text strong { margin-bottom:5px; color:var(--t1); font-size:15px; }
.drop-zone-overlay { inset:9px; border:1px solid var(--acc2); border-radius:var(--ui-panel-radius); background:color-mix(in srgb,var(--acb) 70%,var(--bg)); backdrop-filter:none; }
.drop-hint { display:flex; align-items:center; gap:8px; padding:13px 16px; border:1px solid var(--b2); border-radius:var(--ui-control-radius); background:var(--s1); box-shadow:none; font-size:0 !important; }
.drop-hint::before { content:""; width:18px; height:18px; background:var(--acc2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7.5 8.5 12 4l4.5 4.5'/%3E%3Cpath d='M5 13v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7.5 8.5 12 4l4.5 4.5'/%3E%3Cpath d='M5 13v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.drop-hint::after { content:"Drop files to upload here"; color:var(--acc2); font-size:14px; font-weight:600; }
.modal-bg { background:rgba(5,7,12,.68); backdrop-filter:none; }
.modal { padding:22px; border:1px solid var(--b2); border-radius:var(--ui-panel-radius); background:var(--s1); box-shadow:var(--ui-float-shadow); }
.modal-title { font-size:17px; letter-spacing:-.2px; }
.modal-inp { height:44px; border-radius:var(--ui-control-radius); background:var(--s2); }
.modal-inp:focus { box-shadow:0 0 0 3px var(--acb); }
.btn-modal-cancel,
.btn-modal-ok { height:var(--control-action-h); border-radius:var(--ui-control-radius); }
.btn-modal-ok { background:var(--acc); }
.toast { bottom:22px; padding:9px 14px; border:1px solid var(--b2); border-radius:var(--ui-control-radius); background:var(--s3); box-shadow:none; backdrop-filter:none; }
.upload-progress { right:20px; bottom:20px; min-width:280px; padding:14px 15px; border:1px solid var(--b2); border-radius:var(--ui-panel-radius); background:var(--s1); box-shadow:none; backdrop-filter:none; }
.up-bar-bg { height:4px; }
.up-bar { background:var(--acc); }
.home-card:focus-visible,
.btn-new-folder:focus-visible,
.btn-upload:focus-visible,
.btn-secondary:focus-visible,
.file-card-dl:focus-visible,
.ws-code-display:focus-visible,
.join-inp:focus-visible,
.btn-join:focus-visible,
.modal-inp:focus-visible,
.btn-modal-cancel:focus-visible,
.btn-modal-ok:focus-visible { outline:2px solid var(--acc2); outline-offset:2px; box-shadow:none; }
@media (max-width:900px) {.sidebar { width:210px; }
.file-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.main-header { flex-wrap:wrap; }
.folder-breadcrumb { min-width:100%; order:-1; }}
@media (max-width:640px) {.home-screen { justify-content:flex-start; padding:32px var(--arc-page-gutter); width:min(var(--workspace-max),100%); margin:0 auto; align-items:stretch; gap:24px; }
.home-title::after { font-size:25px; display:none; }
.home-cards { max-width:620px; }
.page#ws-screen { flex-direction:column; }
.sidebar { width:100%; height:auto; max-height:178px; border-right:0; border-bottom:1px solid var(--b1); box-shadow:none; }
.sidebar-header { padding:10px 12px 6px; }
.folder-list { display:flex; flex-direction:row; gap:4px; padding:4px 9px 9px; overflow-x:auto; }
.folder-item { flex:0 0 auto; margin:0; padding:8px 10px; }
.folder-del { display:none; }
.ws-info { display:none; }
.main { min-height:0; }
.main-header { min-height:auto; gap:6px; padding:10px 11px; }
.folder-breadcrumb { min-width:100%; }
.folder-breadcrumb span { font-size:15px; }
.btn-upload,
  .btn-secondary { height:var(--control-action-h); flex:1; justify-content:center; padding-inline:9px; font-size:var(--text-xs); }
.file-area { padding:10px; }
.file-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.file-card { min-height:116px; padding:11px; }
.file-card-dl { top:8px; right:8px; width:28px; height:28px; opacity:1; }
.empty-state { height:42vh; padding:28px 18px; }
.upload-progress { right:12px; bottom:12px; left:12px; min-width:0; max-width:none; }}
@media (max-width:420px) {.file-grid { grid-template-columns:1fr 1fr; }
.home-screen { padding-inline:12px; width:min(var(--workspace-max),100%); margin:0 auto; padding:32px var(--arc-page-gutter); justify-content:flex-start; align-items:stretch; gap:24px; }
.join-form { padding:20px !important; }
.btn-secondary#btn-dl-all { display:none !important; }}