/* ============ TOKENS ============ */
:root{
  --bg:#121013;
  --surface:#1E1A1D;
  --surface-raised:#262124;
  --surface-raised-2:#2E282C;
  --border:#332C30;
  --text:#F4EFEC;
  --text-muted:#A79FA2;
  --text-faint:#726A6D;
  --marsala:#8C3A46;
  --marsala-light:#B15864;
  --marsala-soft:#3A2226;
  --lilac:#8E7CC3;
  --lilac-light:#AC9CDB;
  --lilac-soft:#2A2438;
  --success:#7A8C6B;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --serif:'Fraunces', serif;
  --sans:'Manrope', sans-serif;
  --shell-max:520px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
input,select,textarea{font-family:inherit;}
img{display:block;max-width:100%;}
::selection{background:var(--marsala-soft);color:var(--text);}
:focus-visible{outline:2px solid var(--marsala-light);outline-offset:2px;}

/* ============ SHELL ============ */
#app{
  max-width:var(--shell-max);
  margin:0 auto;
  min-height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}
@media(min-width:900px){
  #app{
    max-width:960px;
    display:grid;
    grid-template-columns:84px 1fr;
    grid-template-rows:auto 1fr;
  }
}

/* ============ TOP HEADER ============ */
.topbar{
  padding:28px 20px 18px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.wordmark{
  font-family:var(--serif);
  font-weight:500;
  font-size:26px;
  letter-spacing:0.2px;
}
.wordmark em{font-style:italic;color:var(--marsala-light);}
.topbar-actions{display:flex;gap:8px;flex-shrink:0;}
.icon-btn{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);
  flex-shrink:0;
}
.icon-btn.icon-btn-danger{color:var(--lilac-light);}
@media(min-width:900px){.icon-btn.icon-btn-home{display:none;}}
@media(min-width:900px){
  .topbar{grid-column:1/-1;padding:32px 32px 8px;}
}

/* ============ DESKTOP SIDEBAR ============ */
.sidebar{display:none;}
@media(min-width:900px){
  .sidebar{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:8px 0 20px;
  }
  .sidebar a{
    width:46px;height:46px;
    border-radius:14px;
    color:var(--text-faint);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .sidebar a svg{width:20px;height:20px;}
  .sidebar a.active{background:var(--surface);color:var(--marsala-light);}
  .sidebar a.add-btn{
    margin-top:10px;
    width:46px;height:46px;
    border-radius:50%;
    background:var(--marsala);
    color:#fff;
  }
  .sidebar a.add-btn svg{width:19px;height:19px;}
}

/* ============ MAIN SCROLL AREA ============ */
main{
  flex:1;
  overflow-y:auto;
  padding:0 20px 100px;
}
@media(min-width:900px){
  main{padding:8px 32px 40px;grid-column:2;grid-row:2;}
}

/* ============ HOME ============ */
.home-shortcuts{
  display:flex;gap:8px;overflow-x:auto;
  padding-bottom:18px;margin-bottom:4px;
  scrollbar-width:none;
}
.home-shortcuts::-webkit-scrollbar{display:none;}
.shortcut-chip{
  flex-shrink:0;
  padding:9px 16px;
  border-radius:100px;
  background:var(--surface);
  color:var(--text-muted);
  font-size:13.5px;
  font-weight:500;
  white-space:nowrap;
}
.shortcut-chip.marsala{background:var(--marsala-soft);color:var(--marsala-light);}

.category-mosaic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.mosaic-tile{
  position:relative;
  border-radius:var(--radius-m);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--surface);
  display:block;
}
.mosaic-tile img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(0.85) contrast(1.05);
}
.mosaic-tile::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,8,9,0.85) 100%);
}
.mosaic-label{
  position:absolute;left:10px;bottom:10px;right:10px;z-index:2;
}
.mosaic-label h3{
  font-family:var(--serif);
  font-size:15px;
  font-weight:500;
  line-height:1.2;
}
.mosaic-label p{
  font-size:10.5px;
  color:var(--text-muted);
  margin-top:1px;
}

