:root{
    --ink:#1E2A38;
    --paper:#EEE9DC;
    --paper-2:#F7F4EC;
    --card:#FFFDF8;
    --line:#D8D0BC;
    --line-strong:#B9AF93;
    --brass:#A8782F;
    --brass-dim:#C9A870;
    --green:#3E6B52;
    --green-bg:#E4EDE4;
    --rust:#9C4630;
    --rust-bg:#F3E4DD;
    --muted:#6E6455;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.5;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:32px 24px 80px;}
  .masthead{
    display:flex;justify-content:space-between;align-items:flex-end;
    border-bottom:2px solid var(--ink);
    padding-bottom:16px;margin-bottom:24px;
  }
  .masthead h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:30px;
    margin:0;
    letter-spacing:-0.01em;
  }
  .masthead .sub{color:var(--muted);font-size:13px;margin-top:4px;}
  .metrics{display:flex;gap:12px;}
  .metric{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 16px;
    min-width:120px;
  }
  .metric .label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  .metric .value{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:500;margin-top:2px;}
  .value.pos{color:var(--green);}
  .value.neg{color:var(--rust);}

  .layout{display:grid;grid-template-columns:280px 1fr;gap:24px;}
  @media (max-width:800px){.layout{grid-template-columns:1fr;}}

  .rail{border-right:1px solid var(--line-strong);padding-right:20px;}
  .rail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .rail-head h2{font-family:'Fraunces',serif;font-size:15px;font-weight:600;margin:0;}
  .btn{
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    background:transparent;
    border:1px solid var(--line-strong);
    color:var(--ink);
    border-radius:6px;
    padding:5px 10px;
    cursor:pointer;
  }
  .btn:hover{background:var(--paper-2);}
  .btn.primary{background:var(--brass);border-color:var(--brass);color:#fff;}
  .btn.primary:hover{background:#93692a;}
  .btn.small{padding:3px 8px;font-size:11.5px;}
  .btn.danger{border-color:var(--rust);color:var(--rust);}
  .btn.danger:hover{background:var(--rust-bg);}

  .entity-block{margin-bottom:6px;}
  .entity-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:7px 8px;border-radius:6px;cursor:pointer;
  }
  .entity-row:hover{background:var(--paper-2);}
  .entity-row.active{background:var(--paper-2);border:1px solid var(--line-strong);}
  .entity-row .name{font-weight:500;font-size:13.5px;}
  .entity-row .count{font-size:11px;color:var(--muted);}
  .prop-list{margin:2px 0 8px 14px;border-left:1px solid var(--line);padding-left:10px;}
  .prop-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:5px 6px;border-radius:6px;cursor:pointer;font-size:13px;
  }
  .prop-row:hover{background:var(--paper-2);}
  .prop-row.active{background:var(--brass);color:#fff;}
  .prop-row.active .net{color:#fff;}
  .prop-row .net{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);}
  .add-prop-link{font-size:11.5px;color:var(--brass);cursor:pointer;margin:2px 0 8px 14px;display:inline-block;}
  .add-prop-link:hover{text-decoration:underline;}

  .empty-rail{color:var(--muted);font-size:12.5px;padding:8px;}

  .main{min-height:400px;}
  .deed{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px 24px;
    position:relative;
    margin-bottom:20px;
  }
  .deed:before{
    content:"";position:absolute;top:0;right:0;
    width:0;height:0;
    border-style:solid;
    border-width:0 22px 22px 0;
    border-color:transparent var(--paper) transparent transparent;
  }
  .deed-top{display:flex;justify-content:space-between;align-items:flex-start;}
  .deed-top .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--brass);font-weight:600;}
  .deed-top h2{font-family:'Fraunces',serif;font-size:22px;font-weight:600;margin:2px 0 2px;}
  .deed-top .addr{color:var(--muted);font-size:13px;}
  .deed-metrics{display:flex;gap:24px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
  .deed-metrics .m .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
  .deed-metrics .m .value{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:500;margin-top:2px;}

  .section{margin-bottom:24px;}
  .section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .section-head h3{font-family:'Fraunces',serif;font-size:16px;font-weight:600;margin:0;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{
    text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line-strong);
  }
  td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  td.amt{font-family:'IBM Plex Mono',monospace;text-align:right;}
  td.amt.income{color:var(--green);}
  td.amt.expense{color:var(--rust);}
  .row-actions{text-align:right;white-space:nowrap;}
  .tag{
    font-size:11px;padding:2px 8px;border-radius:20px;
    background:var(--paper-2);color:var(--muted);border:1px solid var(--line);
  }
  .no-rows{color:var(--muted);font-size:12.5px;padding:12px 8px;}

  .add-form{
    display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:8px;
    margin-top:10px;align-items:end;
  }
  .add-form.income{grid-template-columns:1fr 1fr 1fr auto;}
  .add-form label{font-size:11px;color:var(--muted);display:block;margin-bottom:3px;}
  .add-form input,.add-form select{
    width:100%;padding:6px 8px;border:1px solid var(--line-strong);border-radius:6px;
    font-family:'Inter',sans-serif;font-size:13px;background:var(--paper-2);
  }
  .add-form input:focus,.add-form select:focus{outline:none;border-color:var(--brass);}
  .err{color:var(--rust);font-size:11.5px;margin-top:4px;}

  .stack-card{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:16px 20px;margin-bottom:16px;
  }
  .stack-card .stack-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .stack-card .stack-head h4{font-family:'Fraunces',serif;font-size:14.5px;margin:0;font-weight:600;}
  .kv-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px dashed var(--line);}
  .kv-row:last-child{border-bottom:none;}
  .kv-row .k{color:var(--muted);}
  .kv-row .v{font-family:'IBM Plex Mono',monospace;}
  .doc-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);}
  .doc-row:last-child{border-bottom:none;}
  .doc-row .dname{font-size:13px;}
  .doc-row .dname .status{font-size:11.5px;color:var(--muted);display:block;margin-top:1px;}
  .profit-banner{
    margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--paper-2);
    display:flex;justify-content:space-between;align-items:center;font-size:13px;
  }
  .profit-banner .amt{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500;}
  .fine-print{font-size:11px;color:var(--muted);margin-top:6px;}
  .cat-table td, .cat-table th{padding:6px 8px;}

  .welcome{
    text-align:center;padding:60px 20px;color:var(--muted);
  }
  .welcome h2{font-family:'Fraunces',serif;color:var(--ink);font-size:20px;}

  .modal-bg{
    position:fixed;inset:0;background:rgba(30,42,56,.35);
    display:none;align-items:center;justify-content:center;z-index:50;
  }
  .modal-bg.open{display:flex;}
  .modal{
    background:var(--card);border-radius:12px;padding:22px 24px;width:320px;
    border:1px solid var(--line);
  }
  .modal h3{font-family:'Fraunces',serif;margin:0 0 12px;font-size:17px;}
  .modal label{font-size:11.5px;color:var(--muted);display:block;margin:10px 0 4px;}
  .modal input,.modal select{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper-2);font-family:'Inter',sans-serif;font-size:13px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}

  /* ---- added for the hosted app ---- */

  .gate{
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .gate-card{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:28px 30px;width:100%;max-width:360px;
  }
  .gate-card h1{
    font-family:'Fraunces',serif;font-size:22px;font-weight:600;margin:0 0 4px;
  }
  .gate-card .sub{color:var(--muted);font-size:13px;margin-bottom:18px;}
  .gate-card label{font-size:11.5px;color:var(--muted);display:block;margin-bottom:4px;}
  .gate-card input{
    width:100%;padding:8px 10px;border:1px solid var(--line-strong);border-radius:6px;
    background:var(--paper-2);font-family:'Inter',sans-serif;font-size:14px;
  }
  .gate-card .btn{width:100%;margin-top:14px;padding:9px;font-size:13.5px;}

  .masthead-actions{display:flex;align-items:center;gap:10px;}
  .btn.ghost{border-color:transparent;color:var(--muted);}
  .btn.ghost:hover{background:var(--paper-2);color:var(--ink);}

  .tag.type{background:var(--paper-2);border-color:var(--line-strong);color:var(--ink);}
  .tag.type.commercial{background:var(--green-bg);border-color:var(--green);color:var(--green);}

  .deed-top .title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .deed-actions{display:flex;gap:6px;align-items:center;}

  .receipt-preview{
    margin-bottom:12px;border:1px solid var(--line);border-radius:8px;
    padding:8px;background:var(--paper-2);
  }
  .receipt-preview img{width:100%;max-height:200px;object-fit:contain;display:block;border-radius:4px;}

  .banner{
    padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:14px;
    border:1px solid var(--line-strong);background:var(--paper-2);color:var(--muted);
  }
  .banner.error{background:var(--rust-bg);border-color:var(--rust);color:var(--rust);}

  .spinner{
    width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--brass);
    border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:6px;
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){.spinner{animation:none;}}

  :focus-visible{outline:2px solid var(--brass);outline-offset:2px;}