:root {
  --brand: #0f5c4d; --brand-dark: #0a4339; --tint: #eef6f3; --ink: #1b2430; --muted: #6b7686; --line: #e3e7ee;
  --bg: #f4f6f8; --card: #fff; --red: #c0392b; --amber: #b7791f; --green: #1e8449; --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 2px; } h2 { font-size: 15px; margin: 0 0 12px; } h3 { font-size: 13px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .pad { padding: 24px; } .right { float: right; } .overdue { color: var(--red); font-weight: 600; }

/* shell */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { background: var(--brand-dark); color: #d8ece6; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; }
.side a { color: #d8ece6; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; } .side a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.side a.on { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.logo { font-weight: 700; font-size: 17px; color: #fff; padding: 4px 12px 18px; } .logo small { display: block; font-weight: 400; font-size: 11px; color: #9fc7bb; }
.logo.big { color: var(--brand); font-size: 24px; padding: 0; }
.spacer { flex: 1; } .me { padding: 10px 12px; color: #fff; font-size: 13px; } .me small { display: block; color: #9fc7bb; } .me .link { color: #9fc7bb; padding: 0; margin-top: 4px; }
main { padding: 24px 28px 60px; min-width: 0; max-width: 1300px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { color: var(--muted); font-size: 12px; margin-bottom: 8px; }

/* cards & layout */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.table-card { padding: 0; overflow-x: auto; } .pad-h { padding: 16px 18px 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cols > .card { margin-bottom: 0; } .cols { margin-bottom: 16px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .kpi span { color: var(--muted); font-size: 12px; } .kpi b { display: block; font-size: 26px; } .kpi small { color: var(--muted); } .kpi b.warn { color: var(--red); }
.deal-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; } .deal-side .card { margin-bottom: 14px; }
.quote-layout { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; } .quote-side { position: sticky; top: 16px; }
@media (max-width: 1000px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .logo { padding: 4px 12px; } .spacer { display: none; } .cols, .deal-layout, .quote-layout, .kpis { grid-template-columns: 1fr; } .quote-side { position: static; } main { padding: 16px; } }

/* rows */
.row-link { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: inherit; } .row-link:last-child { border-bottom: 0; } .row-link:hover { background: #fafbfc; text-decoration: none; }
.right { text-align: right; } .row { padding: 6px 0; display: flex; gap: 10px; align-items: center; } .ico { font-size: 13px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 30px; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; }
.bar-track { background: #eef1f5; border-radius: 6px; height: 12px; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 6px; min-width: 2px; } .bar-val { text-align: right; font-weight: 600; }
.s-Won { background: var(--green); } .s-Lost { background: #9aa4b2; } .s-Negotiation { background: #dd8a2d; } .s-ProposalSent { background: #d4a017; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 0 0 10px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; } .notes { white-space: pre-wrap; }
.contact { padding: 8px 0; border-bottom: 1px solid var(--line); } .contact:last-child { border: 0; } .contact .link { margin-right: 10px; }
.doc { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); } .doc-up { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .doc-up input[type=file] { max-width: 100%; font-size: 12px; }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: start; }
.kcol { background: #e9edf1; border-radius: var(--radius); padding: 10px; min-height: 160px; border: 2px solid transparent; } .kcol.over { border-color: var(--brand); background: var(--tint); }
.kcol-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; margin-bottom: 8px; } .count { background: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; }
.kcard { display: block; background: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: grab; } .kcard:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); text-decoration: none; }
.kmeta { display: flex; gap: 10px; font-size: 12px; margin-top: 4px; color: var(--ink); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .timeline li:last-child { border: 0; }
.t-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; flex: none; font-size: 14px; } .t-stage_change .t-ico { background: #fdf3df; } .t-quotation .t-ico { background: #e8eefc; } .t-document .t-ico { background: #f1e8fc; }
.t-body { flex: 1; min-width: 0; } .t-head .link { float: right; } .t-details { color: var(--muted); white-space: pre-wrap; margin-top: 2px; }

/* forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; } .form-grid.inline { grid-template-columns: repeat(5, auto); margin-top: 12px; } .form-grid > .alert, .wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid.inline { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 3px; } .field > span { font-size: 12px; font-weight: 600; color: #44505f; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid #cfd6df; border-radius: 7px; background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9ccfc2; border-color: var(--brand); } input:disabled, select:disabled, textarea:disabled { background: #f3f5f7; color: #6b7686; }
input.ok { border-color: var(--green); } input.bad { border-color: var(--red); } .head-actions select { width: auto; } .search { min-width: 260px; } .check { display: flex; gap: 8px; align-items: center; } .check input { width: auto; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* buttons & badges */
.btn { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid #cfd6df; background: #fff; color: var(--ink); cursor: pointer; display: inline-block; } .btn:hover { background: #f6f8fa; text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-dark); } .btn.success { background: var(--green); border-color: var(--green); color: #fff; } .btn.danger { color: var(--red); border-color: #e6b7b1; }
.btn.small { padding: 3px 10px; font-size: 12px; } .btn.block { display: block; width: 100%; margin-bottom: 8px; text-align: center; } .btn:disabled { opacity: .55; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--brand); cursor: pointer; font: inherit; font-size: 12px; padding: 0 4px; } .link.danger { color: var(--red); } .icon { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--muted); }
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 10px; text-transform: capitalize; background: #e6eaf0; color: #44505f; }
.badge.blue { background: #dbeafe; color: #1e4fa3; } .badge.indigo { background: #e0e7ff; color: #3b3fa8; } .badge.violet { background: #ede9fe; color: #5b32b0; } .badge.amber { background: #fdf0c9; color: #8a6100; } .badge.orange { background: #fde3c8; color: #9a4d0c; } .badge.green { background: #d9f2e3; color: #17703d; } .badge.red { background: #fadbd8; color: #a32619; }
.alert { padding: 9px 12px; border-radius: 8px; margin-bottom: 12px; border: 1px solid; } .alert .link { float: right; }
.alert.error { background: #fdecea; border-color: #f5c2bd; color: #8e2318; } .alert.warn { background: #fff6e0; border-color: #f2dba0; color: #7a5600; } .alert.ok { background: #e6f6ec; border-color: #b9e3c9; color: #17703d; } .alert.info { background: #e8f1fb; border-color: #bcd6f2; color: #1e4fa3; }

/* tables */
table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafbfc; } td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.r, th.r { text-align: right; } tr.click { cursor: pointer; } tr.click:hover td { background: #fafbfc; } tr.inactive td { color: #98a2b0; }
.lines td { padding: 7px 10px; } .lines th { padding: 8px 10px; } .lines input { text-align: right; padding: 5px 7px; } tr.active-line td { background: var(--tint); }
.custom-row { display: grid; grid-template-columns: 1fr 135px 70px 100px 70px 28px; gap: 6px; margin-bottom: 8px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.loc-note { margin: 8px 0 0; }
.nl textarea { width: 100%; margin: 6px 0; }
.nl-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nl-result { margin-top: 10px; border-top: 1px solid var(--line, #e3e7ee); padding-top: 8px; }
.nl-result ul { margin: 6px 0 6px 18px; padding: 0; font-size: 13px; }
.rate-grid { display: grid; grid-template-columns: 1fr 110px 130px; gap: 6px 10px; align-items: center; grid-column: 1 / -1; }
.rate-grid .hd { font-size: 12px; color: #6b7686; }
.ovr { background: #fff8e1; }

/* quote summary */
.summary .big { font-size: 26px; font-weight: 700; color: var(--brand); } .summary .big small { font-size: 12px; font-weight: 400; color: var(--muted); }
.sum { margin-top: 10px; } .sum td { padding: 4px 0; border: 0; font-size: 13px; } .sum tr.sep td { border-top: 1px solid var(--line); padding-top: 8px; } .sum tr.tot td { font-weight: 700; } .sum tr.neg td { color: var(--green); }
.sched { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; } .sched.total { font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.zoho-box { margin-top: 6px; padding: 8px 10px; background: var(--tint); border-radius: 8px; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 25, 35, .5); display: grid; place-items: start center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 480px; box-shadow: 0 20px 50px rgba(0,0,0,.3); } .modal.wide { max-width: 760px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); } .modal-head h3 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); } .modal-body { padding: 16px 18px 18px; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; } .login .card { width: 100%; max-width: 380px; padding: 28px; } .login .field { margin-bottom: 12px; }

.w90 { width: 90px; } .w110 { width: 110px; } .w120 { width: 120px; }

.kcard { position: relative; }
.kdel { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; line-height: 20px; border-radius: 50%; border: 0; background: transparent; color: #9aa4b2; font-size: 16px; cursor: pointer; opacity: 0; transition: opacity .12s; padding: 0; }
.kcard:hover .kdel, .kdel:focus { opacity: 1; } .kdel:hover { background: #fadbd8; color: var(--red); }
@media (hover: none) { .kdel { opacity: 1; } }
.kcard b { padding-right: 18px; }
.span-all { grid-column: 1 / -1; }

.seat-rate { margin-top: 10px; max-width: 420px; }
.eff { background: #f1f7f4; border-radius: 8px; padding: 8px 10px; margin: 10px 0; font-size: 13px; }
.eff div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }

.price-grid input { width: 96px; text-align: right; }
.price-grid input.has { background: #eef6ff; }
.price-grid tr.grp td { background: #f4f6f9; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5b6676; }
.price-grid th, .price-grid td { white-space: nowrap; }
.price-grid { overflow-x: auto; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.tab { border: 1px solid #d5dbe3; background: #fff; border-radius: 8px; padding: 7px 12px; cursor: pointer; font: inherit; }
.tab.on { background: #0f4a3d; color: #fff; border-color: #0f4a3d; } .tab.on .muted { color: #cfe3dc; }
.copy-bar { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }
.copy-bar select { width: auto; min-width: 220px; }
.sized { margin: 4px 0 10px; }
.sized-row { display: grid; grid-template-columns: 110px 120px 120px 1fr 28px; gap: 8px; align-items: end; margin: 8px 0; }
.sized-row label { display: flex; flex-direction: column; font-size: 12px; color: #5b6676; gap: 3px; }
.sized-row input { width: 100%; }
.sized-total { text-align: right; font-weight: 600; padding-bottom: 8px; }
.sized-total .muted { margin-left: 4px; font-weight: 400; }
.legacy-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 10px; align-items: center; margin: 8px 0; }

.logo-box { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-preview { max-height: 72px; max-width: 220px; object-fit: contain; border: 1px solid #e3e7ee; border-radius: 8px; padding: 8px; background: #fff; }
.logo-preview.empty { display: flex; align-items: center; justify-content: center; width: 160px; height: 72px; }
input[type=color] { width: 64px; height: 36px; padding: 2px; }

.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}.inline-form input{flex:1;min-width:220px}
.modal textarea{width:100%;font:inherit}

details.how{margin:8px 0;padding:8px 12px;border:1px solid var(--line,#e5e7eb);border-radius:8px;background:rgba(0,0,0,.02)}
details.how summary{cursor:pointer;font-weight:600}
details.how ol{margin:8px 0 0 18px;padding:0}details.how li{margin:4px 0}
label.check{display:flex;gap:8px;align-items:center;margin:8px 0}

.err{color:#b42318}
h3.sub{margin:14px 0 4px;font-size:14px}

.quick-btn{margin:10px 12px 14px;padding:10px 12px;border:0;border-radius:8px;background:#fff;color:#0b3d36;font-weight:700;cursor:pointer;text-align:left}
.quick-btn:hover{background:#e8f3f0}
.match-box{background:#fff8e1;border:1px solid #f0d78a;border-radius:8px;padding:10px 12px}
.match-box .check{margin:6px 0 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line,#d5dae1);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;font:inherit}
.chip.on{background:#0b3d36;color:#fff;border-color:#0b3d36}
.warn-card{border-left:4px solid #f59e0b}
@media (max-width:700px){.quick-btn{margin:8px}}

.loc-tools{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap}.loc-tools input{flex:1;min-width:220px}.loc-tools select{width:auto}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.loc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.loc-card.inactive{opacity:.65}.loc-card header{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.loc-card h3{margin:0;font-size:16px}
.loc-addr{margin:0;font-size:13px}.loc-bar{height:8px;border-radius:5px;background:#e6eaf0;overflow:hidden;margin-bottom:4px}.loc-bar i{display:block;height:100%;background:#2f9e6b}
.loc-tags{display:flex;flex-wrap:wrap;gap:5px}.loc-tags span{font-size:11px;background:#eef1f5;color:#44505f;border-radius:10px;padding:2px 8px}
.loc-card footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
h3.sub.span-all{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line)}

.loc-cover{width:calc(100% + 32px);margin:-16px -16px 0;height:140px;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;display:block}
.lf-group{margin:0 0 12px}.lf-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.lf-head .btn{margin-left:auto;cursor:pointer}
.lf-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lf-thumbs figure{margin:0;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:6px}.lf-thumbs figure.off{opacity:.55}
.lf-thumbs img{width:100%;height:95px;object-fit:cover;border-radius:5px;background:#f3f5f8}.lf-thumbs input[type=text],.lf-thumbs input:not([type]){font-size:12px;padding:3px 6px}
.lf-doc{padding:4px 0;border-bottom:1px solid var(--line)}
.loc-card h3{text-transform:none;letter-spacing:0;color:var(--ink,#1b2430);font-size:16px}
.warn-note{color:#8a6100}

.rev-card{margin-top:16px}.rev-table td{vertical-align:top}.rev-table tr.cur{background:#faf6ec}.rev-table .up{color:#a32619}.rev-table .down{color:#17703d}
.chg{margin:6px 0 0;padding-left:18px;font-size:12px}.chg .from{color:#a32619;text-decoration:line-through}.chg .to{color:#17703d}
.ev-log{list-style:none;padding:0;margin:10px 0 0}.ev-log li{padding:8px 0;border-top:1px solid var(--line)}
.clause{margin:0 0 14px}.clause-head{display:flex;gap:8px;align-items:center;margin-bottom:4px}.clause-head input{flex:1;font-weight:600}.clause textarea{width:100%}
.sign-row{display:flex;gap:8px;margin-bottom:8px}.sign-row input{flex:1}
tr.click{cursor:pointer}