/* ===== PixelTrade — Stardew-style AI trading agent dashboard ===== */

:root{
  /* wood */
  --wood-darkest:#2e1c0f;
  --wood-dark:#4a2d18;
  --wood:#6e4326;
  --wood-light:#8a5a36;
  /* frames */
  --frame:#b9763e;
  --frame-light:#e0a766;
  /* parchment / menu */
  --parch:#f3e2b4;
  --parch-2:#e7cd92;
  --parch-3:#d8b772;
  --parch-line:#c6a25e;
  --ink:#43301c;
  --ink-soft:#6b5235;
  /* greens */
  --green:#4f8a4e;
  --green-dark:#356b3a;
  --green-deep:#1f4a2c;
  /* screen */
  --screen-bg:#0e2118;
  --screen:#6fe08c;
  --screen-dim:#3f8a59;
  /* accents */
  --gold:#e7b53c;
  --gold-dark:#b9871f;
  --red:#d9544d;
  --up:#57c06a;
  --down:#df5b53;
  --sky:#7ec8e8;

  --px:4px; /* base pixel unit */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Pixelify Sans',sans-serif;
  background:#1a1009;
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
}
img{image-rendering:pixelated}

/* scrollbars */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--parch-3)}
::-webkit-scrollbar-thumb{background:var(--wood);border:3px solid var(--parch-3)}

#root{height:100vh;width:100vw}

