/* 觀星者 StarGZR — styles */
  :root{
    --ink:#0A0E1C; --panel:#101731; --line:#2A3557;
    --brass:#E3B34C; --paper:#EDE7D8; --cyan:#6FC3D6;
    --dim:#8B93AD;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  /* 關閉文字選取:避免拖曳星圖時誤選文字 */
  body{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;}
  input,select,textarea{-webkit-user-select:text;user-select:text;}
  body{
    background:var(--ink); color:var(--paper);
    font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
    display:flex; flex-direction:column; overflow:hidden;
  }
  header{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:10px 16px; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#131B3A 0%,#0E1430 100%);
    position:relative; z-index:40;   /* 讓浮動提示能蓋在畫布之上(手機下方溢出時仍可見) */
  }
  header .brand{display:flex;align-items:baseline;gap:8px;margin-right:4px;}
  header .brand b{color:var(--brass);letter-spacing:.35em;font-size:15px;font-weight:700;}
  header .brand span{color:var(--dim);font-size:11px;letter-spacing:.12em;}
  #brandTitle{cursor:default;}
  #authorTag{
    opacity:0;transform:translateX(-4px);pointer-events:none;
    transition:opacity .7s ease,transform .7s ease;
    color:var(--brass);font-style:italic;font-size:11px;letter-spacing:.1em;
  }
  #authorTag.show{opacity:.92;transform:none;}
  .ctl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);}
  .ctl label{white-space:nowrap;}
  /* 只有 AI 語音命令鍵靠最右(視為特別按鍵);語言/通知留在原本左側 */
  header #micWrap{margin-left:auto;position:relative;display:flex;align-items:center;}
  /* AI 語音鍵左側的浮動提示例句(未錄音時顯示) */
  #micHint{
    position:absolute;right:100%;top:50%;transform:translateY(-50%);z-index:80;
    margin-right:10px;white-space:nowrap;pointer-events:none;
    font-size:11.5px;font-style:italic;color:#5AB0FF;
    background:rgba(10,24,52,.4);border:1px solid rgba(90,176,255,.45);
    border-radius:999px;padding:3px 10px;opacity:.72;
    box-shadow:0 0 10px rgba(90,176,255,.2);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    animation:hintbob 2.6s ease-in-out infinite;
  }
  #micHint::after{content:' \25B8';opacity:.7;}
  #micWrap.recording #micHint,
  #micWrap.hintseen #micHint{display:none;}  /* 首次使用語音後,提示永久隱藏 */
  @keyframes hintbob{0%,100%{transform:translateY(-50%) translateX(0);}50%{transform:translateY(-50%) translateX(-4px);}}
  @keyframes hintbobv{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
  input[type="datetime-local"],select,input[type="number"]{
    background:#0B1126;color:var(--paper);border:1px solid var(--line);
    border-radius:6px;padding:5px 8px;font-size:12.5px;
    font-family:ui-monospace,Menlo,Consolas,monospace;
  }
  input[type="number"]{width:76px;}
  input:focus,select:focus{outline:1px solid var(--brass);}
  button{
    background:#0B1126;color:var(--paper);border:1px solid var(--line);
    border-radius:6px;padding:5px 12px;font-size:12.5px;cursor:pointer;
    font-family:inherit;transition:border-color .15s,color .15s;
  }
  button:hover{border-color:var(--brass);color:var(--brass);}
  button:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}
  button.primary{border-color:var(--brass);color:var(--brass);font-weight:600;min-width:64px;
    display:inline-flex;align-items:center;gap:6px;justify-content:center;}
  /* 播放三角(CSS 邊框繪製,非字元) */
  .glyph-play{display:inline-block;width:0;height:0;
    border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;}
  .primary.is-playing .glyph-play{
    border:none;width:8px;height:9px;position:relative;}
  .primary.is-playing .glyph-play::before,
  .primary.is-playing .glyph-play::after{
    content:'';position:absolute;top:0;width:2.5px;height:9px;background:currentColor;}
  .primary.is-playing .glyph-play::before{left:0;}
  .primary.is-playing .glyph-play::after{right:0;}
  #notifyBtn.muted{opacity:.55;text-decoration:line-through;}
  #micBtn.rec{border-color:#FF8A6B;color:#FF8A6B;animation:micpulse 1s infinite;}
  #micBtn.busy{border-color:var(--cyan);color:var(--cyan);}
  @keyframes micpulse{50%{opacity:.45;}}
  main{flex:1;display:flex;min-height:0;}
  .pane{position:relative;flex:1;min-width:0;min-height:0;}
  .pane+.pane{border-left:1px solid var(--line);}
  .pane canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none;}
  .pane canvas:active{cursor:grabbing;}
  .chip{
    position:absolute;top:10px;left:12px;z-index:6;pointer-events:auto;cursor:pointer;
    font-size:11.5px;letter-spacing:.22em;color:var(--brass);user-select:none;
    border:1px solid rgba(227,179,76,.45);border-radius:999px;
    padding:4px 12px;background:rgba(10,14,28,.55);backdrop-filter:blur(3px);
  }
  .chip::after{content:' ▾';opacity:.7;}
  .pane.panelHidden .chip::after{content:' ▸';}
  .pane.panelHidden .overlay{display:none;}
  /* 飛行控制底列:方向鍵盤 + 回到原點/觀察,水平並排 */
  .flyDock{
    position:absolute;bottom:12px;left:12px;z-index:6;
    display:flex;align-items:flex-end;gap:8px;
  }
  .flyPad{
    display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(2,26px);
    gap:4px;opacity:.4;transition:opacity .2s;
  }
  .flyPad:hover{opacity:.92;}
  .flyPad button{
    padding:0;border-radius:6px;line-height:1;position:relative;
    background:rgba(10,14,28,.55);border:1px solid var(--line);color:var(--dim);
    touch-action:none;user-select:none;font-size:11px;
  }
  .flyPad button:active{border-color:var(--brass);color:var(--brass);}
  .flyPad button:active .ar{border-color:transparent;}
  .flyPad button[data-k="w"]{grid-column:2;grid-row:1;}
  .flyPad button[data-k="a"]{grid-column:1;grid-row:2;}
  .flyPad button[data-k="s"]{grid-column:2;grid-row:2;}
  .flyPad button[data-k="d"]{grid-column:3;grid-row:2;}
  /* 以 CSS 邊框繪製三角箭頭(非 emoji,不受系統字型影響) */
  .flyPad .ar{display:none;position:absolute;top:50%;left:50%;width:0;height:0;}
  .flyPad button[data-k="w"] .ar{transform:translate(-50%,-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid currentColor;}
  .flyPad button[data-k="s"] .ar{transform:translate(-50%,-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid currentColor;}
  .flyPad button[data-k="a"] .ar{transform:translate(-50%,-50%);border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:6px solid currentColor;}
  .flyPad button[data-k="d"] .ar{transform:translate(-50%,-50%);border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor;}
  .flyExtra{
    display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dim);
    background:rgba(10,14,28,.45);border:1px solid var(--line);border-radius:9px;
    padding:4px 8px;opacity:.6;transition:opacity .2s;backdrop-filter:blur(3px);
  }
  .flyExtra:hover{opacity:.95;}
  .flyExtra button,.flyExtra select{font-size:10.5px;padding:2px 6px;}
  @media (pointer:coarse){
    .flyPad{opacity:.55;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px);}
    .flyPad .kb{display:none;}
    .flyPad .ar{display:block;}
  }
  .zoomchip{
    position:absolute;bottom:12px;right:12px;z-index:5;pointer-events:none;
    font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--cyan);
    border:1px solid var(--line);border-radius:999px;padding:3px 10px;
    background:rgba(10,14,28,.6);
  }
  .overlay{
    position:absolute;top:10px;right:12px;z-index:5;display:flex;flex-direction:column;
    gap:6px;align-items:flex-end;font-size:12px;max-width:72%;
  }
  .overlay .row{
    display:flex;align-items:center;gap:6px;background:rgba(10,14,28,.6);
    border:1px solid var(--line);border-radius:8px;padding:4px 10px;backdrop-filter:blur(3px);
    flex-wrap:wrap;justify-content:flex-end;
  }
  .overlay input[type="checkbox"]{accent-color:var(--brass);}
  #retroStatus{
    font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:2px 8px;border-radius:6px;
    border:1px solid var(--line);background:rgba(10,14,28,.6);margin-left:2px;
  }
  #retroStatus.retro{color:#FF8A6B;border-color:rgba(255,138,107,.5);}
  #retroStatus.pro{color:var(--cyan);}
  footer{
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:6px 16px;border-top:1px solid var(--line);
    font-size:11.5px;color:var(--dim);
    font-family:ui-monospace,Menlo,Consolas,monospace;
  }
  footer b{color:var(--paper);font-weight:600;}
  .hint{color:var(--dim);}
  #toasts{
    position:fixed;top:auto;bottom:44px;left:auto;right:14px;transform:none;z-index:60;
    display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;
    max-width:min(360px,80vw);
  }
  .toast{
    background:rgba(13,18,38,.66);border:1px solid var(--line);border-radius:10px;
    padding:9px 18px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.5);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    animation:tin .25s ease-out;
  }
  .toast.retro{border-color:#FF8A6B;color:#FFB59F;}
  .toast.pro{border-color:var(--cyan);color:#B8E6F0;}
  @keyframes tin{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
  #modalBg{
    position:fixed;inset:0;background:rgba(4,6,14,.7);backdrop-filter:blur(3px);
    z-index:50;display:none;align-items:center;justify-content:center;padding:18px;
  }
  #modalBg.open{display:flex;}
  #modal{
    background:var(--panel);border:1px solid var(--brass);border-radius:14px;
    width:min(560px,100%);max-height:82vh;display:flex;flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  #modal .mhead{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid var(--line);
  }
  #modal .mhead h2{font-size:15px;color:var(--brass);letter-spacing:.15em;font-weight:700;}
  #modal .ynav{display:flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace;}
  #modal .ynav b{font-size:15px;min-width:56px;text-align:center;}
  #modal .mbody{overflow-y:auto;padding:10px 18px 18px;}
  table{width:100%;border-collapse:collapse;font-size:12.5px;}
  th{color:var(--dim);font-weight:500;text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);}
  td{padding:7px 6px;border-bottom:1px solid rgba(42,53,87,.5);font-family:ui-monospace,Menlo,monospace;}
  td.pname{font-family:inherit;font-weight:600;}
  td .dur{color:var(--dim);}
  tr.none td{color:var(--dim);font-family:inherit;}
  @media (max-width:860px) and (orientation:portrait){
    main{flex-direction:column;}
    .pane+.pane{border-left:none;border-top:1px solid var(--line);}
  }
  @media (max-width:900px),(max-height:520px){
    .overlay{font-size:11px;top:40px;}
    header{gap:5px;padding:5px 8px;}
    header .brand b{font-size:12px;letter-spacing:.18em;}
    header .brand span{display:none;}
    .ctl{font-size:10.5px;gap:4px;}
    input[type="datetime-local"],select,input[type="number"],button{
      font-size:11px;padding:3px 6px;border-radius:5px;
    }
    input[type="number"]{width:58px;}
    button.primary{min-width:48px;}
    footer{font-size:10px;padding:4px 10px;}
    /* 手機:通知避開較矮的底列 + 安全區,字級縮小 */
    #toasts{bottom:calc(env(safe-area-inset-bottom,0px) + 46px);right:8px;max-width:82vw;}
    .toast{font-size:11.5px;padding:7px 12px;}
    #micHint{ font-size:10px; }   /* 手機:提示放按鈕左邊(沿用桌機水平配置),只縮小字級 */
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;} }