:root{
  --grid-bg:#04100b;
  --grid-bg-2:#06160f;
  --grid-panel:#071a12;
  --grid-panel-2:#092119;
  --grid-panel-3:#0b281d;

  --grid-line:#123c2b;
  --grid-line-soft:#0c2c20;
  --grid-line-bright:#1a5b40;

  --grid-text:#f4fbf7;
  --grid-text-soft:#c4d8cd;
  --grid-muted:#779789;
  --grid-muted-2:#587568;

  --grid-green:#54f0a5;
  --grid-green-2:#20d986;
  --grid-green-soft:rgba(84,240,165,.10);
  --grid-green-glow:rgba(84,240,165,.18);

  --grid-red:#ff6570;
  --grid-red-soft:rgba(255,101,112,.12);

  --grid-radius:10px;
  --grid-shadow:
    0 18px 60px rgba(0,0,0,.28);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
}

body.grid-body{
  overflow:hidden;
  color:var(--grid-text);
  background:
    radial-gradient(
      circle at 72% -10%,
      rgba(31,125,80,.15),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #06140e 0%,
      #030b07 100%
    );
  font-family:
    "DM Sans",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,
input:focus-visible{
  outline:2px solid rgba(84,240,165,.7);
  outline-offset:2px;
}


/* =========================================================
   APP
   ========================================================= */

.qgrid-app{
  width:100%;
  height:100vh;
  min-width:960px;

  display:grid;

  grid-template-rows:
    66px
    42px
    minmax(0,1fr)
    68px
    26px;

  background:
    linear-gradient(
      180deg,
      rgba(5,21,14,.98),
      rgba(3,12,8,.98)
    );
}


/* =========================================================
   TOP BAR
   ========================================================= */

.qgrid-topbar{
  position:relative;
  z-index:20;

  display:grid;

  grid-template-columns:
    170px
    minmax(260px,600px)
    1fr
    auto;

  align-items:center;
  gap:18px;

  padding:0 22px;

  border-bottom:
    1px solid var(--grid-line);

  background:
    linear-gradient(
      180deg,
      rgba(5,24,16,.98),
      rgba(5,19,13,.98)
    );
}

.qgrid-brand{
  display:flex;
  align-items:center;
  gap:11px;

  min-width:0;

  color:inherit;
  text-decoration:none;
}

.qgrid-brand-mark{
  position:relative;

  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border:
    1px solid rgba(84,240,165,.48);

  border-radius:11px;

  color:var(--grid-green);

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(84,240,165,.18),
      transparent 48%
    ),
    #08281b;

  box-shadow:
    inset 0 0 18px rgba(84,240,165,.06),
    0 0 22px rgba(84,240,165,.07);

  font-size:18px;
  font-weight:900;
}

.qgrid-brand-mark::after{
  content:"";

  position:absolute;

  width:15px;
  height:15px;

  border:
    2px solid var(--grid-green);

  border-radius:4px;

  opacity:.45;
}

.qgrid-brand-copy{
  display:grid;
  gap:4px;

  line-height:1;
}

.qgrid-brand-copy strong{
  color:#f8fffb;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.3px;
}

.qgrid-brand-copy small{
  color:var(--grid-green);
  font-size:8px;
  font-weight:900;
  letter-spacing:3px;
}


/* =========================================================
   GLOBAL SEARCH
   ========================================================= */

.qgrid-global-search{
  height:38px;

  display:grid;

  grid-template-columns:
    28px
    minmax(0,1fr)
    auto;

  align-items:center;

  padding:0 8px;

  border:
    1px solid var(--grid-line);

  border-radius:8px;

  background:
    rgba(5,22,15,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015);
}

.qgrid-global-search:focus-within{
  border-color:
    rgba(84,240,165,.48);

  box-shadow:
    0 0 0 3px rgba(84,240,165,.05);
}

.qgrid-search-icon{
  display:grid;
  place-items:center;

  color:#a4bdb1;

  font-size:17px;
}

.qgrid-global-search input{
  width:100%;
  height:100%;

  border:0;
  outline:0;

  color:var(--grid-text);

  background:transparent;

  font-size:11px;
}

.qgrid-global-search input::placeholder{
  color:#668578;
}

.qgrid-global-search kbd{
  padding:3px 6px;

  border:
    1px solid var(--grid-line);

  border-radius:5px;

  color:#8da99b;
  background:#091d15;

  font-size:9px;
  font-family:inherit;
}


/* =========================================================
   TOP ACTIONS
   ========================================================= */

.qgrid-top-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:7px;
}

.qgrid-button{
  height:37px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  padding:0 13px;

  border:
    1px solid var(--grid-line);

  border-radius:8px;

  color:#eaf6ef;

  background:
    rgba(6,24,16,.8);

  font-size:10px;
  font-weight:750;

  cursor:pointer;

  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}

.qgrid-button:hover{
  transform:translateY(-1px);

  border-color:#246748;

  background:#0a261a;
}

.qgrid-button.primary{
  min-width:100px;

  border-color:var(--grid-green);

  color:#032016;

  background:
    linear-gradient(
      180deg,
      #65f5af,
      #43e89b
    );

  box-shadow:
    0 8px 26px rgba(84,240,165,.13);
}