/* ============ App shell ============ */
.app{
  height:100vh;width:100vw;display:flex;
  background:
    repeating-linear-gradient(45deg,#1c130a 0 8px,#180f08 8px 16px);
  padding:14px;gap:14px;
}

/* ============ Pixel frame helper ============ */
.frame{
  position:relative;
  background:var(--parch);
  border:var(--px) solid var(--wood-darkest);
  box-shadow:
    inset 0 0 0 var(--px) var(--frame-light),
    inset 0 0 0 calc(var(--px)*2) var(--wood),
    inset 0 0 0 calc(var(--px)*3) var(--parch),
    0 6px 0 rgba(0,0,0,.35);
}
.frame.wood{ background:var(--wood); }
.frame.green{ background:var(--green-deep); }

/* ============ Sidebar ============ */
.sidebar{
  width:300px;flex:0 0 300px;display:flex;flex-direction:column;gap:12px;
  min-height:0;
}
.side-card{ padding:16px 18px; }
.side-card.tight{padding:13px 15px}

/* brand */
.brand{display:flex;align-items:center;gap:11px}
.brand .ava{
  width:46px;height:46px;flex:0 0 46px;background:var(--screen-bg);
  border:var(--px) solid var(--wood-darkest);
  display:flex;align-items:center;justify-content:center;
}
.brand h1{font-size:20px;line-height:1;color:var(--ink);letter-spacing:.5px}
.brand .sub{font-family:'VT323',monospace;font-size:15px;color:var(--ink-soft);letter-spacing:1px;white-space:nowrap}
.status-dot{display:inline-block;width:9px;height:9px;background:var(--up);
  box-shadow:0 0 0 2px #2c5a33; margin-right:6px;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* nav */
.nav{display:flex;flex-direction:column;gap:7px}
.nav-btn{
  font-family:'Pixelify Sans';font-size:17px;color:var(--ink);
  display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:9px 11px;background:var(--parch-2);
  border:var(--px) solid var(--wood-dark);
  box-shadow:inset 0 0 0 2px var(--parch);
  transition:transform .05s;
  user-select:none;
}
.nav-btn:hover{background:var(--parch-3)}
.nav-btn:active{transform:translateY(2px)}
.nav-btn.active{background:var(--green);color:#fff;box-shadow:inset 0 0 0 2px var(--green-dark)}
.nav-btn .ico{width:22px;text-align:center;font-size:18px}
.nav-btn .badge{margin-left:auto;font-family:'VT323';font-size:14px;background:var(--gold);
  color:var(--wood-darkest);padding:0 6px;border:2px solid var(--gold-dark)}

/* section label */
.label{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:9px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.label::after{content:'';flex:1;height:3px;background:
  repeating-linear-gradient(90deg,var(--parch-line) 0 4px,transparent 4px 8px)}

/* stats */
.stats{display:flex;flex-direction:column;gap:9px;padding-right:6px}
.stat{display:flex;align-items:baseline;justify-content:space-between}
.stat .k{font-size:15px;color:var(--ink-soft)}
.stat .v{font-family:'VT323',monospace;font-size:24px;line-height:1;color:var(--ink);white-space:nowrap}
.stat .v.up{color:var(--green-dark)}
.stat .v.down{color:var(--red)}
.spark{width:100%;height:46px;display:block;margin-top:4px;
  background:var(--screen-bg);border:var(--px) solid var(--wood-darkest);image-rendering:pixelated}

/* team strip */
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.teammate{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:default}
.tm-face{position:relative;width:34px;height:34px;background:var(--screen-bg);
  border:3px solid var(--wood-dark);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.tm-face .sprite{margin-bottom:-2px}
.tm-dot{position:absolute;top:2px;right:2px;width:7px;height:7px;background:var(--ink-soft);
  box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.tm-dot.on{background:var(--up);animation:blink 1.4s steps(2) infinite}
.tm-dot.go{background:var(--gold)}
.tm-name{font-family:'VT323';font-size:13px;line-height:1;color:var(--ink)}

/* who-tag in log */
td .who, .notif .who{font-family:'VT323';font-weight:400}
.notif-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.notif-list{overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:7px;padding-right:4px}
.notif{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--parch-2);border:3px solid var(--parch-line);
  padding:7px 9px;animation:slidein .25s ease-out;
}
@keyframes slidein{from{transform:translateX(-10px)}}
.notif .ic{font-size:16px;line-height:1.1;flex:0 0 auto}
.notif > div{min-width:0}
.notif .tx{font-family:'VT323',monospace;font-size:16px;line-height:1.15;color:var(--ink)}
.notif .tm{font-family:'VT323';font-size:13px;color:var(--ink-soft);margin-top:4px}
.notif.up{border-color:#9ec79e;background:#e7f0d8}
.notif.down{border-color:#e0b1ad;background:#f4dedb}

/* ============ Main / room ============ */
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}

/* HUD bar */
.hud{display:flex;align-items:center;gap:12px;padding:9px 13px}
.hud .now{display:flex;align-items:center;gap:11px;flex:1;min-width:160px}
.hud .now .pin{width:30px;height:30px;flex:0 0 30px;background:var(--green);
  border:var(--px) solid var(--wood-darkest);display:flex;align-items:center;justify-content:center;font-size:17px}
.hud .now .txt{min-width:0}
.hud .now .lab{font-size:12px;letter-spacing:2px;color:var(--ink-soft);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .now .act{font-family:'VT323';font-size:21px;line-height:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{font-family:'VT323';font-size:21px;color:var(--ink);background:var(--parch-2);
  border:3px solid var(--parch-line);padding:4px 10px;white-space:nowrap}
.sign{display:flex;gap:0;border:var(--px) solid var(--wood-darkest)}
.sign span{font-family:'VT323';font-size:16px;letter-spacing:1px;background:var(--screen-bg);
  color:var(--screen);padding:5px 9px;border-right:2px solid #06120c;text-shadow:0 0 6px rgba(111,224,140,.6)}
.sign span:last-child{border-right:0}

/* controls */
.ctrl{display:flex;gap:7px;align-items:center}
.btn{
  font-family:'Pixelify Sans';font-size:16px;color:var(--ink);cursor:pointer;
  background:var(--parch-2);border:var(--px) solid var(--wood-dark);
  box-shadow:inset 0 0 0 2px var(--parch);padding:7px 12px;user-select:none;
  display:flex;align-items:center;gap:7px;
}
.btn:hover{background:var(--parch-3)}
.btn:active{transform:translateY(2px)}
.btn.gold{background:var(--gold);box-shadow:inset 0 0 0 2px #f3d375}
.btn.gold:hover{background:#f0c14d}
.btn.on{background:var(--green);color:#fff;box-shadow:inset 0 0 0 2px var(--green-dark)}

/* room stage */
.stage{
  flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;
  padding:8px;overflow:hidden;
}
.room{
  position:relative;height:100%;aspect-ratio:1536/1024;max-width:100%;
  background-size:cover;background-position:center;
  image-rendering:pixelated;
  border:var(--px) solid var(--wood-darkest);
  box-shadow:0 0 0 4px var(--frame),0 0 0 8px var(--wood-darkest),0 10px 0 rgba(0,0,0,.4);
}
.room.day-tint::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 60% 10%,transparent 40%,rgba(20,10,30,.28) 100%);
  mix-blend-mode:multiply}

/* station hotspot */
.station{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:5}
.station .ring{
  width:30px;height:30px;border:3px solid var(--gold);background:rgba(231,181,60,.16);
  box-shadow:0 0 0 2px rgba(0,0,0,.4),inset 0 0 8px rgba(231,181,60,.4);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.05);opacity:1}}
.station.busy .ring{border-color:var(--up);background:rgba(87,192,106,.22);box-shadow:0 0 0 2px rgba(0,0,0,.4),inset 0 0 10px rgba(87,192,106,.5)}
/* work zones: teal ring */
.station.work .ring{border-color:#5fd6c0;background:rgba(95,214,192,.16);
  box-shadow:0 0 0 2px rgba(0,0,0,.4),inset 0 0 8px rgba(95,214,192,.45)}
.station.work.busy .ring{border-color:var(--up);background:rgba(87,192,106,.26)}
/* always-on zone nameplate */
.zone-tag{position:absolute;bottom:122%;left:50%;transform:translateX(-50%);
  font-family:'VT323',monospace;font-size:13px;letter-spacing:1px;white-space:nowrap;color:var(--ink);
  background:rgba(245,231,191,.95);border:2px solid var(--wood-dark);padding:0 6px;
  box-shadow:0 2px 0 rgba(0,0,0,.3);pointer-events:none;transition:opacity .12s,transform .12s}
.station.busy .zone-tag{background:#dff0d6;border-color:#7fae7f;color:var(--green-dark)}
.station:hover .zone-tag{opacity:0}
.station .tip{
  position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  font-family:'VT323';font-size:15px;white-space:nowrap;color:var(--ink);
  background:var(--parch);border:3px solid var(--wood-dark);padding:2px 8px;
  opacity:0;transition:opacity .12s;pointer-events:none;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.station:hover .tip{opacity:1}
.station .spark{position:absolute;inset:auto;left:50%;top:-12px;transform:translateX(-50%);
  font-size:14px;animation:floatspark 1.6s ease-in-out infinite;background:none;border:0}

/* agent */
.agent{position:absolute;z-index:8;transform:translate(-50%,-100%);
  transition:none;will-change:left,top;pointer-events:none}
.agent .shadow{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:20px;height:7px;background:rgba(0,0,0,.32);border-radius:50%}
.agent .name-tag{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;
  font-family:'VT323',monospace;font-size:12px;line-height:1;white-space:nowrap;color:var(--ink);
  background:rgba(245,231,191,.92);border:2px solid var(--wood-dark);padding:0 4px;
  box-shadow:0 2px 0 rgba(0,0,0,.25);pointer-events:none}
.agent.walking .bobber{animation:bob .26s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.agent .bubble{
  position:absolute;bottom:108%;left:50%;transform:translateX(-50%);
  font-family:'VT323';font-size:16px;white-space:nowrap;color:var(--ink);
  background:var(--parch);border:3px solid var(--wood-dark);padding:3px 9px;
  box-shadow:0 3px 0 rgba(0,0,0,.3);animation:pop .2s ease-out;
}
.agent .bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--wood-dark)}
@keyframes pop{from{transform:translateX(-50%) scale(.6);opacity:0}}
@keyframes floatspark{0%,100%{transform:translateX(-50%) translateY(0);opacity:.6}50%{transform:translateX(-50%) translateY(-6px);opacity:1}}

/* sprite (box-shadow pixel art) */
.sprite{position:relative;width:1px;height:1px}
.sprite .px{position:absolute;left:0;top:0;width:var(--s);height:var(--s)}

/* ============ History view ============ */
.view-pane{flex:1;min-height:0;padding:18px;display:flex;flex-direction:column}
.view-pane h2{font-size:24px;color:var(--ink);margin-bottom:4px}
.view-pane .desc{font-family:'VT323';font-size:17px;color:var(--ink-soft);margin-bottom:14px}
.table{flex:1;min-height:0;overflow:auto}
table{width:100%;border-collapse:collapse;font-family:'VT323';font-size:17px}
th{position:sticky;top:0;background:var(--parch-3);color:var(--ink);text-align:left;
  padding:8px 10px;border-bottom:var(--px) solid var(--wood-dark);font-weight:400;letter-spacing:1px}
td{padding:7px 10px;border-bottom:2px solid var(--parch-line);color:var(--ink)}
tr:hover td{background:var(--parch-2)}
td.up{color:var(--green-dark)}
td.down{color:var(--red)}
.pill{display:inline-block;font-size:14px;padding:1px 8px;border:2px solid var(--wood-dark);
  background:var(--parch-2)}
.pill.buy{background:#e2efd5;border-color:#9ec79e;color:var(--green-dark)}
.pill.sell{background:#f4dedb;border-color:#e0b1ad;color:var(--red)}

/* ============ Analysis view ============ */
.analysis-view{overflow:hidden}
.analysis-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.analysis-count{
  color:var(--ink-soft);font-size:17px;background:var(--parch-2);
  border:3px solid var(--parch-line);padding:4px 10px;white-space:nowrap
}
.analysis-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:14px}
.analysis-left,.analysis-main{min-height:0;overflow:auto}
.analysis-left{display:flex;flex-direction:column;gap:12px;padding-right:4px}
.analysis-main{padding-right:4px}
.analysis-form{
  background:var(--parch-2);border:3px solid var(--parch-line);
  padding:12px;display:flex;flex-direction:column;gap:10px
}
.analysis-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}
.analysis-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.analysis-field span{
  font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--ink-soft)
}
.analysis-field input{
  width:100%;font-family:'VT323',monospace;font-size:24px;color:var(--screen);
  background:var(--screen-bg);border:var(--px) solid var(--wood-darkest);
  padding:5px 9px;outline:none;text-transform:uppercase
}
.analysis-field input:focus{box-shadow:0 0 0 3px rgba(111,224,140,.25)}
.analysis-run{height:42px;white-space:nowrap}
.analysis-error{
  font-family:'VT323',monospace;font-size:17px;color:var(--red);
  background:#f4dedb;border:2px solid #e0b1ad;padding:3px 8px
}
.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.scenario-btn{
  min-height:54px;text-align:left;cursor:pointer;font-family:'Pixelify Sans';
  color:var(--ink);background:var(--parch);border:3px solid var(--wood-dark);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);padding:7px
}
.scenario-btn:hover{background:var(--parch-3)}
.scenario-btn.on{background:var(--green);color:#fff;border-color:var(--green-dark)}
.scenario-btn span{display:block;font-size:14px;line-height:1.05}
.scenario-btn small{display:block;font-family:'VT323';font-size:14px;margin-top:4px;color:inherit;opacity:.82}
.analysis-session-list{display:flex;flex-direction:column;gap:7px}
.analysis-session{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;
  text-align:left;cursor:pointer;font-family:'Pixelify Sans';color:var(--ink);
  background:var(--parch-2);border:3px solid var(--parch-line);padding:8px 9px
}
.analysis-session:hover{background:var(--parch-3)}
.analysis-session.on{border-color:var(--green-dark);box-shadow:inset 0 0 0 2px var(--green)}
.analysis-session span{font-family:'VT323',monospace;font-size:23px;line-height:1}
.analysis-session small{grid-column:1/2;font-family:'VT323';font-size:15px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.analysis-empty,.analysis-placeholder{
  color:var(--ink-soft);font-size:18px;background:var(--parch-2);
  border:3px dashed var(--parch-line);padding:16px;text-align:center
}
.analysis-placeholder{min-height:160px;display:flex;align-items:center;justify-content:center}
.thesis-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:58px;
  font-family:'VT323',monospace;font-size:19px;line-height:1;color:#fff;
  border:3px solid rgba(0,0,0,.35);padding:3px 9px;white-space:nowrap
}
.thesis-badge.call{background:var(--green)}
.thesis-badge.put{background:var(--red)}
.thesis-badge.wait{background:var(--gold);color:var(--wood-darkest)}
.final-thesis{
  border:var(--px) solid var(--wood-darkest);background:var(--screen-bg);
  color:#d7ffe2;padding:14px;margin-bottom:14px;
  box-shadow:inset 0 0 0 3px rgba(111,224,140,.16)
}
.final-thesis.put{box-shadow:inset 0 0 0 3px rgba(223,91,83,.22)}
.final-thesis.wait{box-shadow:inset 0 0 0 3px rgba(231,181,60,.28)}
.final-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.final-head .label{color:#9bdbaa;margin-bottom:4px}
.final-head .label::after{background:repeating-linear-gradient(90deg,var(--screen-dim) 0 4px,transparent 4px 8px)}
.final-head h3{font-size:23px;line-height:1;color:var(--screen)}
.thesis-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:10px}
.thesis-stats div{background:rgba(111,224,140,.1);border:2px solid rgba(111,224,140,.25);padding:6px 8px;min-width:0}
.thesis-stats span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#9bdbaa}
.thesis-stats strong{display:block;font-family:'VT323';font-size:22px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.final-thesis p{font-family:'VT323';font-size:18px;line-height:1.2;margin-bottom:10px;color:#d7ffe2}
.thesis-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.thesis-columns h4{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--screen);margin-bottom:5px}
.thesis-columns ul,.agent-report ul{padding-left:18px}
.thesis-columns li,.agent-report li{font-family:'VT323';font-size:16px;line-height:1.15;margin-bottom:4px}
.agent-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.agent-report{
  background:var(--parch-2);border:3px solid var(--parch-line);padding:11px;
  min-width:0
}
.agent-report-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:7px}
.agent-dot{width:16px;height:16px;border:2px solid rgba(0,0,0,.35)}
.agent-title{font-size:18px;line-height:1;color:var(--ink)}
.agent-role{font-family:'VT323';font-size:15px;line-height:1.1;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-confidence{font-family:'VT323';font-size:20px;color:var(--green-dark);white-space:nowrap}
.stance{
  display:inline-block;font-family:'VT323';font-size:15px;line-height:1;
  border:2px solid var(--wood-dark);padding:2px 7px;margin-bottom:7px;background:var(--parch)
}
.stance.bullish{color:var(--green-dark);border-color:#9ec79e;background:#e2efd5}
.stance.bearish{color:var(--red);border-color:#e0b1ad;background:#f4dedb}
.stance.mixed,.stance.cautious,.stance.defensive,.stance.wait{color:var(--wood-darkest);border-color:var(--gold-dark);background:#f2d889}
.agent-report p{font-family:'VT323';font-size:17px;line-height:1.15;margin-bottom:7px;color:var(--ink)}
.handoff{
  margin-top:8px;color:var(--ink-soft);font-size:15px;border-top:2px solid var(--parch-line);
  padding-top:6px
}

/* settings */
.set-row{display:flex;align-items:center;justify-content:space-between;
  padding:12px 4px;border-bottom:2px solid var(--parch-line);max-width:520px}
.set-row .k{font-size:17px;color:var(--ink)}
.set-row .k small{display:block;font-family:'VT323';font-size:14px;color:var(--ink-soft);letter-spacing:.5px}
.toggle{width:54px;height:28px;background:var(--parch-3);border:var(--px) solid var(--wood-dark);
  cursor:pointer;position:relative}
.toggle .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--wood);
  transition:left .12s steps(3)}
.toggle.on{background:var(--green)}
.toggle.on .knob{left:28px;background:var(--parch)}
.seg{display:flex;border:var(--px) solid var(--wood-dark)}
.seg button{font-family:'VT323';font-size:17px;background:var(--parch-2);border:0;
  border-right:2px solid var(--wood-dark);padding:5px 13px;cursor:pointer;color:var(--ink)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--green);color:#fff}

/* room hint */
.room-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:15px;color:var(--parch);background:rgba(30,18,9,.7);
  border:3px solid var(--wood-dark);padding:3px 12px;z-index:9;pointer-events:none}

/* reduced motion */
.no-anim *{animation:none !important}

/* tiny helper */
.muted{color:var(--ink-soft)}
.mono{font-family:'VT323',monospace}

@media (max-width: 920px){
  body{overflow:auto}
  .app{min-height:100vh;height:auto;flex-direction:column;overflow:visible}
  .sidebar{width:100%;flex:0 0 auto}
  .analysis-layout{grid-template-columns:1fr}
  .agent-report-grid,.thesis-columns{grid-template-columns:1fr}
  .thesis-stats{grid-template-columns:1fr 1fr}
}