/* =============================================================
   Dereview - Design system
   ============================================================= */
:root{
  --ink-900:#14131f;
  --ink-700:#3c3a52;
  --ink-500:#6b6885;
  --ink-300:#a7a4bf;
  --ink-100:#e9e7f5;
  --paper:#faf9fd;
  --card:#ffffff;
  --accent:#5b4cf0;
  --accent-dark:#4636c9;
  --accent-soft:#eeecff;
  --green:#1a9d6c;
  --green-soft:#e3f7ee;
  --amber:#c07d0e;
  --amber-soft:#fdf2df;
  --red:#d1435b;
  --red-soft:#fbe7ea;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(20,19,31,.06);
  --shadow-md:0 8px 24px rgba(20,19,31,.08);
  --shadow-lg:0 16px 48px rgba(20,19,31,.16);
  font-size:16px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink-900);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
h1,h2,h3,h4{margin:0 0 .4em; letter-spacing:-0.02em; font-weight:700;}
p{line-height:1.55; color:var(--ink-700);}

/* ---------- App shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:250px; flex-shrink:0; background:var(--card);
  border-right:1px solid var(--ink-100);
  display:flex; flex-direction:column;
  padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-logo{font-weight:800; font-size:1.15rem; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px 22px;}
.sidebar-logo .logo-row{display:flex; align-items:center; gap:8px;}
.sidebar-close-btn{display:none; background:none; border:none; font-size:1.6rem; line-height:1; color:var(--ink-500); cursor:pointer; padding:0 4px;}
.logo-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#9b8cff); display:inline-block;}
.sidebar-nav{display:flex; flex-direction:column; gap:2px; flex:1; min-height:0;}
.sidebar-nav a{
  padding:10px 12px; border-radius:var(--radius-sm); color:var(--ink-700);
  font-weight:600; font-size:.92rem; display:flex; justify-content:space-between; align-items:center;
}
.sidebar-nav a:hover{background:var(--accent-soft); color:var(--accent-dark);}
.sidebar-nav a.active{background:var(--accent); color:#fff;}
.badge{background:var(--red); color:#fff; font-size:.7rem; padding:1px 7px; border-radius:20px;}
.sidebar-footer{border-top:1px solid var(--ink-100); padding-top:14px; display:flex; flex-direction:column; gap:10px;}

/* ---------- Mobile topbar + hamburger toggle ---------- */
.mobile-topbar{
  display:none; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--card); border-bottom:1px solid var(--ink-100);
  position:sticky; top:0; z-index:60;
}
.mobile-topbar-logo{font-weight:800; font-size:1.02rem; display:flex; align-items:center; gap:8px;}
.mobile-topbar-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem;
}
.hamburger-btn{
  width:38px; height:38px; border-radius:9px; border:1px solid var(--ink-100); background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.hamburger-btn span{width:18px; height:2px; background:var(--ink-900); border-radius:2px; transition:transform .15s, opacity .15s;}
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,19,31,.45); z-index:70;
  opacity:0; transition:opacity .2s ease;
}
.sidebar-overlay.visible{display:block; opacity:1;}
body.sidebar-locked{overflow:hidden;}
.user-chip{display:flex; align-items:center; gap:10px;}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.user-name{font-weight:700; font-size:.86rem;}
.user-role{font-size:.74rem; color:var(--ink-500);}
.main-content{flex:1; padding:32px 40px; max-width:1200px;}
.public-main{max-width:100%;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:10px; font-weight:700; font-size:.9rem;
  border:1px solid transparent; cursor:pointer; transition:all .15s ease; background:var(--accent); color:#fff;
}
.btn:hover{background:var(--accent-dark);}
.btn-secondary{background:var(--accent-soft); color:var(--accent-dark);}
.btn-secondary:hover{background:#e0dcff;}
.btn-ghost{background:transparent; color:var(--ink-700); border-color:var(--ink-100);}
.btn-ghost:hover{background:var(--ink-100);}
.btn-danger{background:var(--red);}
.btn-danger:hover{background:#b02f45;}
.btn-success{background:var(--green);}
.btn-success:hover{background:#147d55;}
.btn-sm{padding:6px 12px; font-size:.8rem;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Forms ---------- */
label{display:block; font-weight:700; font-size:.82rem; margin-bottom:6px; color:var(--ink-700);}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], textarea, select{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--ink-100);
  background:#fff; font-size:.92rem; font-family:inherit; color:var(--ink-900);
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.field{margin-bottom:16px;}
.help-text{font-size:.78rem; color:var(--ink-500); margin-top:4px;}

/* ---------- Cards / layout ---------- */
.card{background:var(--card); border:1px solid var(--ink-100); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-sm);}
.page-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.page-header .subtitle{color:var(--ink-500); font-size:.92rem;}
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(auto-fill, minmax(260px,1fr));}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(320px,1fr));}