.qgrid-button.primary:hover{
  background:
    linear-gradient(
      180deg,
      #72f7b8,
      #4ceda2
    );

  box-shadow:
    0 10px 30px rgba(84,240,165,.20);
}


/* =========================================================
   ACCOUNT
   ========================================================= */

.qgrid-account{
  min-width:185px;

  display:grid;

  grid-template-columns:
    38px
    minmax(0,1fr)
    20px;

  align-items:center;
  gap:9px;

  padding-left:17px;

  border-left:
    1px solid var(--grid-line-soft);
}

.qgrid-avatar{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(84,240,165,.36);

  border-radius:50%;

  color:var(--grid-green);

  background:#09251a;

  font-size:10px;
  font-weight:800;
}

.qgrid-account-copy{
  min-width:0;

  display:grid;
  gap:3px;
}

.qgrid-account-copy strong{
  overflow:hidden;

  color:#f2faf5;

  font-size:10px;
  font-weight:750;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.qgrid-account-copy span{
  color:var(--grid-green);

  font-size:9px;
  font-weight:750;
}

.qgrid-account-chevron{
  color:#789789;

  font-size:13px;
}


/* =========================================================
   WORKBOOK TABS
   ========================================================= */

.qgrid-workbook-tabs{
  display:flex;
  align-items:end;
  gap:4px;

  padding:0 22px;

  overflow:hidden;

  border-bottom:
    1px solid var(--grid-line);

  background:#061710;
}

.qgrid-workbook-tabs button{
  position:relative;

  height:37px;

  display:flex;
  align-items:center;
  gap:7px;

  min-width:0;

  padding:0 15px;

  border:
    1px solid var(--grid-line-soft);

  border-bottom:0;

  border-radius:
    8px 8px 0 0;

  color:#8ca89a;

  background:#071a12;

  font-size:10px;
  font-weight:650;

  cursor:pointer;

  transition:
    color .14s ease,
    background .14s ease,
    border-color .14s ease;
}

.qgrid-workbook-tabs button:hover{
  color:#d8e8df;

  background:#092118;
}

.qgrid-workbook-tabs button.active{
  color:#effaf4;

  border-color:
    rgba(84,240,165,.40);

  background:
    linear-gradient(
      180deg,
      rgba(16,66,45,.86),
      rgba(8,35,24,.96)
    );

  box-shadow:
    inset 0 2px 0 var(--grid-green);
}

.qgrid-workbook-tabs button.active span{
  color:var(--grid-green);
}

.qgrid-workbook-tabs button b{
  margin-left:3px;

  color:#6d8d7e;

  font-size:13px;
  font-weight:400;
}

.qgrid-workbook-tabs .qgrid-add-view{
  width:40px;
  min-width:40px;

  justify-content:center;

  padding:0;

  font-size:18px;
}


/* =========================================================
   MAIN WORKSPACE
   ========================================================= */

.qgrid-workspace{
  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    300px;

  gap:12px;

  padding:
    0 14px 10px;

  background:
    linear-gradient(
      180deg,
      #04110b,
      #030d09
    );
}

.qgrid-editor{
  min-width:0;
  min-height:0;

  display:grid;

  grid-template-rows:
    39px
    45px
    40px
    minmax(0,1fr)
    38px;

  overflow:hidden;

  border:
    1px solid var(--grid-line);

  border-radius:
    0 9px 9px 9px;

  background:#06150e;

  box-shadow:
    var(--grid-shadow);
}


/* =========================================================
   MENU
   ========================================================= */

.qgrid-menu{
  display:flex;
  align-items:center;
  gap:2px;

  padding:0 8px;

  border-bottom:
    1px solid var(--grid-line-soft);

  background:
    linear-gradient(
      180deg,
      #081d14,
      #071910
    );
}

.qgrid-menu button{
  height:29px;

  padding:0 10px;

  border:0;
  border-radius:5px;

  color:#b3c8bd;

  background:transparent;

  font-size:10px;
  font-weight:550;

  cursor:pointer;
}

.qgrid-menu button:hover{
  color:white;
  background:#0c2a1d;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.qgrid-toolbar{
  display:flex;
  align-items:center;
  gap:3px;

  padding:0 8px;

  overflow:hidden;

  border-bottom:
    1px solid var(--grid-line);

  background:
    linear-gradient(
      180deg,
      #081d14,
      #071a12
    );
}

.qgrid-icon-button,
.qgrid-tool-select,
.qgrid-tool-chip{
  height:30px;

  border:
    1px solid transparent;

  border-radius:5px;

  color:#c1d3ca;

  background:transparent;

  cursor:pointer;

  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease;
}

.qgrid-icon-button{
  width:31px;
  min-width:31px;

  display:grid;
  place-items:center;

  padding:0;

  font-size:13px;
}

.qgrid-icon-button:hover,
.qgrid-tool-select:hover,
.qgrid-tool-chip:hover{
  border-color:var(--grid-line);

  color:#fff;

  background:#0b291d;
}

.qgrid-icon-button.strong{
  font-weight:900;
}

.qgrid-icon-button.italic{
  font-family:Georgia,serif;
  font-style:italic;
}

.qgrid-icon-button.underline{
  text-decoration:underline;
}

.qgrid-tool-select{
  min-width:67px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:0 8px;

  font-size:9px;
}

.qgrid-tool-select.wide{
  min-width:96px;
}

.qgrid-tool-select.compact{
  min-width:50px;
}

.qgrid-tool-chip{
  width:31px;
  min-width:31px;

  padding:0;

  font-size:13px;
  font-weight:750;
}

.qgrid-tool-divider{
  width:1px;
  height:22px;

  margin:0 4px;

  flex:0 0 auto;

  background:var(--grid-line-soft);
}


/* =========================================================
   FORMULA BAR
   ========================================================= */

.qgrid-formula{
  display:grid;

  grid-template-columns:
    76px
    43px
    minmax(0,1fr);

  align-items:center;

  border-bottom:
    1px solid var(--grid-line);

  background:#06170f;
}

.qgrid-cell-address{
  height:30px;

  display:flex;
  align-items:center;

  margin-left:8px;
  padding:0 11px;

  border:
    1px solid var(--grid-line);

  border-radius:5px;

  color:#d6e5dd;
  background:#071d14;

  font-size:10px;
  font-weight:750;
}

.qgrid-fx{
  display:grid;
  place-items:center;

  color:var(--grid-green);

  font-family:Georgia,serif;
  font-size:16px;
  font-style:italic;
  font-weight:700;
}

.qgrid-formula input{
  width:calc(100% - 8px);
  height:30px;

  padding:0 11px;

  border:
    1px solid var(--grid-line);

  border-radius:5px;

  outline:0;

  color:#e1eee7;

  background:#061b12;

  font-family:
    Consolas,
    "SFMono-Regular",
    monospace;

  font-size:10px;
}

.qgrid-formula input:focus{
  border-color:
    rgba(84,240,165,.45);
}


/* =========================================================
   SHEET STAGE
   ========================================================= */

.qgrid-sheet-stage{
  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    285px;

  overflow:hidden;

  background:#06140e;
}

.qgrid-sheet-scroll{
  min-width:0;
  min-height:0;

  overflow:auto;

  scrollbar-width:thin;
  scrollbar-color:
    #315847
    #07170f;
}

.qgrid-sheet-scroll::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.qgrid-sheet-scroll::-webkit-scrollbar-track{
  background:#07170f;
}

.qgrid-sheet-scroll::-webkit-scrollbar-thumb{
  border-radius:10px;
  background:#315847;
}


/* =========================================================
   SHEET
   ========================================================= */

.qgrid-sheet{
  width:max-content;
  min-width:100%;

  border-collapse:collapse;
  table-layout:fixed;

  background:#06150f;

  font-size:10px;
}

.qgrid-sheet th,
.qgrid-sheet td{
  height:29px;

  min-width:128px;
  max-width:128px;

  padding:0 11px;

  border-right:
    1px solid var(--grid-line-soft);

  border-bottom:
    1px solid var(--grid-line-soft);

  overflow:hidden;

  color:#c9dad1;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.qgrid-sheet thead th{
  position:sticky;
  top:0;
  z-index:4;

  height:27px;

  color:#789789;

  background:#081c14;

  text-align:center;

  font-size:9px;
  font-weight:650;
}

.qgrid-sheet .qgrid-corner{
  left:0;
  z-index:7;

  width:42px;
  min-width:42px;
  max-width:42px;

  background:#071a12;
}

.qgrid-sheet tbody th{
  position:sticky;
  left:0;
  z-index:3;

  width:42px;
  min-width:42px;
  max-width:42px;

  padding:0;

  color:#607e70;

  background:#071a12;

  text-align:center;

  font-size:8px;
  font-weight:500;
}

.qgrid-sheet td{
  position:relative;

  outline:0;

  background:
    rgba(5,22,15,.94);

  cursor:cell;
}

.qgrid-sheet tr:nth-child(even) td{
  background:
    rgba(6,24,16,.94);
}

.qgrid-sheet td:hover{
  background:#0a2419;
}

.qgrid-sheet td.selected{
  z-index:2;

  overflow:visible;

  background:
    rgba(15,57,40,.82);

  box-shadow:
    inset 0 0 0 2px
    var(--grid-green);
}

.qgrid-sheet td.selected::after{
  content:"";

  position:absolute;
  right:-3px;
  bottom:-3px;

  width:6px;
  height:6px;

  border:
    1px solid #03150e;

  background:var(--grid-green);
}

.qgrid-sheet td.grid-heading{
  color:#d8e8df;

  background:
    linear-gradient(
      180deg,
      rgba(10,61,40,.92),
      rgba(7,46,31,.92)
    );

  font-size:9px;
  font-weight:800;

  letter-spacing:.25px;
}

.qgrid-sheet td.grid-money{
  color:#f6fff9;
  font-weight:750;
}

.qgrid-sheet td.grid-positive{
  color:var(--grid-green);
  font-weight:750;
}

.qgrid-sheet td.grid-negative{
  color:var(--grid-red);
  font-weight:750;
}

.qgrid-sheet td[contenteditable="true"]{
  overflow:visible;

  color:#fff;

  background:#0b2a1d;

  box-shadow:
    inset 0 0 0 2px
    var(--grid-green);
}


/* =========================================================
   INSIGHT CARDS
   ========================================================= */

.qgrid-insights{
  min-height:0;

  display:grid;

  grid-template-rows:
    repeat(3,minmax(0,1fr));

  gap:9px;

  padding:9px;

  overflow:auto;

  border-left:
    1px solid var(--grid-line);

  background:
    linear-gradient(
      180deg,
      #06170f,
      #05120c
    );
}

.qgrid-chart-card{
  min-height:120px;

  display:grid;

  grid-template-rows:
    auto
    minmax(55px,1fr)
    auto;

  padding:13px;

  border:
    1px solid var(--grid-line);

  border-radius:9px;

  background:
    radial-gradient(
      circle at 90% 0,
      rgba(84,240,165,.06),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #092119,
      #071a12
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.018);
}

.qgrid-chart-card header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.qgrid-chart-card header strong{
  color:#edf7f1;

  font-size:10px;
  font-weight:750;
}

.qgrid-chart-card header span{
  font-size:10px;
  font-weight:800;
}

.qgrid-chart-card .positive{
  color:var(--grid-green);
}

.qgrid-chart-card .negative{
  color:var(--grid-red);
}

.qgrid-bar-chart{
  height:74px;

  display:flex;
  align-items:flex-end;
  gap:7px;

  margin-top:10px;
  padding:
    7px 4px 0;

  border-bottom:
    1px solid var(--grid-line-soft);

  background:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 22px,
      rgba(38,83,61,.18) 23px
    );
}

