@font-face{
  font-family:"VelaSans";
  src:url("../assets/fonts/VelaSans-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --text:#0e0e0e;
  --muted:#6b7280;
  --border:#d6d8de;
  --border2:#e6e7eb;
  --radius:18px;
  --container:1280px;
  --black:#0e0e0e;
  --bg:#fff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

[hidden]{
  display:none !important;
}

body{
  margin:0;
  font-family:"VelaSans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
}

/* =========================
   TOPBAR
   ========================= */

.topbar{
  width:100%;
  margin:0;
  padding:22px 0;
  display:block;
}

.topbar__inner{
  width:calc(100% - 64px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.topbar__left{ justify-self:start; }
.topbar__right{ justify-self:end; }

.brand{
  display:flex;
  align-items:center;
  gap:20px;
  justify-self:center;
}

.brand__logo{
  height:24px;
  display:block;
}

.brand__divider{
  width:1px;
  height:42px;
  background:#c9c9c9;
}

.brand__title{
  font-weight:700;
  font-size:32px;
}

.chip{
  height:42px;
  padding:0 30px;
  border-radius:12px;
  border:1px solid var(--black);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  background:#fff;
  color:var(--black);
  transition:transform .03s ease, opacity .15s ease, background .15s ease;
  width:fit-content;
}

.chip:active{
  transform:translateY(1px);
}

.chip--dark{
  background:var(--black);
  color:#fff;
  border-color:var(--black);
}

.chip--dark:hover{
  background:#222;
}

/* =========================
   PAGE
   ========================= */

.page{
  width:min(var(--container), calc(100% - 64px));
  margin:0 auto;
  padding:18px 0 72px;
}

/* =========================
   TABS
   ========================= */

.editTabs{
  display:flex;
  gap:10px;
  margin-bottom:24px;
}

.editTab{
  height:42px;
  padding:0 24px;
  border-radius:12px;
  border:1.5px solid var(--border2);
  background:#fff;
  color:var(--muted, #6b7280);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}

.editTab:hover{
  border-color:#bbb;
  color:var(--black);
}

.editTab--active{
  border-color:var(--black);
  color:var(--black);
  background:#fff;
}

.editActionBar{
  width:min(var(--container), calc(100% - 64px));
  margin:16px auto 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.editTopWrap{
  width:min(var(--container), calc(100% - 64px));
  margin:0 auto;
}

.editTop{
  display:grid;
  grid-template-columns:220px 640px;
  column-gap:96px;
  row-gap:0;
  align-items:start;
  justify-content:center;
  padding-top:10px;
  width:100%;
}

.editRightCol{
  min-width:0;
}

.h2{
  margin:0 0 16px;
  font-size:16px;
  font-weight:900;
  color:#1b1b1b;
}

/* avatar */

.avatarCard{
  width:220px;
  padding-top:6px;
}

.avatarCard__title{
  font-weight:900;
  font-size:13px;
  margin-bottom:12px;
}

.avatarBox{
  width:220px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  min-height:280px;
  cursor:pointer;
  background:#fff;
  outline:none;
}

.avatarBox:focus{
  box-shadow:0 0 0 3px rgba(2,2,2,.08);
}

.avatarBox__preview{
  width:100%;
  height:180px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.avatarPlaceholder .smile{
  width:72px;
  height:72px;
  border-radius:999px;
  border:2px solid #444;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  opacity:.75;
}

#avatarPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.avatarBox__hint{
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.avatarCard__btn{
  width:100%;
  margin-top:10px;
}

.btn--danger{
  border-color:#fca5a5;
  color:#991b1b;
}
.btn--danger:hover{
  background:#fff1f1;
}

/* form */

.formCard{
  width:640px;
  max-width:100%;
  padding-top:6px;
}

.field{
  display:grid;
  gap:9px;
  margin-bottom:16px;
}

label{
  font-size:13px;
  font-weight:800;
  color:#202020;
}

.input{
  width:100%;
  height:48px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 16px;
  font-size:14px;
  background:#fff;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.input:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(2,2,2,.08);
}

.input--readonly{
  background:#f9fafb;
  color:#9aa0aa;
  cursor:default;
}
.input--readonly:focus{
  border-color:var(--border);
  box-shadow:none;
}

.fieldHint{
  font-size:12px;
  color:#9aa0aa;
  margin-top:4px;
  display:block;
}

/* separator */

.sep{
  border:0;
  border-top:1px solid var(--border2);
  margin:30px 0;
}

/* showcases */

.showcases{
  padding-top:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.showcases .editTabs{
  width:580px;
  max-width:100%;
}

.showcasesEmpty,
.showcasesContent,
.showcaseMenu{
  width:580px;
  max-width:100%;
}

.showcasesEmpty{
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.addShowcaseBtn{
  width:68px;
  height:68px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--black);
  font-size:36px;
  line-height:1;
  font-weight:400;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  transition:transform .03s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}

.addShowcaseBtn:hover{
  background:#fafafa;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.addShowcaseBtn:active{
  transform:translateY(1px);
}

.addShowcaseBtn--small{
  width:50px;
  height:50px;
  font-size:28px;
}

.showcasesAddMore{
  margin-top:16px;
  display:flex;
  justify-content:center;
}

.showcaseMenu{
  display:grid;
  gap:10px;
  margin-top:12px;
  margin-bottom:8px;
}

.showcaseMenu__item{
  width:100%;
  min-height:48px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--black);
  padding:0 16px;
  text-align:left;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s ease, transform .03s ease, box-shadow .15s ease, opacity .15s ease;
}

.showcaseMenu__item:hover{
  background:#fafafa;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.showcaseMenu__item:active{
  transform:translateY(1px);
}

.showcaseMenu__item.is-disabled,
.showcaseMenu__item:disabled{
  opacity:.55;
  cursor:default;
  box-shadow:none;
}

.showList{
  width:580px;
  max-width:100%;
  display:grid;
  gap:14px;
}

.showCard{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px 16px;
  display:grid;
  gap:10px;
}

.showCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.showCard__title{
  font-size:13px;
  font-weight:900;
  color:#1b1b1b;
}

.showCard__value{
  font-size:13px;
  line-height:1.45;
  color:#2b2b2b;
}

.showCard__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.showAction{
  min-height:34px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--black);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s ease, transform .03s ease;
}

.showAction:hover{
  background:#fafafa;
}

.showAction:active{
  transform:translateY(1px);
}

.showAction--danger{
  color:#991b1b;
  border-color:#efc7c7;
}

/* picker modal */

body.is-modal-open{
  overflow:hidden;
}

.showcasePicker{
  position:fixed;
  inset:0;
  z-index:400;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px 16px;
}

.showcasePicker__backdrop{
  position:absolute;
  inset:0;
  background:rgba(14,14,14,.42);
}

.showcasePicker__dialog{
  position:relative;
  z-index:1;
  width:min(760px, 100%);
  max-height:calc(80vh - 48px);
  background:#fff;
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.showcasePicker__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--border2);
  flex-shrink:0;
}

.showcasePicker__title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#111;
}

.showcasePicker__close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:#111;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}

.showcasePicker__body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:18px 20px;
}

.showcasePicker__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 20px;
  border-top:1px solid var(--border2);
  flex-shrink:0;
}

.btn{
  height:42px;
  padding:0 30px;
  border-radius:12px;
  border:1px solid var(--black);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  background:#fff;
  color:var(--black);
  transition:transform .03s ease, opacity .15s ease, background .15s ease;
}

.btn:active{
  transform:translateY(1px);
}

.btn-outline:hover{
  background:#f9fafb;
  opacity:.98;
}

.btn--dark{
  background:var(--black);
  color:#fff;
  border-color:var(--black);
}

.btn--dark:hover{
  opacity:.94;
}

.pickerEmpty{
  font-size:14px;
  color:var(--muted);
  line-height:1.45;
}

.pickerGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.pickerAuthorCard{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:14px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .03s ease, background .15s ease;
}

.pickerAuthorCard:hover{
  background:#fafafa;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.pickerAuthorCard:active{
  transform:translateY(1px);
}

.pickerAuthorCard.is-active{
  border-color:#b9c0d0;
  box-shadow:0 0 0 3px rgba(2,2,2,.06);
}

.pickerAuthorCard__avatar{
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:#f5f5f5;
  margin-bottom:12px;
}

.pickerAuthorCard__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pickerAuthorCard__name{
  font-size:14px;
  font-weight:900;
  color:#141414;
}

.pickerAuthorCard__meta{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.pickerBooks{
  display:grid;
  gap:12px;
}

.pickerBook{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.pickerBook__input{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
}

.pickerBook__cover{
  width:56px;
  height:78px;
  border-radius:10px;
  overflow:hidden;
  background:#f5f5f5;
  flex:0 0 auto;
}

.pickerBook__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pickerBook__info{
  min-width:0;
}

.pickerBook__title{
  font-size:14px;
  font-weight:900;
  color:#141414;
  line-height:1.35;
}

.pickerBook__author{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

/* hint */
.hint{
  margin:8px 0 0;
  font-size:13px;
  color:var(--muted);
  min-height:18px;
}

.hint.is-error{ color:#b91c1c; }
.hint.is-ok{ color:#166534; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1320px){
  .topbar__inner,
  .editTopWrap,
  .page{
    width:calc(100% - 40px);
  }

  .editTop{
    grid-template-columns:220px minmax(0,1fr);
    column-gap:52px;
  }

  .formCard{
    width:100%;
    max-width:none;
  }
}

@media (max-width: 980px){
  .topbar__inner,
  .editTopWrap,
  .page{
    width:calc(100% - 32px);
  }

  .editTop{
    grid-template-columns:1fr;
    justify-content:stretch;
    gap:24px;
  }

  .avatarCard,
  .avatarBox{
    width:100%;
  }

  .formCard{
    width:100%;
  }

  .showcases .editTabs,
  .showcasesEmpty,
  .showcasesContent,
  .showcaseMenu,
  .showList{
    width:100%;
  }

  .showCard__top{
    flex-direction:column;
    align-items:flex-start;
  }

  .showCard__actions{
    justify-content:flex-start;
  }

  .pickerGrid{
    grid-template-columns:1fr;
  }

  .showcasePicker__dialog{
    width:min(100%, calc(100% - 20px));
  }

  .showcasePicker__head,
  .showcasePicker__body,
  .showcasePicker__actions{
    padding-left:14px;
    padding-right:14px;
  }
}