/* ---------- シェル ---------- */
  #app{display:flex;min-height:100vh;}
  aside{width:244px;flex-shrink:0;display:flex;flex-direction:column;position:relative;
    background:var(--side-bg);color:var(--side-ink);border-right:1px solid var(--side-line);}
  .mark{width:22px;height:22px;flex-shrink:0;border-radius:7px;}
  .as-top{padding:18px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--side-line);}
  .as-name{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);}
  .as-name small{display:block;font-size:10px;font-weight:500;color:var(--side-ink2);letter-spacing:.04em;margin-top:2px;}
  nav.side{flex:1;padding:14px 12px;overflow-y:auto;}
  .grp{padding:16px 12px 6px;font-size:10px;letter-spacing:.14em;color:var(--side-ink2);font-weight:600;}
  .nav-i{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
    font-size:13.5px;color:var(--side-ink);text-align:left;transition:background .13s,color .13s;}
  .nav-i:hover{background:var(--side-hover);}
  .nav-i.on{background:var(--side-on-bg);color:var(--side-on-ink);font-weight:600;position:relative;}
  .nav-i.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
    border-radius:0 3px 3px 0;background:var(--accent);}
  .nav-i.soon{color:var(--side-ink2);cursor:default;}
  .nav-i.soon:hover{background:none;}
  .badge{margin-left:auto;font-size:9px;padding:2px 6px;border-radius:4px;background:var(--surface2);color:var(--faint);}
  .as-bot{padding:14px 12px;border-top:1px solid var(--side-line);}
  .as-bot .who{padding:0 12px 10px;font-size:12px;color:var(--side-ink);}
  .as-bot .who small{color:var(--side-ink2);font-size:10px;display:block;}
  .logout{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;
    font-size:13px;color:var(--side-ink2);transition:background .13s,color .13s;}
  .logout:hover{background:var(--side-hover);color:var(--side-ink);}

  main{flex:1;min-width:0;}
  header.top{display:none;position:sticky;top:0;z-index:30;height:56px;align-items:center;
    justify-content:space-between;padding:0 14px;color:var(--ink);
    background:var(--side-bg);border-bottom:1px solid var(--side-line);}
  header.top .logout{width:auto;font-size:12px;padding:6px 8px;}
  .content{padding:22px;max-width:1000px;}
  .content.wide{max-width:100%;}
  nav.bottom{display:none;}

  h1.pg{font-size:23px;font-weight:700;margin:0;letter-spacing:.01em;}
  .sub{font-size:13.5px;color:var(--muted);margin:5px 0 0;}
  .hello{font-size:13px;color:var(--muted);margin:0;}
  .email-h{font-size:19px;font-weight:700;margin:3px 0 26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:30px;}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:13px;
    padding:18px;text-align:left;position:relative;overflow:hidden;
    transition:transform .18s,box-shadow .18s,border-color .18s;}
  .stat:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 12px 26px -20px var(--shadow);}
  .stat .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;}
  .stat .num{font-size:29px;font-weight:700;margin-top:16px;color:var(--ink);letter-spacing:-.01em;}
  .stat .lbl{font-size:12px;color:var(--muted);margin-top:3px;}
  .sec{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .sec h2{font-size:11.5px;font-weight:700;color:var(--faint);margin:0;letter-spacing:.14em;}
  .sec .rule{height:1px;background:var(--line);flex:1;}
  .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .svc .t{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;
    text-align:left;width:100%;transition:transform .18s,box-shadow .18s,border-color .18s;}
  .svc .t:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 12px 26px -20px var(--shadow);}
  .svc .t .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
  .svc .t .ic{width:34px;height:34px;border-radius:9px;color:var(--accent);display:flex;
    align-items:center;justify-content:center;background:var(--accent-soft);}
  .svc .t .name{font-size:14px;font-weight:600;}
  .svc .t .note{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.5;}
  .svc .add{border:1px dashed var(--line2);border-radius:12px;padding:20px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;color:var(--faint);font-size:12px;gap:6px;}

  .pg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:4px;}
  .add-btn{flex-shrink:0;display:flex;align-items:center;gap:6px;color:var(--accent-ink);
    background:var(--accent);border-radius:9px;padding:8px 14px;font-size:13.5px;font-weight:600;
    transition:background .15s;}
  .add-btn:hover{background:var(--accent-h);}
  .search{position:relative;max-width:320px;margin:20px 0 12px;}
  .search input{width:100%;padding:9px 12px 9px 34px;font-size:14px;background:var(--card);color:var(--ink);
    border:1px solid var(--line);border-radius:9px;outline:none;transition:border-color .15s,box-shadow .15s;}
  .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  .search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint);}

  .list{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
  .row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);}
  .row:first-child{border-top:none;}
  .row:hover{background:var(--surface);}
  .av{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;}
  .row .main{min-width:0;flex:1;}
  .row .main .n{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .row .main .s{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .act{padding:6px;border-radius:6px;color:var(--muted);}
  .act:hover{background:var(--surface2);}
  .act.del{color:var(--shu);} .act.del:hover{background:rgba(192,69,58,.10);}
  .empty{padding:48px 16px;text-align:center;}
  .empty .m{font-size:14px;color:var(--muted);font-weight:500;}
  .empty .lnk{margin-top:12px;font-size:14px;font-weight:600;color:var(--accent);}
  .count{font-size:12px;color:var(--faint);margin-top:12px;}

  .modal-bg{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
    padding:16px;background:rgba(16,22,32,.42);backdrop-filter:blur(2px);}
  .modal{background:var(--card);color:var(--ink);border:1px solid var(--line);
    border-radius:15px;width:100%;max-width:512px;max-height:88vh;display:flex;flex-direction:column;
    box-shadow:0 28px 60px -20px rgba(16,22,32,.4);}
  .modal .mh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);}
  .modal .mh h3{margin:0;font-weight:700;font-size:16px;}
  .modal .mb{padding:20px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
  .modal .mb .wide{grid-column:1 / -1;}
  .modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--line);}
  .req{color:var(--shu);margin-left:2px;}
  .ghost{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;color:var(--muted);}
  .ghost:hover{background:var(--surface2);}
  .save{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;font-size:14px;font-weight:600;
    color:var(--accent-ink);background:var(--accent);transition:background .15s;}
  .save:hover{background:var(--accent-h);} .save:disabled{opacity:.5;}
  .icx{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  .imgf{display:flex;gap:12px;align-items:flex-start;}
  .imgp{width:74px;height:74px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;
    display:flex;align-items:center;justify-content:center;background:var(--surface);overflow:hidden;}
  .imgp img{max-width:100%;max-height:100%;object-fit:contain;}
  .imgp span{font-size:11px;color:var(--faint);}
  .imgb{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding-top:2px;}
  .ghost.sm{border:1px solid var(--line);padding:5px 10px;font-size:12px;border-radius:6px;background:var(--card);}
  .ghost.sm.del{color:var(--shu);}
  /* 体験時間の残り */
  .demo-tt{display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin:0 0 10px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;
    background:var(--accent-soft);font-size:11px;color:var(--muted);}
  .demo-tt:empty{display:none;}
  .demo-tt b{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.02em;}
  .demo-tt.low{background:rgba(192,69,58,.10);border-color:rgba(192,69,58,.35);}
  .demo-tt.low b{color:var(--shu);}
  .demo-tt.hd{margin:0 10px 0 0;padding:5px 10px;flex-shrink:0;}
  .theme-btn{margin-bottom:2px;}
  .theme-btn #theme-ic{display:flex;align-items:center;}