.qgrid-bar-chart div{
  height:var(--v);

  flex:1;

  min-width:5px;

  border-radius:
    2px 2px 0 0;

  background:
    linear-gradient(
      180deg,
      #4af0a0,
      #1abf73
    );

  box-shadow:
    0 0 10px rgba(84,240,165,.12);
}

.qgrid-bar-chart.expenses div{
  background:
    linear-gradient(
      180deg,
      #ff6974,
      #d84755
    );

  box-shadow:
    0 0 10px rgba(255,101,112,.10);
}

.qgrid-chart-months{
  display:grid;

  grid-template-columns:
    repeat(9,1fr);

  gap:3px;

  padding-top:5px;

  color:#678476;

  font-size:7px;

  text-align:center;
}

.qgrid-margin-value{
  display:grid;

  color:#f2faf5 !important;

  text-align:right;

  font-size:17px !important;
}

.qgrid-margin-value small{
  margin-top:2px;

  color:var(--grid-green);

  font-size:8px;
}

.qgrid-line-preview{
  position:relative;

  height:76px;

  margin-top:10px;

  overflow:hidden;

  border-bottom:
    1px solid var(--grid-line-soft);

  background:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 18px,
      rgba(38,83,61,.17) 19px
    );
}

.qgrid-line-preview::before{
  content:"";

  position:absolute;
  left:5%;
  right:4%;
  top:48%;

  height:2px;

  transform:
    rotate(-11deg);

  transform-origin:center;

  background:
    linear-gradient(
      90deg,
      #22c77c,
      var(--grid-green)
    );

  box-shadow:
    0 0 12px
    rgba(84,240,165,.18);
}

