:root{
  /* Brand palette */
  --red:#C00707;
  --orange:#FF4400;
  --amber:#FFB33F;
  --blue:#134E8E;

  --ink:#0b1220;
  --muted:#5b6475;

  /* Glass system */
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.74);
  --stroke: rgba(255, 255, 255, 0.68);
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.10);
  --radius: 22px;
  --radius-sm: 14px;
  --blur: blur(18px);
  --focus: 0 0 0 4px rgba(19,78,142,.22);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 650px at 12% 6%, rgba(19,78,142,.16) 0%, rgba(19,78,142,0) 55%),
    radial-gradient(1100px 650px at 86% 10%, rgba(255,68,0,.12) 0%, rgba(255,68,0,0) 55%),
    radial-gradient(1000px 700px at 52% 92%, rgba(255,179,63,.16) 0%, rgba(255,179,63,0) 60%),
    linear-gradient(135deg, #f6f8ff, #f7fffb 45%, #fff7f0);
}

/* Subtle noise (pure CSS) */
.noise::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  z-index:0;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur) saturate(160%);
  -webkit-backdrop-filter: var(--blur) saturate(160%);
  border-radius: var(--radius);
}
.glass-strong{ background: var(--glass-strong); }

.glass-outline{ position:relative; isolation:isolate; overflow:hidden; }
.glass-outline::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}

.chip{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-radius: 999px;
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(246, 248, 255, 0.62);
  border-bottom: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.topbar__right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.brand{display:flex; align-items:center; gap:12px; min-width:240px; text-decoration:none; color:inherit;}
.brand__logo{
  width:44px;height:44px; object-fit:contain;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  padding:6px;
  border:1px solid rgba(255,255,255,.75);
}
.brand__title{font-weight:900; letter-spacing:.2px}
.brand__subtitle{font-size:12px; color:var(--muted)}
.topbar__badge{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(90deg, rgba(192,7,7,.10), rgba(255,68,0,.10), rgba(255,179,63,.10));
}
.navbtn{
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  color:var(--ink);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.75);
}
.navbtn:hover{ background: rgba(255,255,255,.78); }