.section-heading{
  font-family:var(--serif);
  font-size:19px;
  font-weight:500;
  margin:32px 0 14px;
}

/* ============ CATEGORY HEADER / TOOLBAR ============ */
.category-head{
  padding-top:6px;
  margin-bottom:18px;
}
.category-head h1{
  font-family:var(--serif);
  font-size:28px;
  font-weight:500;
}
.category-head .count{
  color:var(--text-faint);
  font-size:13px;
  margin-top:2px;
}
.toolbar{
  display:flex;
  gap:8px;
  margin-bottom:18px;
}
.search-box{
  flex:1;
  background:var(--surface);
  border-radius:var(--radius-s);
  padding:10px 14px;
  display:flex;align-items:center;gap:8px;
  color:var(--text-muted);
}
.search-box input{
  background:none;border:none;color:var(--text);
  font-size:14.5px;width:100%;
}
.search-box input::placeholder{color:var(--text-faint);}
.filter-btn{
  background:var(--surface);
  border-radius:var(--radius-s);
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  display:flex;align-items:center;gap:6px;
  flex-shrink:0;
}
.filter-btn.has-filters{background:var(--marsala-soft);color:var(--marsala-light);}
.filter-dot{
  width:6px;height:6px;border-radius:50%;background:var(--marsala-light);
}

/* ============ ITEM GRID ============ */
.item-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 12px;
}
@media(min-width:640px){.item-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.item-grid{grid-template-columns:repeat(3,1fr);gap:18px;}}