.qgrid-line-preview span{
  position:absolute;

  left:var(--x);
  top:var(--y);

  width:7px;
  height:7px;

  transform:
    translate(-50%,-50%);

  border:
    1px solid #b6f9d6;

  border-radius:50%;

  background:
    var(--grid-green);

  box-shadow:
    0 0 8px
    rgba(84,240,165,.30);
}


/* =========================================================
   SHEET TABS
   ========================================================= */

.qgrid-sheet-tabs{
  display:flex;
  align-items:center;

  padding:0 8px;

  overflow:hidden;

  border-top:
    1px solid var(--grid-line);

  background:#071a12;
}

.qgrid-sheet-tabs button{
  height:37px;

  padding:0 17px;

  border:0;
  border-bottom:
    2px solid transparent;

  color:#839f91;

  background:transparent;

  font-size:9px;
  font-weight:650;

  cursor:pointer;
}

.qgrid-sheet-tabs button:hover{
  color:#d8e8df;

  background:#092119;
}

.qgrid-sheet-tabs button.active{
  color:var(--grid-green);

  border-bottom-color:
    var(--grid-green);

  background:
    rgba(84,240,165,.06);
}

.qgrid-sheet-tabs .qgrid-sheet-add{
  width:38px;

  padding:0;

  font-size:16px;
}


/* =========================================================
   BUSINESS DATA PANEL
   ========================================================= */

.qgrid-business-panel{
  min-width:0;
  min-height:0;

  padding:16px;

  overflow:auto;

  border:
    1px solid var(--grid-line);

  border-radius:9px;

  background:
    radial-gradient(
      circle at 80% 0,
      rgba(84,240,165,.06),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #071c13,
      #06150f
    );

  box-shadow:
    var(--grid-shadow);

  scrollbar-width:thin;
  scrollbar-color:
    #315847
    transparent;
}

.qgrid-business-panel.closed{
  display:none;
}

.qgrid-workspace:has(
  .qgrid-business-panel.closed
){
  grid-template-columns:
    minmax(0,1fr);
}

.qgrid-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.qgrid-panel-head span,
.qgrid-formula-head>span{
  color:var(--grid-green);

  font-size:8px;
  font-weight:900;

  letter-spacing:2px;
}

.qgrid-panel-head h2{
  margin:7px 0 0;

  color:#f5fbf7;

  font-size:17px;
  font-weight:750;

  letter-spacing:-.25px;
}

