:root{
  --paper:#F4F1EA; --paper-2:#ECE7DC; --card:#FFFFFF;
  --ink:#1C2530; --ink-soft:#5B6472; --ink-faint:#98A0AB; --rule:#DFDACC;
  --teal:#0E6B66; --teal-deep:#0A4F4B; --teal-wash:#E4EFEC;
  --clay:#A8432F; --clay-wash:#F5E6E1;
  --amber:#A8791A; --amber-wash:#F6EFDC;
  --shadow:0 1px 2px rgba(28,37,48,.04), 0 8px 24px -12px rgba(28,37,48,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',Arial,sans-serif;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; margin:0;}
a{color:var(--teal-deep);}

.topbar{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--rule);}
.topbar-inner{max-width:1320px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:30px; height:30px; border-radius:7px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600;}
.brand-name{font-family:'Fraunces',serif; font-size:19px; font-weight:600;}
.spacer{flex:1;}

.btn{font-size:13px; font-weight:500; border-radius:7px; border:1px solid transparent; padding:9px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none;}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-deep);}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:var(--rule);}
.btn-ghost:hover{border-color:var(--ink-soft); color:var(--ink);}
.btn-danger{background:transparent; color:var(--clay); border-color:var(--clay-wash);}
.btn-danger:hover{background:var(--clay-wash);}

.main-wrap{max-width:1320px; margin:0 auto; padding:24px 28px 80px;}

.card{background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:20px;}

