:root{
  --rail-bg:#1a1c22; --rail-bg-soft:#21242c; --rail-border:#2c3038;
  --accent:#ff7a45; --accent-soft:rgba(255,122,69,0.16);
  --text-bright:#f4f1ea; --text-dim:#9aa0ad; --danger:#e85d5d;
  --paper-deep:#cfccc4; --page-bg:#111318;
  --font-display:'Sora', sans-serif; --font-body:'Inter', sans-serif;
}
:root[data-theme="light"]{
  --rail-bg:#ffffff; --rail-bg-soft:#f2f3f5; --rail-border:#e3e5ea;
  --text-bright:#1a1c22; --text-dim:#6b7280;
  --paper-deep:#e6e4df; --page-bg:#f6f6f8;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;font-family:var(--font-body);background:var(--page-bg);color:var(--text-bright);}

header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;border-bottom:1px solid var(--rail-border);background:var(--rail-bg);
}
.brand{display:flex;align-items:center;gap:8px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);}
.brand span{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:0.06em;text-transform:uppercase;}
.user-area{display:flex;align-items:center;gap:14px;}
.user-profile-chip{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  padding:4px 8px 4px 4px;border-radius:99px;transition:background .15s;
}
.user-profile-chip:hover{background:var(--rail-bg-soft);}
.user-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:#1a1c22;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:11px;
  background-size:cover;background-position:center;
}
.user-name{font-size:13px;color:var(--text-dim);}
.logout-btn{
  background:transparent;border:1px solid var(--rail-border);color:var(--text-dim);
  padding:7px 13px;border-radius:8px;font-family:var(--font-body);font-size:12.5px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.logout-btn:hover{border-color:var(--danger);color:var(--danger);}

main{max-width:1100px;margin:0 auto;padding:36px 32px 80px;}
.top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px;}
h1{font-family:var(--font-display);font-size:22px;margin:0;}
.new-btn{
  background:var(--accent);color:#1a1c22;border:none;border-radius:10px;
  padding:11px 18px;font-family:var(--font-body);font-weight:700;font-size:13.5px;cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:filter .15s;
}
.new-btn:hover{filter:brightness(1.07);}
.new-btn svg{width:15px;height:15px;}

.grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));gap:18px;
}
.proj-card{
  background:var(--rail-bg);border:1px solid var(--rail-border);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;
  position:relative;
}
.proj-card:hover{border-color:var(--accent);transform:translateY(-2px);}

/* Multi-PDF projects get a "stacked papers" edge behind the card and a
   distinct accent colour, so they read as different from a single PDF
   at a glance without needing to read the text. */
.proj-card.multi{
  border-color:#5856d6;
  box-shadow:5px 5px 0 -3px var(--rail-bg), 5px 5px 0 -2px #3f3d99;
  margin-right:5px; margin-bottom:5px;
}
.proj-card.multi:hover{ border-color:#7c7aef; }

.proj-thumb{
  aspect-ratio:3/4;background:var(--paper-deep);display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.proj-thumb img{width:100%;height:100%;object-fit:cover;}
.proj-thumb svg{width:34px;height:34px;stroke:#8b8f9b;}

.proj-multi-badge{
  position:absolute;top:7px;left:7px;
  background:#3f3d99;color:#e8e7ff;
  border-radius:99px;padding:5px 11px 5px 8px;
  font-size:12.5px;font-weight:700;
  display:flex;align-items:center;gap:5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.proj-multi-badge svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;}

/* Plan ended — projects are listed but locked until upgrade */
.proj-card.locked .proj-thumb img{filter:grayscale(1);opacity:0.55;}
.proj-lock{
  position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:50%;
  background:rgba(17,19,24,0.75);color:#fff;display:flex;align-items:center;justify-content:center;
}
.proj-thumb .proj-lock svg{width:15px;height:15px;stroke:currentColor;}

/* Trial / Premium / expired banner above the grid */
.plan-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--rail-bg);border:1px solid var(--rail-border);border-radius:11px;
  padding:11px 14px;margin:-8px 0 22px;font-size:13px;
}
.plan-banner[hidden]{display:none;}
.plan-banner.trial{border-color:var(--accent);}
.plan-banner.expired{border-color:rgba(232,93,93,0.5);background:rgba(232,93,93,0.08);color:var(--danger);}
.plan-banner-btn{
  background:var(--accent);color:#1a1c22;text-decoration:none;font-weight:700;font-size:12.5px;
  padding:7px 14px;border-radius:8px;transition:filter .15s;
}
.plan-banner-btn:hover{filter:brightness(1.07);}
.plan-banner-btn[hidden]{display:none;}
.proj-info{padding:11px 13px 13px;}
.proj-name{
  font-size:13px;font-weight:600;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:text;
}
.proj-name-input{
  font-size:13px;font-weight:600;margin:0 0 4px;width:100%;
  background:var(--surface-0,#111318);border:1px solid var(--accent);border-radius:5px;
  color:var(--text-bright);padding:2px 5px;font-family:inherit;outline:none;
}
.proj-meta{font-size:11px;color:var(--text-dim);display:flex;justify-content:space-between;align-items:center;}
.proj-actions{display:flex;gap:2px;}
.proj-rename,.proj-delete{
  background:transparent;border:none;color:var(--text-dim);cursor:pointer;padding:2px 4px;border-radius:5px;
  opacity:0;transition:opacity .15s,color .15s,background .15s;
}
.proj-card:hover .proj-rename,
.proj-card:hover .proj-delete{opacity:1;}
.proj-rename:hover{color:var(--accent);background:rgba(255,122,69,0.12);}
.proj-delete:hover{color:var(--danger);background:rgba(232,93,93,0.12);}

/* Per-PDF names list, shown under a multi-PDF project's own name/meta row */
.proj-pdf-list{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--rail-border);
  display:flex;flex-direction:column;gap:3px;
}
.proj-pdf-row{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.proj-pdf-name{
  font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1;cursor:text;
}
.proj-pdf-name-input{
  font-size:11px;flex:1;width:100%;
  background:var(--surface-0,#111318);border:1px solid var(--accent);border-radius:5px;
  color:var(--text-bright);padding:1px 5px;font-family:inherit;outline:none;
}
.proj-pdf-rename{
  background:transparent;border:none;color:var(--text-dim);cursor:pointer;
  padding:2px;border-radius:4px;flex-shrink:0;opacity:0;transition:opacity .15s,color .15s;
}
.proj-card:hover .proj-pdf-rename{opacity:0.7;}
.proj-pdf-rename:hover{opacity:1 !important;color:var(--accent);}

.empty-state{
  text-align:center;color:var(--text-dim);padding:70px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.empty-state svg{width:50px;height:50px;stroke:#565b66;}
.empty-state h2{font-family:var(--font-display);font-size:17px;color:var(--text-bright);margin:0;}
.empty-state p{margin:0;font-size:13px;max-width:320px;}

.hint{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--rail-bg);border:1px solid var(--rail-border);color:var(--text-bright);
  padding:9px 16px;border-radius:20px;font-size:12.5px;display:none;box-shadow:0 8px 20px rgba(0,0,0,0.3);
}