.qgrid-panel-head button{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid var(--grid-line);

  border-radius:6px;

  color:#86a295;

  background:#081f16;

  font-size:14px;

  cursor:pointer;
}

.qgrid-panel-head button:hover{
  color:#fff;

  border-color:#2c7251;

  background:#0b291d;
}

.qgrid-panel-intro{
  margin:11px 0 14px;

  color:#789789;

  font-size:9px;
  line-height:1.55;
}

.qgrid-data-search{
  height:35px;

  display:grid;

  grid-template-columns:
    29px
    minmax(0,1fr);

  align-items:center;

  margin-bottom:12px;

  border:
    1px solid var(--grid-line);

  border-radius:7px;

  background:#061810;
}

.qgrid-data-search span{
  display:grid;
  place-items:center;

  color:#88a497;
}

.qgrid-data-search input{
  width:100%;
  height:100%;

  border:0;
  outline:0;

  color:#e3eee8;
  background:transparent;

  font-size:9px;
}

.qgrid-data-search input::placeholder{
  color:#658376;
}

.qgrid-data-list{
  display:grid;
  gap:6px;
}

.qgrid-data-list button{
  min-height:49px;

  display:grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    auto;

  align-items:center;
  gap:9px;

  padding:7px 9px;

  border:
    1px solid var(--grid-line-soft);

  border-radius:8px;

  color:var(--grid-text);

  background:
    linear-gradient(
      180deg,
      #092118,
      #081d14
    );

  text-align:left;

  cursor:pointer;

  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease;
}

.qgrid-data-list button:hover{
  transform:
    translateX(2px);

  border-color:#28704f;

  background:#0b281c;
}

.qgrid-source-icon{
  width:31px;
  height:31px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(84,240,165,.25);

  border-radius:8px;

  color:var(--grid-green);

  background:
    rgba(84,240,165,.07);

  font-size:13px;
}

.qgrid-data-list button>
span:nth-child(2){
  min-width:0;

  display:grid;
  gap:3px;
}

.qgrid-data-list strong{
  color:#eaf5ef;

  font-size:9px;
  font-weight:750;
}

.qgrid-data-list small{
  color:#6f8e80;

  font-size:8px;
}

.qgrid-data-list b{
  color:#79988a;

  font-size:16px;
  font-weight:400;
}

.qgrid-data-list em{
  padding:3px 6px;

  border:
    1px solid rgba(84,240,165,.45);

  border-radius:5px;

  color:var(--grid-green);

  background:
    rgba(84,240,165,.05);

  font-size:7px;
  font-style:normal;
  font-weight:900;

  letter-spacing:.7px;
}


/* =========================================================
   FORMULA LIBRARY
   ========================================================= */

.qgrid-formula-library{
  margin-top:17px;
  padding-top:15px;

  border-top:
    1px solid var(--grid-line);
}

.qgrid-formula-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  margin-bottom:9px;
}

.qgrid-formula-head button{
  padding:0;

  border:0;

  color:var(--grid-green);
  background:transparent;

  font-size:8px;
  font-weight:750;

  cursor:pointer;
}

.qgrid-formula-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:6px;
}

.qgrid-formula-grid button{
  min-width:0;

  display:grid;
  gap:4px;

  padding:9px;

  border:
    1px solid var(--grid-line-soft);

  border-radius:7px;

  color:#fff;

  background:#082017;

  text-align:left;

  cursor:pointer;
}

.qgrid-formula-grid button:hover{
  border-color:#28704f;

  background:#0b281c;
}

.qgrid-formula-grid code{
  overflow:hidden;

  color:#c3f9dc;

  font-size:8px;
  font-weight:750;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.qgrid-formula-grid small{
  color:#6f8d80;

  font-size:7px;
}


/* =========================================================
   ASK GRID
   ========================================================= */

.qgrid-analysis{
  display:grid;

  grid-template-columns:
    43px
    220px
    minmax(220px,1fr)
    auto;

  align-items:center;
  gap:11px;

  padding:9px 22px;

  border-top:
    1px solid var(--grid-line);

  background:
    linear-gradient(
      180deg,
      #061910,
      #05130d
    );

  box-shadow:
    0 -12px 35px
    rgba(0,0,0,.16);
}

.qgrid-ask-icon{
  width:41px;
  height:41px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(84,240,165,.52);

  border-radius:11px;

  color:var(--grid-green);

  background:
    radial-gradient(
      circle,
      rgba(84,240,165,.13),
      rgba(84,240,165,.04)
    );

  box-shadow:
    0 0 25px
    rgba(84,240,165,.08);

  font-size:17px;
}

.qgrid-ask-copy{
  display:grid;
  gap:3px;
}

.qgrid-ask-copy strong{
  color:#f5fbf7;

  font-size:13px;
  font-weight:750;
}

.qgrid-ask-copy span{
  color:#718f81;

  font-size:8px;
}

.qgrid-ask-field{
  height:38px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    38px;

  align-items:center;

  overflow:hidden;

  border:
    1px solid var(--grid-line);

  border-radius:8px;

  background:#06160f;
}

.qgrid-ask-field:focus-within{
  border-color:
    rgba(84,240,165,.45);

  box-shadow:
    0 0 0 3px
    rgba(84,240,165,.04);
}

.qgrid-ask-field input{
  width:100%;
  height:100%;

  padding:0 12px;

  border:0;
  outline:0;

  color:#e5f0ea;
  background:transparent;

  font-size:9px;
}

.qgrid-ask-field input::placeholder{
  color:#668578;
}

.qgrid-ask-send{
  height:26px;

  margin-right:5px;

  border:0;
  border-left:
    1px solid var(--grid-line);

  color:#8caa9b;
  background:transparent;

  font-size:15px;

  cursor:pointer;
}

.qgrid-ask-send:hover{
  color:var(--grid-green);
}

.qgrid-analyze-button{
  height:41px;

  display:flex;
  align-items:center;
  gap:7px;

  padding:0 18px;

  border:
    1px solid var(--grid-green);

  border-radius:8px;

  color:#032016;

  background:
    linear-gradient(
      180deg,
      #62f5ad,
      #40e99a
    );

  box-shadow:
    0 9px 28px
    rgba(84,240,165,.14);

  font-size:10px;
  font-weight:850;

  cursor:pointer;

  transition:
    transform .14s ease,
    box-shadow .14s ease;
}

.qgrid-analyze-button:hover{
  transform:translateY(-1px);

  box-shadow:
    0 12px 32px
    rgba(84,240,165,.22);
}


/* =========================================================
   STATUS BAR
   ========================================================= */

.qgrid-statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 18px;

  border-top:
    1px solid var(--grid-line-soft);

  color:#5d7a6d;

  background:#04100b;

  font-size:8px;
}