.item-card{
  cursor:pointer;
  display:block;
}
.item-card .photo{
  border-radius:var(--radius-m);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--surface);
  position:relative;
  margin-bottom:9px;
}
.item-card .photo img{width:100%;height:100%;object-fit:cover;}
.status-flag{
  position:absolute;top:9px;left:9px;
  padding:4px 9px;
  border-radius:100px;
  font-size:10.5px;
  font-weight:600;
  background:rgba(18,16,19,0.75);
  backdrop-filter:blur(4px);
  color:var(--text-muted);
}
.status-flag.lavando{color:#C9A96A;}
.status-flag.manutencao{color:#B15864;}
.loc-flag{
  position:absolute;top:9px;right:9px;
  width:24px;height:24px;
  border-radius:50%;
  background:rgba(18,16,19,0.75);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  color:var(--text-muted);
}
.loc-flag.loc-bela{background:var(--marsala-light);color:#000;}
.loc-flag.loc-mica{background:var(--lilac-light);color:#000;}
.item-card h4{
  font-size:14.5px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:3px;
}
.item-card .meta{
  font-size:12px;
  color:var(--text-faint);
  line-height:1.5;
}
.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--text-faint);
}
.empty-state .serif{font-family:var(--serif);font-size:18px;color:var(--text-muted);margin-bottom:6px;display:block;}

/* ============ DETAIL VIEW ============ */
.detail-hero{
  border-radius:var(--radius-l);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--surface);
  margin-bottom:14px;
}
.detail-hero img{width:100%;height:100%;object-fit:cover;}
.detail-thumbs{
  display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;
}
.detail-thumbs img{
  width:56px;height:56px;object-fit:cover;border-radius:10px;
  opacity:0.55;cursor:pointer;
}
.detail-thumbs img.active{opacity:1;box-shadow:0 0 0 2px var(--marsala-light);}
.detail-title{
  font-family:var(--serif);
  font-size:25px;
  font-weight:500;
  margin-bottom:14px;
}
.attr-row{
  display:flex;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.attr-row .k{color:var(--text-faint);}
.attr-row .v{font-weight:600;text-align:right;}
.detail-note{
  margin-top:18px;
  padding:14px 16px;
  background:var(--surface);
  border-radius:var(--radius-m);
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.55;
}
.detail-actions{
  display:flex;gap:10px;margin-top:22px;
}
.btn{
  flex:1;
  padding:14px;
  border-radius:var(--radius-s);
  font-weight:600;
  font-size:14.5px;
  text-align:center;
  display:block;
}
.btn-primary{background:var(--marsala);color:#fff;}
.btn-secondary{background:var(--surface);color:var(--text);}
.btn-ghost{background:none;color:var(--text-faint);border:1px solid var(--border);}
.btn-danger{background:var(--lilac);color:#fff;}
.text-danger{color:var(--lilac-light);}

/* ============ BACK NAV ============ */
.back-row{
  display:flex;align-items:center;gap:10px;
  padding-top:6px;margin-bottom:18px;
  color:var(--text-muted);
  font-size:14px;font-weight:500;
}

/* ============ FILTER SHEET ============ */
.sheet-backdrop{
  position:fixed;inset:0;
  background:rgba(10,8,9,0.6);
  z-index:40;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;
  max-width:var(--shell-max);
  margin:0 auto;
  background:var(--surface-raised);
  border-radius:24px 24px 0 0;
  z-index:41;
  padding:10px 20px 24px;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  max-height:82vh;
  overflow-y:auto;
}
.sheet.open{transform:translateY(0);}
.sheet-handle{
  width:36px;height:4px;background:var(--border);
  border-radius:4px;margin:6px auto 18px;
}
.sheet-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;
}
.sheet-head h3{font-family:var(--serif);font-size:20px;font-weight:500;}
.sheet-head button{font-size:13.5px;color:var(--marsala-light);font-weight:600;}
.filter-group{margin-bottom:20px;}
.filter-group label{
  display:block;font-size:12.5px;color:var(--text-faint);
  margin-bottom:9px;font-weight:600;
}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;}
.pill{
  padding:8px 15px;
  border-radius:100px;
  background:var(--surface);
  font-size:13.5px;
  color:var(--text-muted);
  border:1px solid transparent;
  cursor:pointer;
}
.pill.selected{
  background:var(--marsala-soft);
  color:var(--marsala-light);
  border-color:var(--marsala);
}
.pill-checkbox{position:absolute;opacity:0;width:0;height:0;}
.pill-checkbox:checked + .pill{
  background:var(--marsala-soft);
  color:var(--marsala-light);
  border-color:var(--marsala);
}
.pill-checkbox:focus-visible + .pill{outline:2px solid var(--marsala-light);outline-offset:2px;}
.sheet-apply{
  position:sticky;bottom:0;
  background:var(--marsala);
  color:#fff;
  padding:15px;
  border-radius:var(--radius-s);
  font-weight:600;
  font-size:14.5px;
  text-align:center;
  margin-top:6px;
  border:none;
  width:100%;
  display:block;
}

/* ============ ADD/EDIT ITEM FLOW ============ */
.step-select{
  display:flex;flex-direction:column;gap:12px;
  margin-top:10px;
}
.category-option{
  display:flex;align-items:center;gap:14px;
  padding:18px;
  background:var(--surface);
  border-radius:var(--radius-m);
  border:1px solid transparent;
}
.category-option .ico{
  width:44px;height:44px;border-radius:12px;
  background:var(--marsala-soft);
  display:flex;align-items:center;justify-content:center;
  color:var(--marsala-light);
  font-size:19px;flex-shrink:0;
}
.category-option .txt h4{font-size:15.5px;font-weight:600;margin-bottom:2px;}
.category-option .txt p{font-size:12.5px;color:var(--text-faint);}

.field{margin-bottom:18px;}
.field label{
  display:block;font-size:12.5px;font-weight:600;
  color:var(--text-faint);margin-bottom:9px;
}
.field input[type=text], .field input[type=password], .field select, .field textarea, .compose-slot select{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:13px 14px;
  color:var(--text);
  font-size:14.5px;
}
.field textarea{resize:vertical;min-height:70px;}
.field-hint{font-size:12px;color:var(--text-faint);margin-top:6px;}

.photo-upload{
  border:1.5px dashed var(--border);
  border-radius:var(--radius-m);
  aspect-ratio:4/3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  color:var(--text-faint);
  background:var(--surface);
  margin-bottom:12px;
  position:relative;
  cursor:pointer;
}
.photo-upload input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.photo-upload .ico{
  width:46px;height:46px;border-radius:50%;
  background:var(--marsala-soft);color:var(--marsala-light);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.photo-upload span{font-size:13px;font-weight:600;color:var(--text-muted);}
.current-photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.current-photos img{width:64px;height:64px;object-fit:cover;border-radius:10px;}

/* ============ LOOKS ============ */
.look-card{
  background:var(--surface);
  border-radius:var(--radius-m);
  padding:16px;
  margin-bottom:14px;
  display:block;
}
.look-card h4{font-family:var(--serif);font-size:17px;font-weight:500;margin-bottom:3px;}
.look-card .sub{font-size:12px;color:var(--text-faint);margin-bottom:13px;}
.look-pieces{display:flex;align-items:center;gap:8px;}
.look-pieces img{
  width:64px;height:80px;object-fit:cover;border-radius:10px;flex:1;
}
.look-plus{color:var(--text-faint);font-size:14px;}

.compose-slot{
  margin-bottom:18px;
}
.compose-slot label{
  display:block;font-size:12.5px;font-weight:600;
  color:var(--text-faint);margin-bottom:9px;
}

/* ============ TAB BAR (mobile) ============ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;
  max-width:var(--shell-max);
  margin:0 auto;
  background:rgba(30,26,29,0.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  display:flex;
  z-index:30;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
@media(min-width:900px){.tabbar{display:none;}}
.tab-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 2px;
  color:var(--text-faint);
  font-size:10.5px;
  font-weight:600;
}
.tab-item.active{color:var(--marsala-light);}
.tab-item svg{width:21px;height:21px;}
.tab-item.fab{
  color:#fff;
}
.tab-item.fab .fab-circle{
  width:34px;height:34px;border-radius:50%;
  background:var(--marsala);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:2px;
  font-size:18px;
}

/* ============ TOAST ============ */
.toast{
  position:fixed;top:16px;left:50%;
  transform:translate(-50%,-10px);
  background:var(--surface-raised);
  color:var(--text);
  border:1px solid var(--marsala);
  padding:12px 22px;
  border-radius:100px;
  font-size:13.5px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  z-index:60;
  max-width:calc(100% - 40px);
  text-align:center;
  pointer-events:none;
  opacity:0;
  animation:toast-in-out 2.6s ease forwards;
}
@keyframes toast-in-out{
  0%{opacity:0;transform:translate(-50%,-10px);}
  10%{opacity:1;transform:translate(-50%,0);}
  85%{opacity:1;transform:translate(-50%,0);}
  100%{opacity:0;transform:translate(-50%,-10px);}
}

/* ============ CONFIRM MODAL ============ */
.confirm-backdrop{
  position:fixed;inset:0;
  background:rgba(10,8,9,0.6);
  z-index:50;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.confirm-backdrop.open{opacity:1;pointer-events:auto;}
.confirm-modal{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0.94);
  background:var(--surface-raised);
  border-radius:var(--radius-l);
  padding:24px;
  width:calc(100% - 48px);
  max-width:360px;
  z-index:51;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.confirm-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.confirm-modal p{font-size:14.5px;color:var(--text);margin-bottom:20px;line-height:1.5;}
.confirm-actions{display:flex;gap:10px;}
.confirm-actions .btn{flex:1;}

/* ============ LOGIN ============ */
.login-wrap{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:0 28px 32px;
  max-width:var(--shell-max);
  margin:0 auto;
}
.login-photo{
  width:calc(100% + 56px);
  margin:0 -28px 20px;
  aspect-ratio:4/3;
  border-radius:0 0 var(--radius-l) var(--radius-l);
  overflow:hidden;
  position:relative;
}
.login-photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:78% 22%;
}
.login-photo::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,16,19,0) 55%, var(--bg) 100%);
}
.login-wrap .wordmark{font-size:30px;margin-bottom:6px;text-align:center;}
.login-wrap .sub{color:var(--text-faint);font-size:13.5px;text-align:center;margin-bottom:32px;}
.login-error{
  background:var(--marsala-soft);color:var(--marsala-light);
  padding:12px 14px;border-radius:var(--radius-s);
  font-size:13.5px;margin-bottom:18px;
}