/*
 * paperonbot look. One file, no framework.
 *
 * Rules: no animation and no transition anywhere. The font is bundled, so the page needs no
 * outside request. Colors are variables on :root, each one light-dark(light, dark), so a color
 * is never written twice. Green means profit or buy, red means loss
 * or sell, gray is everything else.
 *
 * Order: variables, base elements, top bar and sidebar, chart, settings list, help dialog.
 */
@font-face{font-family:"Ubuntu";src:url("/fonts/ubuntu.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
/* Colors. Each one is light-dark(light, dark). color-scheme picks the side: the system setting
   by default, or the theme switch, which sets data-theme on the html element.
   --band is the gray zone fill and --bandline its outline. --used is the text of the Settings used fold. */
:root{color-scheme:light dark;
  --bg:light-dark(#f5f6f7,#111415);--card:light-dark(#fff,#191d1f);--line:light-dark(#e2e5e8,#2b3135);
  --text:light-dark(#1e2428,#e5e8ea);--mute:light-dark(#6a7379,#8a949a);--green:light-dark(#17803f,#46b877);
  --red:light-dark(#c23b2e,#e5655a);--mid:light-dark(#3d4650,#c3cad0);
  --band:light-dark(rgba(110,120,128,.22),rgba(150,160,168,.26));--bandline:light-dark(rgba(110,120,128,.32),rgba(170,180,188,.38));
  --used:light-dark(#1e2428,#fff);--shadow:0 1px 2px light-dark(rgba(0,0,0,.05),rgba(0,0,0,.3))}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
/* Base. hidden must always win, even over display rules set later. */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 "Ubuntu",system-ui,sans-serif;font-variant-numeric:tabular-nums}
/* Layout helpers. stack is a column of cards with a gap. card is the box used everywhere. */
.wrap{max-width:1100px;margin:0 auto;padding:12px}
.stack{display:grid;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:14px;min-width:0}
h1,h2,h3{margin:0 0 8px}
h1{font-size:1.25rem}
h2{font-size:1.05rem}
h2.gap{margin-top:18px}
code{font:inherit;font-weight:700;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 5px}
.mute{color:var(--mute)}
.small{font-size:.85rem}
.err{color:var(--red);margin:6px 0}
.pos{color:var(--green)}
.neg{color:var(--red)}
/* row is a wrapping line of controls. between pushes the two ends apart. */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.full{flex:1 0 100%;margin:0}
/* Status badge next to the coin name. The state class sets its color. */
.badge{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:6px;font-size:.8rem;color:var(--mute)}
.badge.running{color:var(--green);border-color:var(--green)}
.badge.halted{color:var(--red);border-color:var(--red)}
/* Row of stat cards. They wrap on a narrow screen. */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{display:flex;flex-direction:column;gap:2px}
.lbl{color:var(--mute);font-size:.85rem}
.big{font-size:1.3rem;font-weight:500}
/* Controls. primary is green, danger is red and on marks the chosen preset. */
button,input,select{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
button{cursor:pointer}
button:hover{border-color:var(--mute)}
button.primary{border-color:var(--green);color:var(--green)}
button.danger{border-color:var(--red);color:var(--red)}
button.on{border-color:var(--green);color:var(--green);box-shadow:0 0 0 1px var(--green);background:var(--bg);font-weight:700}
/* Top card: the coin and state on the left, Pause and Trading mode on the right. A thin line
   separates the groups. */
.modebox{display:inline-flex;gap:8px;align-items:center}
.topctl{gap:8px 28px}
.topctl .modebox{padding-left:28px;border-left:1px solid var(--line);min-height:34px}
/* Strategy page. The paragraph of the chosen strategy is in the text color, the others are gray. */
#strat_text{margin-top:14px}
#strat_text p{margin:0 0 12px;color:var(--mute)}
.title{display:flex;align-items:center}
.state{display:inline-flex;gap:8px;align-items:center;margin-left:20px;padding-left:20px;border-left:1px solid var(--line);min-height:30px}
.badge.paused{color:var(--red);border-color:var(--red)}
#strat_text p#strat_text strong{color:var(--text)}
#strategy{width:100%;max-width:340px}
/* The fold Settings used under the simulation controls. The arrow is a CSS triangle. It points
   right when closed and is turned 90 degrees to point down when open. */
.used{margin:4px 0 6px}
.used summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--used);font-weight:700}
.used summary::-webkit-details-marker{display:none}
.used summary::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--used)}
.used[open] summary::before{transform:rotate(90deg)}
.used p{margin:6px 0 0}
/* Row under the simulation that holds Hide simulation at the right. */
.simfoot{display:flex;justify-content:flex-end;margin-top:14px}
:focus-visible{outline:2px solid var(--green);outline-offset:1px}

/* switch */
.tgl{position:relative;display:inline-flex;gap:10px;align-items:center;cursor:pointer}
.tgl input{position:absolute;left:0;top:0;width:44px;height:24px;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.tgl .trk{position:relative;flex:none;width:44px;height:24px;border-radius:12px;border:1px solid var(--mute);background:var(--bg)}
.tgl .trk::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mute)}
.tgl input:checked + .trk{background:var(--green);border-color:var(--green)}
.tgl input:checked + .trk::after{left:23px;background:#fff}
.tgl input:focus-visible + .trk{outline:2px solid var(--green);outline-offset:2px}
.tgl .tst{min-width:2.2em;color:var(--mute);font-size:.85rem}

/* top bar and sidebar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.topbar .theme{margin-left:auto}
.brand{font-size:1.1rem;font-weight:700}
.icon{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:38px;padding:0 9px}
.icon span{display:block;height:2px;background:var(--text);border-radius:1px}
#backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30}
#sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:88vw;background:var(--card);border-right:1px solid var(--line);z-index:40;display:flex;flex-direction:column;gap:18px;padding:14px;overflow:auto;transform:translateX(-102%);visibility:hidden}
body.nav-open #sidebar{transform:none;visibility:visible}
.side-head{display:flex;align-items:center;gap:12px}
#nav{display:flex;flex-direction:column;gap:4px}
#nav a{display:block;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none}
#nav a:hover{background:var(--bg)}
#nav a[aria-current="page"]{background:var(--bg);font-weight:700;box-shadow:inset 3px 0 0 var(--green)}
.side-sec{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.side-sec h3{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.qrow{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.qrow label{font-weight:700}
.qrow input[type=range]{padding:0;border:0}
.qrow small{color:var(--mute);font-size:.8rem}
#sidebar_more{flex:1}
.side-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* Login box, centered. On a phone it fills the width minus the gutter. */
.login{display:grid;gap:8px;width:min(340px,calc(100% - 32px));margin:15vh auto 0}
.login .brand{font-size:1.2rem;margin-bottom:6px}
.login .err{margin:0}

/* chart */
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.85rem;color:var(--mute);margin:2px 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:20px;height:4px;border-radius:2px;flex:none}
.sw-price{background:var(--text);height:2px}
.sw-mid{background:var(--mid);height:4px}
.sw-zone{background:var(--band);height:12px;border:1px solid var(--line)}
.sw-buy{background:var(--green);height:3px}
.sw-sell{background:repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 8px);height:3px}
.chart{display:block;width:100%;height:300px;margin-top:8px}
.chart text{fill:var(--mute);font-size:11px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .price{fill:none;stroke:var(--text);stroke-width:1.5}
.chart .band{fill:var(--band);stroke:var(--bandline);stroke-width:2;stroke-linejoin:round}
.chart .mid{fill:none;stroke:var(--mid);stroke-width:2.6}
.chart .buyline{fill:none;stroke:var(--green);stroke-width:1.8}
.chart .sellline{fill:none;stroke:var(--red);stroke-width:1.8;stroke-dasharray:7 5}
.chart .entry{stroke:var(--mute);stroke-width:1;stroke-dasharray:2 4}
.chart .stop{stroke:var(--red);stroke-width:1;stroke-dasharray:2 4}
.chart .buy{fill:var(--green)}
.chart .sell{fill:var(--red)}
.chart text.t-buy{fill:var(--green);font-weight:700;font-size:10px;text-anchor:middle}
.chart text.t-sell{fill:var(--red);font-weight:700;font-size:10px;text-anchor:middle}
.chart .cursor{stroke:var(--mute);stroke-width:1}
/* The three invisible mouse areas of a chart: the plot, the time labels and the price labels. */
.chart .hit{fill:rgba(0,0,0,0)}
.chart .axx{fill:rgba(0,0,0,0);cursor:ew-resize}
.chart .axy{fill:rgba(0,0,0,0);cursor:ns-resize}
.chart{touch-action:pan-y;cursor:grab}
.chart .hit{cursor:crosshair}
/* Under a chart: the readout on the left, Reset view and fullscreen on the right. A chart box fills
   the screen in fullscreen, and the SVG then takes the height that is left. */
.chartbox .tools button{padding:3px 10px;font-size:.85rem}
.chartbox p.small{margin:6px 0 0}
.chartfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.chartfoot .small{min-width:0}
.tools{display:flex;gap:8px;align-items:center;flex:none}
.tools .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;padding:0}
.tools .iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chartbox:fullscreen,.chartbox.full{display:flex;flex-direction:column;background:var(--card);padding:14px;overflow:auto;border-radius:0}
.chartbox.full{position:fixed;inset:0;z-index:60}
.chartbox:fullscreen .chart,.chartbox.full .chart{flex:1 1 0;height:auto;min-height:240px}

/* settings list */
.sgroup{margin-top:34px}
.sgroup:first-of-type{margin-top:22px}
.gtitle{margin:0;padding-bottom:8px;border-bottom:2px solid var(--line);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text)}
.slist{list-style:none;margin:0;padding:0}
.srow{display:grid;grid-template-columns:1fr minmax(120px,210px);gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.sname{font-weight:700;font-size:1rem}
.sdesc{margin:3px 0 0;color:var(--mute);font-size:.92rem}
.smeta{margin:3px 0 0;color:var(--mute);font-size:.8rem;opacity:.85}
.sctl{display:flex;align-items:center;gap:8px}
.sctl input[type=text],.sctl input[type=number],.sctl select{flex:1;min-width:0}
.unit{color:var(--mute);font-size:.85rem;white-space:nowrap}
.qin{display:flex;align-items:center;gap:8px}
.qin input,.qin select{flex:1;min-width:0}
.ferr{color:var(--red);font-size:.85rem;margin:3px 0 0}
.wrapbtn{margin-top:22px}
@media (max-width:600px){.srow{grid-template-columns:1fr;gap:8px}}

/* Messages, panels and logs. */
.msg{margin:0 0 8px;font-size:.92rem}
.msg:empty{display:none}
.msg.ok{color:var(--green)}
.msg.bad{color:var(--red)}
.panels{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:800px){.panels{grid-template-columns:1fr}}
.log{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto;font-size:.85rem}
.log li{padding:3px 0;border-bottom:1px solid var(--line);word-break:break-word}
.log .lv{display:inline-block;min-width:3.6em;font-weight:700}
.log .ERROR,.log .WARN{color:var(--red)}
.log .TRADE{color:var(--green)}
.scroll{overflow:auto;max-height:360px}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th{text-align:left;color:var(--mute);font-weight:500;padding:4px 10px 4px 0;white-space:nowrap}
td{padding:4px 10px 4px 0;border-top:1px solid var(--line);white-space:nowrap}
/* Simulation controls. */
.simctl{margin:8px 0}
.simctl label{display:inline-flex;gap:6px;align-items:center}
#sim .stats{margin:10px 0}
/* Aggregated simulation: the list of added runs, the interval line and the result table. */
.agglist{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.agglist li{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.agglist li.dragging{border-color:var(--green);box-shadow:var(--shadow)}
.agglist .name{flex:1;min-width:0}
/* The grip moves a run. touch-action none lets a finger drag it without scrolling the page. */
.grip{cursor:grab;touch-action:none;user-select:none;color:var(--mute);font-size:1.3rem;line-height:1;padding:4px 6px}
.dragging .grip{cursor:grabbing}
button.x{padding:2px 10px;font-size:1.1rem;line-height:1.2}
.agghead{display:flex;align-items:center;gap:10px;margin:12px 0 6px}
.tag{border:1px solid var(--green);color:var(--green);border-radius:6px;padding:1px 8px;font-weight:700;font-size:.85rem}
.aggtable td.num,.aggtable th.num{text-align:right}
.aggtable tr.total td{font-weight:700}
/* Portfolio: rows that chart their asset on a click, the market tag and the editor rows. */
tr.pick{cursor:pointer}
tr.pick.on td{background:var(--bg)}
.badge.mkt{margin-left:6px;font-size:.7rem;padding:0 6px}
.plist .pfields{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;min-width:0}
.plist input[type=text]{width:6.5em}
.plist input[type=number]{width:5.5em}
.pshare{display:inline-flex;align-items:center;gap:4px}
.ptotal.bad{color:var(--red)}
.ptotal.ok{color:var(--green)}

/* help */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto}
.modal-box{background:var(--card);border:1px solid var(--line);border-radius:12px;max-width:660px;width:100%;padding:20px 22px}
.modal-box h3{margin:18px 0 6px;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.modal-box ul{margin:6px 0;padding-left:20px}
.modal-box li{margin:5px 0}
.helplist{list-style:none;padding-left:0!important}
.helplist li{display:flex;gap:10px;align-items:flex-start}
.helplist .sw{margin-top:9px}

/* touch screens. The mouse hint becomes a touch hint, and controls get finger sized. */
.hint-touch{display:none}
@media (hover:none) and (pointer:coarse){
  .hint{display:none}
  .hint-touch{display:block}
  button,select{min-height:40px}
  .chartbox .tools button{min-height:36px}
}

/* phones. Everything stacks in one column, dividers between side by side groups go away,
   and inputs use 16px text so the phone does not zoom in when one is tapped. */
@media (max-width:600px){
  .wrap{padding:10px}
  .card{padding:12px}
  .stack{gap:10px}
  input,select{font-size:16px}
  .topbar{gap:8px;padding:6px 10px}
  .brand{font-size:1rem}
  .title{flex-wrap:wrap;gap:6px}
  .state{margin-left:0;padding-left:0;border-left:0}
  .top{gap:10px}
  .topctl{width:100%;gap:10px;justify-content:space-between}
  .topctl .modebox{padding-left:0;border-left:0}
  .stats{gap:8px;grid-template-columns:1fr 1fr}
  .big{font-size:1.1rem}
  .chart{height:240px}
  .chartfoot{flex-wrap:wrap}
  .chartfoot .small{flex:1 0 100%}
  .tools{margin-left:auto}
  .simctl{flex-direction:column;align-items:stretch}
  .simctl label{display:flex;justify-content:space-between}
  .simctl label input,.simctl label select{flex:0 1 60%;min-width:0}
  .presets{justify-content:space-between}
  .presets button{flex:1}
  .agglist li{padding:8px}
  .log,.scroll{max-height:300px}
  .sgroup{margin-top:26px}
  .srow{padding:14px 0}
  .modal{padding:0}
  .modal-box{border-radius:0;min-height:100%;padding:16px}
}