.qgrid-statusbar b{
  margin-left:6px;

  padding:2px 6px;

  border:
    1px solid rgba(84,240,165,.38);

  border-radius:8px;

  color:var(--grid-green);

  background:
    rgba(84,240,165,.05);

  font-size:7px;
  letter-spacing:1px;
}


/* =========================================================
   RESPONSIVE BUSINESS DATA TOGGLE
   ========================================================= */

.qgrid-floating-data{
  display:none;

  position:fixed;
  right:18px;
  bottom:105px;
  z-index:50;

  height:34px;

  padding:0 11px;

  border:
    1px solid rgba(84,240,165,.45);

  border-radius:7px;

  color:var(--grid-green);

  background:#09251a;

  font-size:9px;
  font-weight:800;

  cursor:pointer;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.3);
}


/* =========================================================
   SMALLER DESKTOPS
   ========================================================= */

@media(max-width:1350px){

  .qgrid-topbar{
    grid-template-columns:
      150px
      minmax(220px,1fr)
      auto;
  }

  .qgrid-account{
    display:none;
  }

  .qgrid-workspace{
    grid-template-columns:
      minmax(0,1fr)
      270px;
  }

  .qgrid-sheet-stage{
    grid-template-columns:
      minmax(0,1fr)
      245px;
  }

  .qgrid-analysis{
    grid-template-columns:
      43px
      170px
      minmax(180px,1fr)
      auto;
  }

}


@media(max-width:1120px){

  .qgrid-top-actions .ghost{
    display:none;
  }

  .qgrid-workspace{
    grid-template-columns:
      minmax(0,1fr);
  }

  .qgrid-business-panel{
    position:fixed;

    top:115px;
    right:14px;
    bottom:103px;

    z-index:40;

    width:290px;

    box-shadow:
      -18px 0 50px
      rgba(0,0,0,.42);
  }

  .qgrid-business-panel.closed{
    display:none;
  }

  .qgrid-floating-data{
    display:block;
  }

}


@media(max-width:980px){

  .qgrid-app{
    min-width:760px;
  }

  .qgrid-insights{
    display:none;
  }

  .qgrid-sheet-stage{
    grid-template-columns:
      minmax(0,1fr);
  }

  .qgrid-analysis{
    grid-template-columns:
      43px
      minmax(180px,1fr)
      auto;
  }

  .qgrid-ask-copy{
    display:none;
  }

}
/* =========================================================
   QUOTRYN GRID 3.0G.3B LAUNCH READABILITY
   ========================================================= */

/*
   Launch-beta accessibility/readability pass.

   Keep the premium dark appearance while making Grid
   comfortable to read and edit for long sessions.
*/

body.grid-body{
  --grid-text:#f2faf6;
  --grid-text-soft:#c4d7cd;
  --grid-text-muted:#9eb7aa;
}


/* ---------------------------------------------------------
   GENERAL READABILITY
   --------------------------------------------------------- */

.qgrid-app{
  font-size:14px;
}

.qgrid-menubar,
.qgrid-toolbar,
.qgrid-workbook-tabs,
.qgrid-sheet-tabs{
  color:#dcebe3;
}

.qgrid-menubar button,
.qgrid-toolbar button,
.qgrid-workbook-tabs button,
.qgrid-sheet-tabs button{
  color:#dcebe3;
  font-size:13px;
}

.qgrid-toolbar select,
.qgrid-toolbar input{
  color:#eef8f2;
  font-size:13px;
}

.qgrid-topbar input,
.qgrid-formula input,
.qgrid-analysis input,
.qgrid-business-panel input{
  color:#f1faf5;
}

.qgrid-topbar input::placeholder,
.qgrid-formula input::placeholder,
.qgrid-analysis input::placeholder,
.qgrid-business-panel input::placeholder{
  color:#91aa9d;
  opacity:1;
}


