:root{
    --blue:#0078d7;
    --muted:#f2f6fb;
    --card-bg:#fff;
    --label-color: #0078d7;
    --accent:#633;
    --max-label-w:300px;
  }

  html,body{height:100%;margin:0;font-family:Inter, "Segoe UI", Arial, sans-serif;color:#222;background:#fff;}
  .page {
    display:flex; flex-direction:column; min-height:100vh;
  }

  /* HEADER */
  header.topbar{
    background:var(--blue); color:#fff; padding:12px 16px;
  }
  header.topbar .line1{font-size:20px;font-weight:700;margin:0;}
  header.topbar .line2{font-size:12px; margin:4px 0 0; opacity:0.95;}

  /* top selector area (hamburger + right select) */
  .selectors {
    display:none; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #e6e6e6;
    background: #fafafa;
  }
  .hamburger {
    display:none; font-size:22px; cursor:pointer; padding:6px 8px;
    border-radius:6px; background:transparent; border:1px solid transparent;
  }
  .hamburger:active{opacity:0.8;}

  /* layout area: left, right, body */
  .layout {
    display:flex; flex:1; min-height:0; /* allows children to scroll */
  }

  /* left panel (categories) */
  .left {
    display: ;width:240px; min-width:180px; max-width:320px; border-right:1px solid #e6e6e6; background:var(--muted); padding:12px; box-sizing:border-box;
    overflow:auto;
  }
  .left h3{margin:0 0 12px 0; color:var(--blue); font-size:14px;}
  .left ul{list-style:none;padding:0;margin:0;}
  .left li{
    padding:10px 8px; margin-bottom:6px; background:#fff; border-radius:6px; cursor:pointer; border:1px solid #e9f3ff;
  }
  .left li:hover{background:#e9f7ff;}
  .left li.active{background:var(--blue); color:#fff; border-color:transparent; font-weight:600;}

  /* right panel (headings) */
  .right {
    width:260px; min-width:200px; border-left:1px solid #eee; background:#f8fbff; padding:12px; box-sizing:border-box;
    overflow:auto;
  }
  .right h3{margin:0 0 12px 0; color:var(--blue); font-size:14px;}
  .right ul{list-style:none;padding:0;margin:0;}
  .right li{
    padding:8px; margin-bottom:6px; background:#fff; cursor:pointer; border-radius:6px; border:1px solid #eef6ff;
  }
  .right li:hover{background:#e8f4ff;}
  .right li.active{background:var(--blue); color:#fff; border-color:transparent; font-weight:600;}

  /* main content area - occupies remaining space */
  .main {
    flex:1; padding:20px; overflow:auto; box-sizing:border-box;
    display:flex; justify-content:center; align-items:flex-start;
  }

  /* content card centered with max width for readability */
  .card {
    width:100%; max-width:900px; background:var(--card-bg); border-radius:8px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); padding:18px;
  }

  /* Title styling in body */
  .card .title {
    font-size:20px; font-weight:700; margin:0 0 8px; color:#222;
    padding-bottom:8px; border-bottom:1px solid #eee;
  }

  /* details table-like display */
  .details { margin-top:14px; display:block; }
  .row {
    display:flex; align-items:flex-start; padding:10px 0; border-bottom:1px dashed #f0f0f0;
    gap:16px;
  }
  .row:last-child{border-bottom:0;padding-bottom:0;}
  .label {
    flex:0 0 var(--max-label-w); max-width:var(--max-label-w);
    color:var(--label-color); font-weight:600; font-size:14px;
    word-break:break-word;
  }
  .value {
    flex:1; color:#333; font-size:14px; word-break:break-word;
  }
  /* full width row if no '|' pair */
  .full {
    display:block; width:100%; padding:12px 0;
    font-weight:600; color:#333; background:#fbfbfb; border-radius:6px;
  }

  /* mobile behavior */
  @media (max-width: 880px){
    .layout { flex-direction:column; }
    .left { display:none; position:absolute; top:84px; left:8px; width:72%; z-index:40; box-shadow:0 6px 18px rgba(0,0,0,0.12);}
    .right { display:none; width:100%; border-left:0; border-top:1px solid #eee; order:2; }
    .hamburger{ display:flex;padding:8px; }
    .selectors { display:flex;padding:8px; }
    .main { padding:12px; }
    .label { flex-basis:30%; max-width:30%; } /* when stacked, label width reduces */
    .row{flex-direction:row;}
    #leftPanel{
        top:125px;
    }
  }
  @media (max-width:520px){
    .hamburger{ display:flex;padding:8px; }
    .label { flex-basis:40%; max-width:40%; font-size:13px; }
    .value { font-size:13px; }
    .selectors { display:flex;padding:8px; }
    #leftPanel{
        top:125px;
    }
  }

  /* bottom scrolling text - slower */
  .bottom-marquee {
    position:fixed; left:0; bottom:0; width:100%; background:var(--blue); color:#fff; padding:8px 0; z-index:9999; overflow:hidden;
  }
  .bottom-marquee .inner {
    display:inline-block; white-space:nowrap; padding-left:100%;
    animation: marquee 40s linear infinite; /* slower (40s) */
    font-size:13px;
  }
  @keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }

  /* small utility */
  .small-muted{font-size:12px;color:#666;margin-top:8px;}