/* ===== Glowplug console skin ===== */
:root{
  --bg:#0c0c0c;
  --panel:#121212;
  --panel2:#161616;
  --chrome:#2a2a2a;
  --chrome-hi:#444;
  --amber:#e67e22;
  --amber-glow:rgba(230,126,34,.85);
  --green:#2ecc71;
  --green-dim:rgba(46,204,113,.6);
  --lcd:#a8ffc8;
  --text:#cfcfcf;
  --divider:#262626;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html,body{
  height:100%;
  background:radial-gradient(1200px 800px at 50% -10%, #1c1c1c 0%, var(--bg) 60%);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

.console{
  max-width:560px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  padding:calc(var(--safe-top) + 14px) 16px calc(var(--safe-bottom) + 86px);
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
}

/* ---- headers ---- */
.panel-header{text-align:center;padding-top:4px;}
.brand{
  font-family:"Courier New",monospace;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--lcd);
  text-shadow:0 0 8px var(--green-dim);
  font-size:1.5rem;
}
.sub{
  font-size:.72rem;
  letter-spacing:.12em;
  color:#777;
  margin-top:2px;
}
.section-title{
  font-family:"Courier New",monospace;
  letter-spacing:.2em;
  color:var(--lcd);
  text-shadow:0 0 6px var(--green-dim);
  font-size:1rem;
}

/* ---- dashboard cluster ---- */
.cluster{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 2px;
}
.gauge{
  position:relative;
  width:150px;height:150px;
  flex:none;
}
.gauge-rim{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 50% 50%, var(--panel2) 0 62%, #1b1b1b 62% 72%, var(--chrome) 72% 84%, #555 84% 88%, #2a2a2a 88% 100%);
  box-shadow:
    inset 0 -2px 6px rgba(0,0,0,.7),
    0 3px 8px rgba(0,0,0,.6);
}
.gauge-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.arc{
  fill:none;
  stroke:#3a3a3a;
  stroke-width:3;
  stroke-linecap:round;
}
.needle {
  position:absolute;
  width:4px;height:52px;
  left:50%;top:50%;
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(-120deg);
  background:linear-gradient(to top, #7a4200, var(--amber));
  border-radius:2px;
  box-shadow:0 0 6px var(--amber-glow), 0 0 12px var(--amber-glow);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  z-index:2;
}
.gauge-hub{
  position:absolute;left:50%;top:50%;width:14px;height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ddd, #777 60%);
  z-index:3;
}
.gauge-readout{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  text-align:center;z-index:4;width:100%;
}
.gauge-value{
  display:block;
  font-family:"Courier New",monospace;
  font-size:1.15rem;font-weight:700;
  color:var(--lcd);
  text-shadow:0 0 6px var(--green-dim);
}
.gauge-label{
  display:block;font-size:.55rem;letter-spacing:.18em;color:#777;
}

/* quick add */
.quick-add{
  width:64px;height:64px;flex:none;
  border-radius:50%;
  border:none;
  background:
    radial-gradient(circle at 32% 26%, #fff, transparent 30%),
    linear-gradient(145deg,#666,#1a1a1a 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 10px rgba(0,0,0,.7),
    0 0 0 4px #2c2c2c,
    0 6px 14px rgba(0,0,0,.6);
  cursor:pointer;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.quick-add:active{transform:scale(.95);}
.plus{
  color:var(--amber);
  font-size:2.2rem;font-weight:700;line-height:1;
  text-shadow:0 0 8px var(--amber-glow);
  transform:translateY(-1px);
}

/* ---- LCD panel ---- */
.lcd-panel{
  background:linear-gradient(180deg,#0f2418,#0a1810);
  border:2px solid #1e2a22;
  border-radius:10px;
  padding:14px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.8), inset 0 0 6px rgba(46,204,113,.12);
}
.lcd-panel.tall{flex:1;min-height:260px;overflow-y:auto;}
.lcd-title{
  font-family:"Courier New",monospace;
  letter-spacing:.16em;color:#5f8f74;font-size:.68rem;margin-bottom:10px;
}
.lcd-list{display:flex;flex-direction:column;}
.lcd-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:10px 2px;
  border-bottom:1px solid var(--divider);
  font-family:"Courier New",monospace;
  cursor:pointer;
}
.lcd-row:last-child{border-bottom:none;}
.lcd-row-main{color:var(--lcd);text-shadow:0 0 4px var(--green-dim);font-size:.92rem;}
.lcd-row-sub{color:#5f8f74;font-size:.72rem;margin-top:3px;}
.lcd-row-date{color:#4f7a63;font-size:.72rem;flex:none;}
.empty{
  font-family:"Courier New",monospace;
  color:#6fe0a0;text-align:center;padding:26px 10px;font-size:.9rem;
  text-shadow:0 0 10px var(--green-dim);
  line-height:1.7;
}
.row-actions{display:flex;gap:8px;flex:none;}
.row-action{
  border:1px solid var(--divider);border-radius:6px;
  background:transparent;color:var(--text);
  font-size:.68rem;padding:4px 8px;cursor:pointer;font-family:inherit;
}
.row-action.edit{color:var(--amber);}
.row-action.del{color:#e74c3c;}

/* ---- searchbar ---- */
.searchbar{padding:2px 0;}
.searchbar input{
  width:100%;
  padding:13px 14px;
  border-radius:10px;
  border:1px solid var(--divider);
  background:var(--panel2);
  color:var(--lcd);
  font-family:"Courier New",monospace;
  font-size:.95rem;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.searchbar input::placeholder{color:#4f7a63;}
.searchbar input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(230,126,34,.3);}

/* ---- form ---- */
.form-panel{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field-label{
  font-family:"Courier New",monospace;letter-spacing:.12em;
  color:#8aa;font-size:.72rem;
}
.field-label em{color:#5f7a6a;text-transform:none;}
.field input[type="date"],
.field input[type="text"],
.field textarea{
  padding:13px 14px;border-radius:9px;
  border:1px solid var(--divider);
  background:var(--panel2);color:var(--lcd);
  font-family:"Courier New",monospace;font-size:1rem;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
  width:100%;
}
.field textarea{resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(230,126,34,.3);}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7) sepia(1) saturate(5) hue-rotate(160deg);}

.stepper{display:flex;align-items:stretch;gap:8px;}
.step-btn{
  flex:none;width:54px;border-radius:9px;border:1px solid var(--divider);
  background:linear-gradient(180deg,#2c2c2c,#181818);
  color:var(--amber);font-size:1.6rem;font-weight:700;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.step-btn:active{background:#111;}
.stepper input{flex:1;text-align:center;}

.error{
  border:1px solid #7a2b2b;border-radius:8px;background:#2a1212;
  color:#ff9d9d;padding:10px 12px;font-size:.85rem;
}

.form-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.chrome-btn{
  padding:16px;border:none;border-radius:11px;cursor:pointer;
  font-weight:700;letter-spacing:.08em;font-size:.95rem;
  background:linear-gradient(180deg,#4a4a4a,#242424 60%,#191919);
  color:#ddd;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 3px 8px rgba(0,0,0,.6),
    0 0 0 1px #111;
}
.chrome-btn:active{transform:translateY(1px);}
.chrome-btn.primary{
  background:linear-gradient(180deg,#f0913f,#d96f1a 55%,#b45a12);
  color:#1a0e00;text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 3px 10px rgba(230,126,34,.4),
    0 0 0 1px #7a3d08;
}
.chrome-btn.ghost{background:transparent;border:1px solid var(--divider);color:#999;box-shadow:none;}

/* ---- bottom tab bar ---- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:linear-gradient(180deg,#202020,#111);
  border-top:2px solid #333;
  box-shadow:0 -4px 14px rgba(0,0,0,.7);
  padding:8px 8px calc(8px + var(--safe-bottom));
  display:flex;gap:6px;
  max-width:560px;margin:0 auto;
}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 2px;border:none;border-radius:9px;
  background:transparent;color:#6a6a6a;cursor:pointer;
  font-size:.6rem;letter-spacing:.04em;
}
.tab-btn .icon{width:24px;height:24px;display:block;}
.tab-btn.active{
  background:linear-gradient(180deg,#3a2817,#241508);
  color:var(--amber);
  box-shadow:inset 0 1px 0 rgba(230,126,34,.4), 0 0 12px rgba(230,126,34,.25);
}
.tab-btn.active .tab-label{color:var(--amber);text-shadow:0 0 8px var(--amber-glow);}
.tab-btn.active .icon{filter:none;}

/* icons (simple svg strokes) */
.icon{background:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;}
.icon-dash{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7z"/></svg>');}
.icon-log{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h16v2H4zm0 4h16v2H4zm0 4h16v2H4zm0 4h10v2H4z"/></svg>');}
.icon-new{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>');}
.icon-search{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 2a8 8 0 1 0 4.9 14.3l4.4 4.4 1.4-1.4-4.4-4.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/></svg>');}

/* hide non-active tabs */
.tab{display:none;}
.tab.active{display:flex;flex-direction:column;gap:18px;flex:1;}