/* ---------- Project cards ---------- */
.project-card{background:var(--card); border:1px solid var(--ink-100); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .15s;}
.project-card-link{display:block;}
.delete-project-btn{background:none; border:none; color:var(--red); font-weight:700; font-size:.78rem; cursor:pointer; padding:0;}
.delete-project-btn:hover{text-decoration:underline;}
.project-card:hover{box-shadow:var(--shadow-md);}
.project-thumb{height:150px; background:var(--ink-100); background-size:cover; background-position:center; position:relative;}
.project-thumb .pdf-badge{position:absolute; top:10px; right:10px; background:rgba(20,19,31,.75); color:#fff; font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:6px;}
.project-body{padding:16px;}
.project-body h3{font-size:1rem; margin-bottom:4px;}
.project-meta{display:flex; justify-content:space-between; align-items:center; margin-top:12px;}
.status-pill{font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;}
.status-active{background:var(--accent-soft); color:var(--accent-dark);}
.status-approved{background:var(--green-soft); color:var(--green);}
.status-archived{background:var(--ink-100); color:var(--ink-500);}

/* ---------- Table ---------- */
table{width:100%; border-collapse:collapse; font-size:.88rem;}
th{text-align:left; color:var(--ink-500); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; border-bottom:1px solid var(--ink-100);}
td{padding:12px; border-bottom:1px solid var(--ink-100); vertical-align:middle;}
tr:last-child td{border-bottom:none;}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:.88rem; font-weight:600;}
.alert-success{background:var(--green-soft); color:var(--green);}
.alert-error{background:var(--red-soft); color:var(--red);}
.alert-info{background:var(--accent-soft); color:var(--accent-dark);}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:400px; background:var(--card); border:1px solid var(--ink-100); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md);}
.auth-card .logo-row{display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.2rem; margin-bottom:22px;}
.auth-footer-link{text-align:center; margin-top:16px; font-size:.86rem; color:var(--ink-500);}