.file-list{display:flex; flex-direction:column; gap:12px; margin-top:18px;}
.file-row{display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:14px 16px;}
.file-row .name{font-weight:600; font-size:14px;}
.file-row .meta{font-size:12px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;}
.file-row .grow{flex:1; min-width:0;}
.progress-bar{width:130px; height:6px; background:var(--paper-2); border-radius:99px; overflow:hidden;}
.progress-fill{height:100%; background:var(--teal); border-radius:99px;}
.progress-text{font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; white-space:nowrap;}
.status-badge{font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:99px; white-space:nowrap;}
.status-badge.importing{background:var(--amber-wash,#F6EFDC); color:var(--amber,#A8791A);}
.status-badge.failed{background:var(--clay-wash); color:var(--clay);}

.upload-box{border:1.5px dashed var(--rule); border-radius:12px; padding:28px; text-align:center; background:var(--card);}
.upload-box input[type=file]{margin:10px 0;}
.path-box{font-family:'IBM Plex Mono',monospace; font-size:13px; background:var(--paper-2); border:1px solid var(--rule); border-radius:7px; padding:10px 14px; margin:10px 0; word-break:break-all;}

.login-wrap{max-width:380px; margin:80px auto; }
.login-wrap input{width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:7px; margin-bottom:12px; font-size:14px;}
.login-wrap label{font-size:12.5px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:5px;}
.error-msg{background:var(--clay-wash); color:var(--clay); padding:10px 12px; border-radius:7px; font-size:13px; margin-bottom:14px;}
.ok-msg{background:var(--teal-wash); color:var(--teal-deep); padding:10px 12px; border-radius:7px; font-size:13px; margin-bottom:14px;}

/* review page */
.row-card{background:var(--card); border:1px solid var(--rule); border-radius:12px; margin-bottom:16px; box-shadow:var(--shadow); overflow:hidden;}
.row-card.is-issue{border-left:3px solid var(--clay);}
.row-card.is-ok{border-left:3px solid var(--teal);}
.row-card.is-pending{border-left:3px solid var(--rule);}
.row-head{display:flex; align-items:baseline; gap:12px; padding:13px 18px; border-bottom:1px solid var(--rule); flex-wrap:wrap;}
.row-no{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-faint); background:var(--paper-2); padding:2px 7px; border-radius:5px;}
.row-path{font-size:12px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;}
.row-module{font-size:10.5px; text-transform:uppercase; background:var(--teal-wash); color:var(--teal-deep); padding:2px 8px; border-radius:99px; font-weight:500;}
.save-indicator{font-size:11px; color:var(--ink-faint); margin-left:auto;}

.row-body{display:grid; grid-template-columns:1fr 1fr; gap:0;}
@media (max-width:1000px){.row-body{grid-template-columns:1fr;}}

.shots{padding:18px; display:flex; gap:14px; border-right:1px solid var(--rule); background:var(--paper);}
@media (max-width:1000px){.shots{border-right:none; border-bottom:1px solid var(--rule); flex-direction:column;}}
.shot{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0;}
.shot-label{font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
.shot-frame{border-radius:9px; overflow:hidden; border:1px solid var(--rule); background:#EDEAE1; cursor:zoom-in; min-height:420px; display:flex; align-items:center; justify-content:center;}
.shot-frame img{width:100%; height:auto; display:block;}
.shot-empty{color:var(--ink-faint); font-size:12px; text-align:center; padding:30px;}

.content{padding:18px; min-width:0;}
.source-label{font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:5px;}
.source-text{font-size:15px; line-height:1.55; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.field-label{font-size:10.5px; text-transform:uppercase; color:var(--ink-soft); font-weight:700;}
textarea,select,input[type=text]{width:100%; border:1px solid var(--rule); border-radius:7px; padding:9px 10px; font-family:inherit; font-size:13.5px; background:var(--paper); resize:vertical;}
textarea:focus,select:focus,input:focus{outline:none; border-color:var(--teal); background:#fff;}
select.issue-set{border-color:var(--clay); background-color:var(--clay-wash);}

.lightbox{position:fixed; inset:0; background:rgba(20,25,32,.9); z-index:100; display:none; align-items:center; justify-content:center; padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-height:92vh; max-width:92vw; border-radius:8px;}
.lightbox-close{position:absolute; top:20px; right:24px; color:#fff; background:rgba(255,255,255,.15); border:none; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:18px;}

.toolbar{display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap;}

/* ===== Grouped screenshot review screens ===== */
.screen-nav-top, .screen-nav-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 4px; margin-bottom:6px;
}
.screen-nav-bottom{margin-top:18px; margin-bottom:0;}
.screen-indicator{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); background:var(--card); border:1px solid var(--rule); padding:6px 14px; border-radius:99px;}
.screen-nav-top .btn:disabled, .screen-nav-bottom .btn:disabled{opacity:.4; cursor:not-allowed;}

.screen-body{
  display:grid; grid-template-columns:minmax(320px, 42%) 1fr; gap:0;
  background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); overflow:hidden;
}
@media (max-width:960px){.screen-body{grid-template-columns:1fr;}}

.shots-col{
  padding:20px; display:flex; gap:14px; border-right:1px solid var(--rule); background:var(--paper);
  position:sticky; top:70px; align-self:start; max-height:calc(100vh - 90px); overflow:auto;
}
@media (max-width:960px){.shots-col{position:static; border-right:none; border-bottom:1px solid var(--rule); max-height:none;}}
.shots-col .shot{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0;}
.shots-col .shot-label{font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
.shots-col .shot-frame{border-radius:9px; overflow:hidden; border:1px solid var(--rule); background:#EDEAE1; cursor:zoom-in; display:flex; align-items:center; justify-content:center; min-height:460px;}
.shots-col .shot-frame img{width:100%; height:auto; display:block;}
.shots-col .shot-empty{color:var(--ink-faint); font-size:12px; text-align:center; padding:30px;}

.rows-col{padding:20px; display:flex; flex-direction:column; gap:16px; min-width:0;}
.row-panel{border:1px solid var(--rule); border-radius:10px; padding:16px; background:var(--paper);}
.row-panel.is-issue{border-left:3px solid var(--clay);}
.row-panel.is-ok{border-left:3px solid var(--teal);}
.row-panel.is-pending{border-left:3px solid var(--rule);}
.row-panel-head{display:flex; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.field-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
@media (max-width:640px){.field-grid-2{grid-template-columns:1fr;}}