:root{
    --bg:#f4f5f7;
    --card:#ffffff;
    --text:#1b1e23;
    --sub:#9aa1ab;
    --line:#eceef2;
    --up:#e8453c;
    --down:#03a05a;
    --brand:#316bff;
    --shadow:0 1px 2px rgba(20,28,45,.04), 0 6px 16px rgba(20,28,45,.05);
    --shadow-lg:0 12px 32px rgba(20,28,45,.18);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f1115; --card:#181b21; --text:#eef1f5; --sub:#7d8592;
      --line:#242833; --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
      --shadow-lg:0 12px 32px rgba(0,0,0,.5);
    }
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  input{-webkit-user-select:text;user-select:text;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;}
  body{max-width:560px;margin:0 auto;min-height:100vh;touch-action:manipulation;}
  body.dragging{overflow:hidden;}

  /* ---------- 顶部 ---------- */
  header{position:sticky;top:0;z-index:50;
    background:var(--bg);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
    padding:calc(env(safe-area-inset-top) + 16px) 16px 12px;}
  .head-row{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px;}
  .head-row h1{margin:0;font-size:21px;font-weight:700;letter-spacing:.3px;line-height:1.1;}
  .clock{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.5px;
    display:flex;align-items:center;}
  .clock .dot{width:7px;height:7px;border-radius:50%;background:var(--down);margin-right:7px;}
  .clock.pulse .dot{animation:dot .6s ease-out;}
  .head-right{display:flex;align-items:center;}
  .syncChip{margin-right:10px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
    color:var(--sub);background:rgba(154,161,171,.14);cursor:pointer;user-select:none;-webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;}
  .syncChip.ok{color:var(--down);background:rgba(3,160,90,.12);}
  .syncChip.warn{color:var(--up);background:rgba(232,69,60,.12);}
  @keyframes dot{0%{opacity:1;transform:scale(1);}45%{opacity:.3;transform:scale(1.9);}100%{opacity:1;transform:scale(1);}}

  .searchbox{position:relative;}
  .searchbox svg.ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
    color:var(--sub);pointer-events:none;}
  .searchbox input{width:100%;height:46px;border:1.5px solid transparent;border-radius:14px;
    background:var(--card);padding:0 16px 0 42px;font-size:15px;color:var(--text);outline:none;
    box-shadow:var(--shadow);transition:border-color .2s;}
  .searchbox:focus-within input{border-color:var(--brand);}
  .suggest{position:absolute;left:0;right:0;top:54px;background:var(--card);border-radius:16px;
    box-shadow:var(--shadow-lg);overflow:hidden auto;max-height:320px;display:none;z-index:60;
    border:1px solid var(--line);}
  .suggest.show{display:block;}
  .sg-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);}
  .sg-item:last-child{border-bottom:0;}
  .sg-item:active{background:rgba(49,107,255,.08);}
  .sg-item .nm{font-size:15px;font-weight:600;line-height:1.2;}
  .sg-item .cd{font-size:11.5px;color:var(--sub);margin-top:2px;}
  .sg-item .tp{margin-left:auto;font-size:11px;color:var(--sub);background:rgba(150,155,163,.15);
    padding:3px 8px;border-radius:7px;}
  .sg-empty{padding:20px;text-align:center;color:var(--sub);font-size:13px;}

  /* ---------- 列表 ---------- */
  main{padding:2px 16px calc(env(safe-area-inset-bottom) + 92px);}
  .list{list-style:none;margin:0;padding:0;}
  .row{position:relative;display:flex;align-items:center;height:72px;background:var(--card);
    border:1px solid transparent;border-radius:16px;margin-bottom:10px;padding:0 8px 0 18px;box-shadow:var(--shadow);
    overflow:hidden;transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .2s, border-color .2s;}
  .row .bar{position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:transparent;}
  .row:active{transform:scale(.992);box-shadow:0 0 0 rgba(0,0,0,0);}
  /* 卡片主题色：红=涨 / 绿=跌 / 灰=休市 */
  .row.up{background:#fdf4f3;border-color:rgba(232,69,60,.18);}
  .row.up .bar{background:var(--up);}
  .row.down{background:#f2faf6;border-color:rgba(3,160,90,.18);}
  .row.down .bar{background:var(--down);}
  .row.closed{background:#f7f8fa;border-color:var(--line);}
  .row.closed .bar{background:#c4c9d1;}
  .row.dragging{z-index:99;box-shadow:var(--shadow-lg);transition:none;}

  .left{flex:0 0 64px;min-width:0;}
  .left .name{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .left .meta{margin-top:3px;display:block;white-space:nowrap;}
  .left .code{display:block;font-size:9px;line-height:11px;color:var(--sub);font-variant-numeric:tabular-nums;}
  .left .price{display:block;font-size:12px;line-height:14px;margin-top:1px;font-weight:700;font-variant-numeric:tabular-nums;}

  .mid{flex:1 1 auto;min-width:0;height:62px;padding:0;display:flex;align-items:center;}
  .spark-wrap{position:relative;width:100%;height:62px;}
  .spark{width:100%;height:48px;display:block;}
  .sp-chart{position:relative;height:48px;display:flex;align-items:stretch;}
  .sp-yaxis{position:relative;flex:0 0 34px;}
  .sp-plot{position:relative;flex:1;}
  .sp-axis{position:relative;height:14px;display:flex;align-items:stretch;}
  .sp-axis-g{flex:0 0 34px;}
  .sp-axis-t{position:relative;flex:1;}
  .sp-axis-t span{position:absolute;top:1px;font-size:9px;line-height:12px;color:var(--sub);white-space:nowrap;transform:translateX(-50%);}
  .sp-axis-t span.sp-axis-cur{color:var(--text);font-weight:700;}
  .sp-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;border:1.5px solid currentColor;box-sizing:border-box;transform:translate(-50%,-50%);pointer-events:none;}
  .sp-val{position:absolute;right:3px;box-sizing:border-box;font-size:9px;line-height:11px;color:var(--sub);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;transform:translateY(-50%);}

  .right{flex:0 0 64px;text-align:right;}
  .right .day{font-size:16px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:.2px;}
  .right .ytd{margin-top:4px;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;}
  .right .ytd.c-up{color:var(--up);}.right .ytd.c-down{color:var(--down);}
  .tag{display:inline-block;font-size:10px;font-weight:500;color:var(--sub);background:rgba(150,155,163,.16);
    padding:1px 6px;border-radius:6px;margin-left:6px;vertical-align:1px;}
  .c-up{color:var(--up);} .c-down{color:var(--down);} .c-flat{color:var(--sub);}

  .del{display:none;position:absolute;right:0;top:0;bottom:0;width:48px;border:0;background:transparent;
    align-items:center;justify-content:center;}
  .del i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
    background:rgba(232,69,60,.14);color:var(--up);font-size:15px;font-style:normal;font-weight:700;}
  body.editing .row{padding-right:48px;}
  body.editing .del{display:flex;}

  .empty{padding:70px 20px;text-align:center;color:var(--sub);font-size:14px;line-height:2;}

  .status{padding:6px 4px 0;text-align:center;font-size:11px;color:var(--sub);line-height:1.6;}
  .status.bad{color:var(--up);}

  /* 深色模式下的卡片主题色 */
  @media (prefers-color-scheme: dark){
    .row.up{background:#241a19;border-color:rgba(232,69,60,.26);}
    .row.down{background:#142420;border-color:rgba(3,160,90,.26);}
    .row.closed{background:#191c22;border-color:var(--line);}
  }

  /* ---------- 编辑完成条 ---------- */
  .donebar{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;display:none;z-index:80;
    padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);
    background:linear-gradient(transparent, var(--bg) 34%);}
  body.editing .donebar{display:block;}
  .donebar .hint{font-size:11.5px;color:var(--sub);text-align:center;margin:0 0 10px;}
  .donebar button{width:100%;height:48px;border:0;border-radius:15px;background:var(--brand);color:#fff;
    font-size:15.5px;font-weight:600;letter-spacing:.5px;box-shadow:0 8px 22px rgba(49,107,255,.35);}

  .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);
    background:rgba(20,22,26,.92);color:#fff;font-size:13px;padding:10px 18px;border-radius:22px;
    opacity:0;transition:.26s cubic-bezier(.2,.8,.3,1);pointer-events:none;z-index:200;white-space:nowrap;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}