/* ---------------------------------------------------------
   SPREADSHEET
   --------------------------------------------------------- */

.qgrid-sheet{
  font-size:14px;
}

.qgrid-sheet th,
.qgrid-sheet td{
  box-sizing:border-box;
}

.qgrid-sheet thead th{
  height:32px;
  min-height:32px;

  color:#b9cec3;

  font-size:12px;
  font-weight:700;

  line-height:32px;

  vertical-align:middle;
}

.qgrid-sheet tbody th{
  height:36px;
  min-height:36px;

  color:#8fa99c;

  font-size:11px;
  font-weight:600;

  line-height:36px;

  vertical-align:middle;
}

.qgrid-sheet td{
  height:36px;
  min-height:36px;

  padding:0 12px;

  color:#edf8f2;

  font-size:14px;
  font-weight:500;

  line-height:35px;

  vertical-align:middle;

  white-space:nowrap;

  overflow:hidden;
  text-overflow:ellipsis;

  cursor:cell;
}


/*
   Selected is navigation state.
   Editing is intentionally visually different.
*/

.qgrid-sheet td.selected{
  position:relative;

  box-shadow:
    inset 0 0 0 2px
    rgba(84,240,165,.92);

  background:
    rgba(84,240,165,.045);
}

.qgrid-sheet td.grid-editing,
.qgrid-sheet td[contenteditable="true"]{
  overflow:visible;

  text-overflow:clip;

  white-space:pre;

  color:#ffffff;

  background:#0a2a1d;

  box-shadow:
    inset 0 0 0 2px #54f0a5,
    inset 0 0 18px
    rgba(84,240,165,.06);

  outline:none;

  caret-color:#ffffff;

  /*
     Matching line-height to cell height centers both
     normal text and the browser editing caret.
  */
  line-height:35px;
}


/* Starter/business data should remain easy to scan. */

.qgrid-sheet td.metric-label,
.qgrid-sheet td.section-label,
.qgrid-sheet td.label{
  color:#f2faf6;
  font-weight:650;
}

.qgrid-sheet td.positive{
  color:#62f3ae;
  font-weight:700;
}

.qgrid-sheet td.negative{
  color:#ff7481;
  font-weight:700;
}


/* ---------------------------------------------------------
   FORMULA BAR
   --------------------------------------------------------- */

.qgrid-formula{
  min-height:42px;
}

.qgrid-formula input{
  height:32px;

  color:#f4fbf7;

  font-size:14px;

  line-height:32px;
}

#gridCellAddress{
  color:#e8f5ee;

  font-size:13px;
  font-weight:700;
}


/* ---------------------------------------------------------
   BUSINESS DATA PANEL
   --------------------------------------------------------- */

.qgrid-business-panel{
  color:#edf7f2;
}

.qgrid-business-panel h2,
.qgrid-business-panel h3,
.qgrid-business-panel strong{
  color:#f5fcf8;
}

.qgrid-business-panel p,
.qgrid-business-panel small{
  color:#aec4b8;
  font-size:12px;
  line-height:1.5;
}

.qgrid-data-source{
  color:#eef8f3;
}

.qgrid-data-source small{
  color:#a8c0b4;
}


/* ---------------------------------------------------------
   INSIGHTS / CARDS
   --------------------------------------------------------- */

.qgrid-insight-card{
  color:#eff9f4;
}

.qgrid-insight-card strong{
  color:#f7fcf9;
}

.qgrid-insight-card small{
  color:#a9c1b5;
}


/* ---------------------------------------------------------
   ASK GRID
   --------------------------------------------------------- */

.qgrid-analysis{
  color:#eef8f3;
}

.qgrid-analysis input{
  font-size:13px;
}

.qgrid-analysis small{
  color:#a9c0b5;
}


/* ---------------------------------------------------------
   STATUS BAR
   --------------------------------------------------------- */

#gridStatus{
  color:#b9d0c4;

  font-size:11px;
  font-weight:600;
}


/* ---------------------------------------------------------
   WORKBOOK HYDRATION
   --------------------------------------------------------- */

/*
   buildSheet() creates the structure immediately, while
   loadWorkbook() retrieves saved state asynchronously.

   During that tiny hydration window we keep the sheet
   structure visible but hide cell contents, preventing
   saved values from appearing to vanish and then pop back.
*/

body.grid-loading .qgrid-sheet td{
  color:transparent !important;

  text-shadow:none !important;

  transition:none !important;
}

body.grid-loading .qgrid-sheet td::selection{
  background:transparent;
}


/*
   Once hydration completes, reveal workbook content gently.
*/

body:not(.grid-loading) .qgrid-sheet td{
  transition:
    background-color .08s ease,
    box-shadow .08s ease,
    color .08s ease;
}


/* ---------------------------------------------------------
   HIGH-DPI / LARGE DESKTOP READABILITY
   --------------------------------------------------------- */

@media (min-width:1400px){

  .qgrid-sheet td{
    font-size:14px;
  }

  .qgrid-menubar button,
  .qgrid-toolbar button{
    font-size:13px;
  }

  .qgrid-business-panel{
    font-size:13px;
  }
}


/* QUOTRYN_GRID_BACK_BUTTON_STYLES_3_0G_5 */