/* Page layout */
.container{max-width:1200px; margin:22px auto; padding:0 16px 48px}
.page-title{
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -0.2px;
}
.page-subtitle{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.card{
  padding:18px 18px;
  margin:16px 0;
}
.card-title{
  font-size: 1.1rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  font-weight: 900;
}

/* Template Buttons */
.template-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
  margin-top: 14px;
}
.workflow-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.workflow-strip span{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(15,23,42,.08);
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.workflow-strip strong{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#134E8E;
  color:#fff;
  flex:0 0 auto;
}
.template-btn{
  padding: 12px;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.68);
  color: var(--ink);
  border-radius: 14px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.template-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.template-btn.active{
  background: linear-gradient(135deg, rgba(19,78,142,.14), rgba(255,179,63,.12));
  border-color: rgba(19,78,142,.22);
}

/* Form */
.form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.form-group{ margin-bottom: 12px; }
.form-group label{
  display:block;
  margin-bottom: 6px;
  font-weight: 900;
  font-size: 13px;
}
.form-group input, .form-group textarea, .form-group select{
  width:100%;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(15,23,42,.18);
  outline: none;
  background: rgba(255,255,255,.78);
  font-size: 14px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ box-shadow: var(--focus); border-color: rgba(19,78,142,.45); }
.form-error{
  margin-top:6px;
  min-height:18px;
  color:#b42318;
  font-size:12px;
  font-weight:900;
}

/* Logo Upload */
.logo-upload{
  padding: 16px;
  border: 1px dashed rgba(15,23,42,.25);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 16px;
  background: rgba(255,255,255,.55);
}
.logo-upload input{ display:none; }
.logo-preview{ max-height: 100px; max-width: 220px; margin: 10px auto 0; display:none; }

/* Items Table */
.line-items-panel{
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.50);
  overflow-x:auto;
}
.line-items-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.line-items-head h3{
  margin:0 0 4px;
  font-size:15px;
  font-weight:900;
}
.line-items-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}
.items-table{
  width:100%;
  min-width:720px;
  border-collapse: collapse;
  margin: 14px 0;
  border-radius: 16px;
  overflow: hidden;
}
.items-table th, .items-table td{
  padding: 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  text-align: left;
}
.items-table th{
  background: rgba(19,78,142,.07);
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
}
.items-table td input{
  width:100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.78);
}
.add-item-btn{
  padding: 10px 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 999px;
  cursor:pointer;
  font-weight: 900;
}
.add-item-btn:hover{ box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.remove-btn{
  background: linear-gradient(135deg, rgba(192,7,7,.95), rgba(255,68,0,.95));
  color:white;
  border:none;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
}

@media (max-width: 640px){
  .topbar{
    align-items:flex-start;
  }

  .brand{
    min-width:0;
  }

  .topbar__badge{
    display:none;
  }

  .container{
    margin:12px auto;
    padding:0 14px 36px;
  }

  .card{
    padding:16px 14px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }
  .workflow-strip{
    grid-template-columns:1fr;
  }

  .line-items-head{
    display:block;
  }

  .line-items-head .add-item-btn{
    margin-top:10px;
    width:100%;
  }

  .items-table,
  .items-table thead,
  .items-table tbody,
  .items-table tr,
  .items-table td{
    display:block;
    width:100%;
  }

  .items-table{
    min-width:0;
    margin:12px 0 16px;
    border-radius:18px;
    overflow:visible;
  }

  .items-table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .items-table tr{
    padding:12px;
    border:1px solid rgba(15,23,42,.12);
    border-radius:18px;
    background:rgba(255,255,255,.62);
    box-shadow:0 10px 26px rgba(15,23,42,.08);
  }

  .items-table tr + tr{
    margin-top:12px;
  }

  .items-table td{
    display:grid;
    grid-template-columns:minmax(88px, .42fr) minmax(0, 1fr);
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:0;
  }

  .items-table td::before{
    color:var(--muted);
    content:"";
    font-size:12px;
    font-weight:900;
  }

  .items-table td:nth-child(1)::before{ content:"Qty"; }
  .items-table td:nth-child(2)::before{ content:"Description"; }
  .items-table td:nth-child(3)::before{ content:"Unit Price"; }
  .items-table td:nth-child(4)::before{ content:"Amount"; }
  .items-table td:nth-child(5)::before{ content:"Action"; }

  .items-table td input,
  .items-table td .remove-btn{
    min-width:0;
    width:100%;
  }
}

/* Action Buttons */
.action-buttons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.btn{
  padding: 12px 16px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  flex: 1;
  min-width: 160px;
  background: rgba(255,255,255,.78);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn:focus{ outline:none; box-shadow: var(--focus); }
.btn[aria-busy="true"]{ opacity:.72; pointer-events:none; }
.btn[aria-busy="true"]::after{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin-left:8px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:999px;
  vertical-align:-2px;
  animation:invoiceSpin .72s linear infinite;
}
@keyframes invoiceSpin{to{transform:rotate(360deg)}}
.btn-ai{ border-color: rgba(19,78,142,.22); }
.btn-generate{
  border-color: rgba(255,68,0,.25);
  background: linear-gradient(135deg, rgba(255,68,0,.95), rgba(255,179,63,.95));
  color: #0b1220;
}
.btn-pdf{
  border-color: rgba(19,78,142,.25);
  background: #134E8E;
  color: white;
}
.btn-excel{
  border-color: rgba(255,179,63,.35);
  background: rgba(255,255,255,.78);
}
.shortcut-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.shortcut-row kbd{
  border:1px solid rgba(19,78,142,.18);
  border-bottom-width:2px;
  border-radius:8px;
  padding:4px 7px;
  background:#fff;
  color:var(--blue);
  font:900 12px/1 Inter,sans-serif;
}
.history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.document-history{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.history-empty{
  display:grid;
  gap:5px;
  padding:16px;
  border:1px dashed rgba(19,78,142,.22);
  border-radius:18px;
  background:rgba(255,255,255,.54);
  color:var(--muted);
}
.history-empty strong{
  color:var(--ink);
}
.history-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:13px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:rgba(255,255,255,.60);
}
.history-main,
.history-meta{
  display:grid;
  gap:4px;
}
.history-main strong{
  font-size:14px;
  font-weight:950;
}
.history-main span,
.history-status{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.history-total{
  font-weight:950;
  color:var(--blue);
  text-align:right;
}
.history-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:grid;
  gap:10px;
  max-width:min(390px, calc(100vw - 36px));
}
.toast{
  border:1px solid rgba(19,78,142,.14);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 45px rgba(16,24,40,.16);
  padding:12px 14px;
  color:var(--ink);
  font-weight:900;
}
.toast small{display:block; margin-top:4px; color:var(--muted); font-weight:700}

/* Preview (keep document output printable; just container matches theme) */
.document-preview{
  display:none;
  margin-top: 16px;
  padding: 30px;
  background: white;
  border-radius: 18px;
  box-shadow: var(--shadow);
  font-family: Inter, Arial, sans-serif;
  color:#111827;
  overflow-x:auto;
}
.doc-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  margin-bottom:20px;
  border-bottom:3px solid #134E8E;
}
.doc-title{
  font-size:30px;
  font-weight:900;
  letter-spacing:.08em;
  color:#134E8E;
  text-transform:uppercase;
}
.doc-logo{
  max-width:150px;
  max-height:80px;
  object-fit:contain;
}
.doc-info-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:18px 0 20px;
}
.info-block{
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f9fafb;
}
.info-block h4,
.doc-section h4{
  margin:0 0 8px;
  font-size:12px;
  color:#134E8E;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.info-block p,
.doc-section p{
  margin:4px 0;
  line-height:1.45;
}
.doc-section{
  margin:18px 0;
}
.doc-table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 18px;
  border:1px solid #d8dee8;
  table-layout:fixed;
  background:#fff;
}
.doc-table th,
.doc-table td{
  padding:12px 10px;
  border:1px solid #d8dee8;
  vertical-align:top;
  text-align:left;
  line-height:1.35;
  word-break:break-word;
}
.doc-table th{
  background:#134E8E;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
}
.doc-table tbody tr:nth-child(even) td{
  background:#f8fafc;
}
.doc-line-items th:nth-child(1),
.doc-line-items td:nth-child(1){
  text-align:center;
}
.doc-line-items th:nth-child(3),
.doc-line-items td:nth-child(3),
.doc-line-items th:nth-child(4),
.doc-line-items td:nth-child(4){
  text-align:right;
}
.doc-table-number{
  text-align:center !important;
}
.doc-table-money{
  text-align:right !important;
  white-space:nowrap;
}
.doc-totals{
  width:min(360px, 100%);
  margin:18px 0 22px auto;
  border:1px solid #d8dee8;
  border-radius:12px;
  overflow:hidden;
}
.total-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid #d8dee8;
}
.total-row:last-child{
  border-bottom:0;
}
.grand-total{
  background:#134E8E;
  color:#fff;
  font-weight:900;
}
.signature{
  margin-top:36px;
}
.signature-line{
  width:240px;
  max-width:70%;
  border-top:1px solid #111827;
  margin:24px 0 8px;
}

@media print{
  body{ background:white; }
  .topbar,
  .container > .card:not(#previewWrap),
  .footer{ display:none !important; }
  #previewWrap{
    display:block !important;
    box-shadow:none;
    border:0;
  }
  .document-preview{
    display:block !important;
    box-shadow:none;
    padding:0;
    margin:0;
    border-radius:0;
  }
}

@media (max-width: 700px){
  .document-preview{
    padding:18px;
  }
  .doc-header{
    display:block;
  }
  .doc-logo{
    margin-top:12px;
  }
  .doc-info-grid{
    grid-template-columns:1fr;
  }
  .doc-table{
    min-width:620px;
  }
  .toast-stack{
    left:14px;
    right:14px;
    bottom:14px;
    max-width:none;
  }
  .history-head,
  .history-row{
    display:grid;
    grid-template-columns:1fr;
  }
  .history-meta,
  .history-total{
    text-align:left;
  }
  .history-actions{
    justify-content:stretch;
  }
  .history-actions .navbtn,
  #clearDocumentHistory{
    text-align:center;
  }
}

.footer{ padding: 6px 4px; }