@import url('/ui-refinement-v1.css');

/* ArcShare Transfer — restrained workspace polish
   Presentation only. Existing workspace behavior is unchanged. */

body{
  background:var(--bg);
}

/* Landing / create / join */
.home-screen{
  padding:44px 24px;
  gap:22px;
  background:var(--bg);
}

.home-screen>div:first-child{
  max-width:540px;
}

.home-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:0;
  font-weight:800;
  letter-spacing:-.6px;
  line-height:1.1;
}

.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;
}

.home-title::after{
  content:'Shared Workspace';
  font-size:28px;
  color:var(--t0);
}

.home-sub{
  max-width:470px;
  margin-inline:auto;
  color:var(--t2);
  font-size:14px;
  line-height:1.6;
}

.home-cards{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.home-card{
  min-height:0;
  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;
}

.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:11px;
  line-height:1.45;
}

.home-card:first-child .home-card-desc{
  color:rgba(255,255,255,.72);
}

.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:11px;
  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:0 0 0 3px var(--acb);
}

#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);
}

/* Workspace */
.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:11px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}

.btn-new-folder{
  width:30px;
  height:30px;
  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:10px;
}

.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:36px;
  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 browser */
.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:10px;
}

.file-card-time{
  color:var(--t3);
  font-size:11px;
}

.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;
}

/* Dialogs and feedback. This is the one place ArcShare uses a floating shadow. */
.modal-bg{
  background:rgba(5,7,12,.68);
  backdrop-filter:blur(5px);
}

.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:36px;
  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:var(--ui-float-shadow);
  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:10vh 16px 30px;
  }

  .home-title::after{
    font-size:25px;
  }

  .home-cards{
    max-width:420px;
  }

  .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:36px;
    flex:1;
    justify-content:center;
    padding-inline:9px;
    font-size:11px;
  }

  .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;
  }

  .join-form{
    padding:20px!important;
  }

  .btn-secondary#btn-dl-all{
    display:none!important;
  }
}