:root{
  --bg: #f4f7fb;
  --card: #ffffff;
  --primary: #6aa9ff;
  --primary-dark: #4f8ef0;
  --accent: #ffd9a8;
  --text: #2f3646;
  --muted: #8b93a7;
  --line: #e7ecf5;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow: 0 6px 24px rgba(90, 120, 180, 0.10);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  background: linear-gradient(180deg, #eef3fb 0%, #f7f9fd 260px, var(--bg) 100%);
  color: var(--text);
  min-height:100vh;
}

.hidden{ display:none !important; }

.app{ max-width: 900px; margin: 0 auto; padding: 0 20px 60px; }

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0 16px; flex-wrap: wrap; gap: 12px;
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:19px; }
.brand-dot{ width:12px; height:12px; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--accent)); display:inline-block; }

.tabs{ display:flex; gap:6px; background: var(--card); padding:5px; border-radius: 999px; box-shadow: var(--shadow); }
.tab-btn{
  border:none; background:transparent; padding:9px 18px; border-radius: 999px;
  font-size:14px; color: var(--muted); cursor:pointer; font-weight:600;
  transition: all .15s ease;
}
.tab-btn:hover{ color: var(--text); }
.tab-btn.active{ background: var(--primary); color:#fff; }

/* ---------- tab panels ---------- */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- cards ---------- */
.card{
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.card-title{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:6px; }
.card-title h2{ font-size:16px; margin:0; }
.muted{ color: var(--muted); }
.small{ font-size:12.5px; }

/* ---------- header card ---------- */
.header-grid{ display:flex; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
.biz-block{ display:flex; flex-direction:column; gap:4px; }
.logo-preview{ max-width:120px; max-height:70px; object-fit:contain; border-radius: var(--radius-sm); margin-bottom:6px; }
.biz-name{ font-size:20px; font-weight:700; }
.biz-info{ font-size:12.5px; }

.quote-meta{ text-align:right; min-width:220px; }
.quote-meta h1{ margin:0 0 8px; font-size:26px; color: var(--primary-dark); letter-spacing:1px; }
.meta-row{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:6px; }
.meta-row label{ font-size:12.5px; color: var(--muted); }
.meta-row input{ width:150px; text-align:right; }

.divider{ height:1px; background: var(--line); margin: 18px 0; }

.client-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field.wide{ grid-column: 1 / -1; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; color: var(--muted); font-weight:600; }

input[type=text], input[type=date], input[type=number], textarea{
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fbfcfe;
  outline:none;
  transition: border-color .15s ease, background .15s ease;
  width:100%;
}
input:focus, textarea:focus{ border-color: var(--primary); background:#fff; }

textarea{ resize: vertical; }

/* ---------- drop zone / photos ---------- */
.drop-zone{
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
  min-height: 110px;
}
.drop-zone.drag-over{ border-color: var(--primary); background: #f0f6ff; }
.drop-hint{ display:flex; flex-direction:column; align-items:center; justify-content:center; color: var(--muted); gap:6px; padding: 14px 0; font-size:13.5px; }
.drop-icon{ font-size:26px; color: var(--primary); font-weight:300; }

.photo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:12px; margin-top: 10px; }
.photo-thumb{ border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow); background:#fff; display:flex; flex-direction:column; }
.photo-img-wrap{ position:relative; aspect-ratio: 4/3; }
.photo-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb .rm-btn{
  position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
  background: rgba(20,25,35,0.55); color:#fff; border:none; cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center; line-height:1; z-index:2;
}
.photo-thumb .rm-btn:hover{ background: #e0574f; }
.photo-caption{
  border:none; border-top:1px solid var(--line); border-radius:0;
  padding:8px 9px; font-size:12px; background:#fff; width:100%; color:var(--text);
}
.photo-caption:focus{ background:#fff; border-top-color: var(--primary); }

/* ---------- items table ---------- */
.items-head, .item-row{
  display:grid;
  grid-template-columns: 1fr 56px 92px 84px 84px 26px;
  gap: 8px;
  align-items:center;
}
.items-head{ font-size:12px; color: var(--muted); font-weight:600; padding: 0 4px 8px; }
.item-row{ padding: 6px 4px; }
.item-row input{ padding:8px 10px; font-size:13.5px; }
.col-price, .col-total, .col-qty{ text-align:right; }
.col-unit{ text-align:center; }
.item-total{ text-align:right; font-weight:600; font-size:13.5px; }
select.col-unit{
  border:1.5px solid var(--line); border-radius: var(--radius-sm);
  padding:8px 4px; font-size:13px; font-family:inherit; color:var(--text);
  background:#fbfcfe; outline:none; width:100%; text-align:center;
}
select.col-unit:focus{ border-color: var(--primary); background:#fff; }
.item-del{
  border:none; background: transparent; color: var(--muted); cursor:pointer; font-size:16px;
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.item-del:hover{ background:#fdecea; color:#e0574f; }

.totals{ margin-top: 16px; padding-top: 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.totals-row{ display:flex; align-items:center; gap:10px; width: 260px; justify-content:space-between; }
.totals-row label{ font-size:13.5px; color: var(--muted); }
.totals-row input{ width:80px; text-align:right; padding:6px 8px; }
.totals-row.grand{ font-size:18px; font-weight:700; color: var(--primary-dark); border-top:1px solid var(--line); padding-top:8px; }

/* ---------- buttons ---------- */
.btn{
  border:none; border-radius: 999px; padding: 11px 22px; font-size:14px; font-weight:600;
  cursor:pointer; transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow: 0 6px 16px rgba(79,142,240,0.35); }
.btn-primary:hover{ box-shadow: 0 8px 20px rgba(79,142,240,0.45); }
.btn-secondary{ background: #eef3fb; color: var(--primary-dark); }
.btn-secondary:hover{ background: #e2ecfb; }
.btn-ghost{ background: transparent; color: var(--muted); border: 1.5px solid var(--line); }
.btn-ghost:hover{ color: var(--text); border-color:#cfd8ea; }
.btn.small{ padding: 6px 14px; font-size:12.5px; }

.action-bar{ position: sticky; bottom: 14px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; background: rgba(244,247,251,0.9); backdrop-filter: blur(6px); padding: 12px; border-radius: 999px; box-shadow: var(--shadow); }

/* ---------- history ---------- */
.history-header{ display:flex; align-items:center; justify-content:space-between; margin: 24px 0 16px; gap:12px; flex-wrap:wrap; }
.history-header h2{ margin:0; }
#historySearch{ max-width:260px; }

.history-list{ display:flex; flex-direction:column; gap:12px; }
.history-item{
  background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow);
  padding: 14px 18px; display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap:wrap;
}
.hi-main{ display:flex; flex-direction:column; gap:3px; }
.hi-client{ font-weight:700; font-size:15px; }
.hi-sub{ font-size:12.5px; color: var(--muted); }
.hi-actions{ display:flex; gap:8px; }

.empty-hint{ text-align:center; color: var(--muted); padding: 40px 0; }

/* ---------- settings ---------- */
.settings-card{ max-width: 520px; margin: 24px auto 0; display:flex; flex-direction:column; gap:14px; }
.logo-upload-row{ display:flex; align-items:center; gap:12px; }
.save-flash{ color:#38a169; font-weight:600; font-size:13.5px; margin-left:10px; }

/* ---------- toast ---------- */
.toast{
  position: fixed; left:50%; bottom: 28px; transform: translateX(-50%);
  background: #2f3646; color:#fff; padding: 11px 20px; border-radius: 999px;
  font-size:13.5px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 999;
}

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .client-grid{ grid-template-columns: 1fr; }
  .header-grid{ flex-direction:column; }
  .quote-meta{ text-align:left; }
  .meta-row{ justify-content:flex-start; }
  .items-head{ display:none; }
  .item-row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "desc desc"
      "qty unit"
      "price total"
      "del del";
    row-gap:8px;
  }
  .item-row .col-desc{ grid-area: desc; }
  .item-row .col-qty{ grid-area: qty; }
  .item-row .col-unit{ grid-area: unit; }
  .item-row .col-price{ grid-area: price; }
  .item-row .item-total{ grid-area: total; align-self:center; }
  .item-row .item-del{ grid-area: del; justify-self:end; }
}

/* ---------- print / export sheet look ---------- */
.exporting input, .exporting textarea, .exporting select{
  border: none; background: transparent; padding: 2px 0; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.exporting select{ text-align:center; text-align-last:center; }
.exporting .meta-row input{ text-align:right; }
.exporting .rm-btn,
.exporting .item-del,
.exporting #addItemBtn,
.exporting .drop-hint{ display: none !important; }
.exporting .drop-zone{ border: none; padding: 0; cursor: default; }
.exporting .item-row{ grid-template-columns: 1fr 56px 92px 84px 84px 0px; }
.exporting .photo-caption{ border-top:1px solid var(--line); padding:6px 8px; text-align:center; color:var(--text); font-size:12px; }
.exporting .photo-caption.cap-empty{ display:none; }