/* ---------- Landing ---------- */
.landing-nav{display:flex; justify-content:space-between; align-items:center; padding:20px 48px; gap:16px; flex-wrap:wrap;}
.landing-nav .logo-row{font-weight:800; font-size:1.25rem; display:flex; align-items:center; gap:8px;}
.hero{max-width:760px; margin:60px auto; text-align:center; padding:0 24px;}
.hero h1{font-size:2.6rem; line-height:1.1;}
.hero p{font-size:1.1rem; max-width:560px; margin:16px auto 28px;}
.feature-grid{max-width:1080px; margin:80px auto; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.feature-grid .card h4{margin-bottom:6px;}

/* ---------- Review workspace (client-facing) ---------- */
.review-shell{display:flex; height:100vh; overflow:hidden;}
.review-shell.full{height:calc(100vh - 53px);}
/* Designer workspace variant: size to content (capped) instead of always
   filling a fixed height, so a project with few comments doesn't leave a
   block of empty white space in the sidebar. */
.review-shell.compact{height:auto; align-items:flex-start;}
.review-shell.compact .review-canvas-wrap{max-height:72vh;}
.review-shell.compact .review-sidebar{max-height:72vh; overflow-y:auto;}
.review-canvas-wrap{
  flex:1; overflow:auto; background:#efedf7; position:relative; padding:40px; display:flex; justify-content:center; align-items:flex-start;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--ink-300) transparent;
}
.review-canvas-wrap::-webkit-scrollbar{height:10px; width:10px;}
.review-canvas-wrap::-webkit-scrollbar-track{background:transparent;}
.review-canvas-wrap::-webkit-scrollbar-thumb{background:var(--ink-300); border-radius:20px; border:2px solid transparent; background-clip:padding-box;}
.review-canvas-wrap::-webkit-scrollbar-thumb:hover{background:var(--ink-500);}
.review-image-container.zoomed{cursor:grab; touch-action:none;}
.review-image-container.zoomed.panning{cursor:grabbing;}
.pan-hint{
  position:absolute; top:14px; left:14px; z-index:20; background:rgba(20,19,31,.75); color:#fff;
  font-size:.74rem; font-weight:600; padding:5px 10px; border-radius:20px; display:none; pointer-events:none;
}
.pan-hint.visible{display:block;}
.review-image-container{position:relative; display:inline-block; max-width:100%; box-shadow:var(--shadow-lg); background:#fff; cursor:crosshair;}
.review-image-container img{display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none;}
.pin{
  position:absolute; width:28px; height:28px; margin-left:-14px; margin-top:-28px;
  border-radius:50% 50% 50% 0; background:var(--accent); color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:.78rem;
  transform:rotate(-45deg); cursor:pointer; box-shadow:var(--shadow-sm); border:2px solid #fff; z-index:5;
}
.pin span{transform:rotate(45deg);}
.pin.resolved{background:var(--green);}
.pin.active-pin{background:var(--amber); z-index:6;}
.review-sidebar{width:380px; flex-shrink:0; background:#fff; border-left:1px solid var(--ink-100); display:flex; flex-direction:column;}
.review-sidebar-header{padding:18px 20px; border-bottom:1px solid var(--ink-100);}
.review-sidebar-header h3{font-size:1.02rem; margin-bottom:2px;}
.version-select{display:flex; gap:8px; align-items:center; margin-top:10px;}
.comment-list{flex:1; overflow-y:auto; padding:12px;}
.comment-thread{border:1px solid var(--ink-100); border-radius:var(--radius-sm); padding:12px; margin-bottom:10px; cursor:pointer; transition:border-color .15s;}
.comment-thread:hover, .comment-thread.highlighted{border-color:var(--accent);}
.comment-thread.resolved{opacity:.6;}
.comment-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.comment-author{font-weight:700; font-size:.84rem;}
.comment-time{font-size:.72rem; color:var(--ink-500);}
.comment-body{font-size:.87rem; color:var(--ink-900); margin-bottom:6px;}
.comment-attach{max-width:100%; border-radius:8px; margin-top:6px;}
.comment-reactions{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
.reaction-pill{background:var(--ink-100); border-radius:20px; padding:2px 8px; font-size:.78rem; cursor:pointer;}
.reaction-pill.mine{background:var(--accent-soft); color:var(--accent-dark);}
.reply-list{margin-top:8px; padding-left:12px; border-left:2px solid var(--ink-100);}
.reply-item{margin-bottom:8px; font-size:.85rem;}
.reply-item .comment-author{font-size:.8rem;}
.comment-actions{display:flex; gap:8px; margin-top:8px;}
.comment-actions button{background:none; border:none; color:var(--accent); font-weight:700; font-size:.78rem; cursor:pointer; padding:0;}
.comment-actions button.delete-comment,
.comment-actions button.delete-reply{color:var(--red); margin-left:auto;}
.reply-item .comment-actions{margin-top:4px;}
.review-sidebar-footer{padding:16px 20px; border-top:1px solid var(--ink-100); display:flex; gap:10px;}
.new-pin-form{position:absolute; z-index:10; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:14px; width:260px;}
.new-pin-form textarea{min-height:70px; resize:vertical;}
.emoji-row{display:flex; gap:6px; margin:8px 0;}
.emoji-row button{background:var(--ink-100); border:none; border-radius:8px; padding:4px 8px; font-size:1rem; cursor:pointer;}
.emoji-row button:hover{background:var(--accent-soft);}

/* Zoom controls - floating toolbar over the canvas */
.zoom-controls{
  position:absolute; top:14px; right:14px; z-index:20; display:flex; align-items:center; gap:4px;
  background:#fff; padding:5px; border-radius:10px; box-shadow:var(--shadow-md); border:1px solid var(--ink-100);
}
.zoom-controls button{
  background:var(--ink-100); border:none; border-radius:7px; width:28px; height:28px; cursor:pointer;
  font-weight:800; font-size:1.05rem; display:flex; align-items:center; justify-content:center; color:var(--ink-900);
  line-height:1;
}
.zoom-controls button:hover:not(:disabled){background:var(--accent-soft); color:var(--accent-dark);}
.zoom-controls button:disabled{opacity:.35; cursor:not-allowed;}
.zoom-level{font-size:.78rem; font-weight:700; color:var(--ink-700); min-width:40px; text-align:center; user-select:none;}
.zoom-reset-btn{width:auto !important; padding:0 9px !important; font-size:.72rem !important; font-weight:700;}

/* ---------- Misc ---------- */
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-500);}
.empty-state h3{color:var(--ink-900);}
.tag-row{display:flex; gap:8px; flex-wrap:wrap;}
.modal-backdrop{position:fixed; inset:0; background:rgba(20,19,31,.45); display:flex; align-items:center; justify-content:center; z-index:100;}
.modal{background:#fff; border-radius:var(--radius-lg); padding:26px; width:100%; max-width:420px; box-shadow:var(--shadow-lg);}
.modal h3{margin-bottom:14px;}
.close-x{position:absolute; top:14px; right:16px; cursor:pointer; color:var(--ink-500); font-size:1.2rem; background:none; border:none;}
.progress-bar{height:8px; background:var(--ink-100); border-radius:20px; overflow:hidden;}
.progress-bar-fill{height:100%; background:var(--accent);}
.storage-warn .progress-bar-fill{background:var(--amber);}
.storage-danger .progress-bar-fill{background:var(--red);}
.flex-between{display:flex; justify-content:space-between; align-items:center;}
.text-muted{color:var(--ink-500);}
.text-sm{font-size:.85rem;}
.mt-0{margin-top:0;} .mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;}
.stat-card{background:var(--card); border:1px solid var(--ink-100); border-radius:var(--radius-md); padding:20px;}
.stat-card .stat-value{font-size:1.7rem; font-weight:800;}
.stat-card .stat-label{font-size:.8rem; color:var(--ink-500); font-weight:600;}

/* Responsive */
@media (max-width:900px){
  .mobile-topbar{display:flex;}
  .app-shell{flex-direction:column;}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:270px; max-width:82vw;
    flex-direction:column; align-items:stretch; padding:20px 16px;
    transform:translateX(-100%); transition:transform .25s ease; z-index:80;
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-close-btn{display:block;}
  .sidebar-nav{flex-direction:column; overflow-x:visible;}
  .sidebar-footer{flex-direction:row; border-top:1px solid var(--ink-100);}
  .main-content{padding:20px;}
  .review-shell,
  .review-shell.full{flex-direction:column; height:auto; align-items:stretch;}
  .review-shell.compact{flex-direction:column; height:auto; align-items:stretch;}
  .review-shell.compact .review-canvas-wrap{max-height:48vh; flex:none;}
  .review-shell.compact .review-sidebar{max-height:none;}
  .review-shell.full .review-canvas-wrap{max-height:48vh; flex:none;}
  .review-shell.full .review-sidebar{flex:none;}
  .review-canvas-wrap{padding:16px;}
  .review-sidebar{width:100%; border-left:none; border-top:1px solid var(--ink-100);}
}
@media (max-width:640px){
  .landing-nav{flex-direction:column; align-items:flex-start; padding:16px 20px; gap:12px;}
  .landing-nav .tag-row{width:100%;}
  .landing-nav .tag-row .btn{flex:1;}
}
@media (max-width:520px){
  .hero h1{font-size:1.9rem;}
  .grid-3{grid-template-columns:1fr;}
}
@media (max-width:380px){
  .hero h1{font-size:1.5rem;}
  .hero p{font-size:.95rem;}
}