.qgrid-command-back{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:38px;
  padding:0 13px;

  border:1px solid rgba(76,235,167,.24);
  border-radius:9px;

  background:rgba(8,39,27,.76);
  color:#dfffee;

  text-decoration:none;
  white-space:nowrap;

  font-size:12px;
  font-weight:700;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.qgrid-command-back:hover{
  background:rgba(15,67,45,.92);
  border-color:rgba(76,235,167,.52);
  color:#ffffff;
}

.qgrid-command-back:active{
  transform:translateY(1px);
}

.qgrid-command-back > span{
  color:#4ceba7;
  font-size:17px;
  line-height:1;
}

@media (max-width:900px){
  .qgrid-command-back strong{
    display:none;
  }

  .qgrid-command-back{
    width:38px;
    padding:0;
  }
}


/* QUOTRYN_GRID_TOPBAR_REPAIR_3_0G_5B */

/*
   Grid now has:
   1. Command Center back control
   2. Quotryn Grid brand
   3. Search
   4. Actions
   5. Account

   Give every section its own column.
*/

.qgrid-topbar{
  grid-template-columns:
    auto
    170px
    minmax(260px,600px)
    1fr
    auto;
  gap:14px;
}

.qgrid-command-back{
  justify-self:start;
}

.qgrid-brand{
  justify-self:start;
}

.qgrid-global-search{
  min-width:0;
}

.qgrid-actions{
  min-width:0;
}

.qgrid-account{
  min-width:185px;
}

/*
   Smaller desktop layout:
   hide account as before, but keep the
   back button and brand in separate columns.
*/

@media(max-width:1350px){
  .qgrid-topbar{
    grid-template-columns:
      auto
      150px
      minmax(220px,1fr)
      auto;
    gap:10px;
  }

  .qgrid-account{
    display:none;
  }
}

@media(max-width:1050px){
  .qgrid-command-back strong{
    display:none;
  }

  .qgrid-command-back{
    width:38px;
    padding:0;
  }

  .qgrid-topbar{
    grid-template-columns:
      38px
      145px
      minmax(180px,1fr)
      auto;
  }
}
/* QUOTRYN_GRID_ACCOUNT_FINAL_FIX_3_0G_5C */

/*
 * Final Grid topbar ownership.
 *
 * Back | Brand | Search | Actions | Account
 *
 * Explicit grid-column assignments prevent the account
 * from ever participating in workbook-tab positioning.
 */

.qgrid-topbar{
  grid-template-columns:
    max-content
    170px
    minmax(260px,600px)
    minmax(0,1fr)
    max-content;
}

.qgrid-command-back{
  grid-column:1;
  grid-row:1;
}

.qgrid-brand{
  grid-column:2;
  grid-row:1;
}

.qgrid-global-search{
  grid-column:3;
  grid-row:1;
}

.qgrid-actions{
  grid-column:4;
  grid-row:1;

  justify-self:end;
}

.qgrid-account{
  grid-column:5;
  grid-row:1;

  position:relative;
  inset:auto;

  justify-self:end;
  align-self:center;

  margin:0;
  transform:none;

  min-width:185px;
}

/*
 * Workbook tabs are their own row below the topbar.
 * Account styling must never escape into this region.
 */

.qgrid-workbook-tabs{
  position:relative;
  z-index:15;
}

@media(max-width:1350px){

  .qgrid-topbar{
    grid-template-columns:
      max-content
      150px
      minmax(220px,1fr)
      max-content;
  }

  .qgrid-command-back{
    grid-column:1;
  }

  .qgrid-brand{
    grid-column:2;
  }

  .qgrid-global-search{
    grid-column:3;
  }

  .qgrid-actions{
    grid-column:4;
  }

  .qgrid-account{
    display:none;
  }
}

@media(max-width:1050px){

  .qgrid-topbar{
    grid-template-columns:
      38px
      145px
      minmax(180px,1fr)
      max-content;
  }
}


/* QUOTRYN_GRID_TOPBAR_CLEAN_3_0G_5D */

/*
 * Grid Beta topbar has exactly four structural regions:
 *
 * Back | Brand | Search | Actions
 *
 * The previous duplicate account region has been removed
 * from Grid HTML completely.
 */

.qgrid-topbar{
  grid-template-columns:
    max-content
    170px
    minmax(260px,600px)
    minmax(0,1fr) !important;

  align-items:center;
}

.qgrid-command-back{
  grid-column:1 !important;
  grid-row:1 !important;
}

.qgrid-brand{
  grid-column:2 !important;
  grid-row:1 !important;
}

.qgrid-global-search{
  grid-column:3 !important;
  grid-row:1 !important;
}

.qgrid-actions{
  grid-column:4 !important;
  grid-row:1 !important;

  justify-self:end;
}

/*
 * Defensive cleanup in case stale HTML is served
 * briefly by an old browser cache.
 */
.qgrid-account{
  display:none !important;
}

/*
 * Workbook tabs remain a completely separate row.
 */
.qgrid-workbook-tabs{
  position:relative;
  z-index:15;
  clear:both;
}

@media(max-width:1350px){

  .qgrid-topbar{
    grid-template-columns:
      max-content
      150px
      minmax(220px,1fr)
      max-content !important;
  }

}

@media(max-width:1050px){

  .qgrid-topbar{
    grid-template-columns:
      38px
      145px
      minmax(180px,1fr)
      max-content !important;
  }

}