/* ---------- シェル ---------- */
  #app{display:flex;min-height:100vh;}
  aside{width:240px;flex-shrink:0;display:flex;flex-direction:column;background:var(--navy);color:#fff;}
  .mark{width:22px;height:auto;flex-shrink:0;}
  .as-top{padding:20px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);}
  nav.side{flex:1;padding:16px 12px;overflow-y:auto;}
  .grp{padding:16px 12px 6px;font-size:10px;letter-spacing:.16em;color:rgba(200,164,92,.85);font-weight:600;}
  .nav-i{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
    font-size:14px;color:rgba(255,255,255,.75);text-align:left;transition:background .15s;}
  .nav-i:hover{background:rgba(255,255,255,.05);}
  .nav-i.on{background:rgba(200,164,92,.12);font-weight:600;box-shadow:inset 3px 0 0 var(--gold-line);}
  .nav-i.soon{color:rgba(255,255,255,.35);cursor:default;}
  .nav-i.soon:hover{background:none;}
  .badge{margin-left:auto;font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);}
  .as-bot{padding:16px 12px;border-top:1px solid rgba(255,255,255,.1);}
  .as-bot .who{padding:0 12px 8px;font-size:12px;}
  .as-bot .who small{color:rgba(255,255,255,.5);font-size:10px;display:block;}
  .logout{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;
    font-size:14px;color:rgba(255,255,255,.7);}
  .logout:hover{background:rgba(255,255,255,.05);}

  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 16px;background:var(--navy);color:#fff;}
  header.top .logout{width:auto;font-size:12px;padding:0;}
  .content{padding:16px;max-width:960px;}
  .content.wide{max-width:100%;}
  nav.bottom{display:none;}

  h1.pg{font-size:24px;font-weight:700;margin:0;}
  .sub{font-size:14px;color:var(--muted);margin:4px 0 0;}
  .hello{font-size:14px;color:var(--muted);margin:0;}
  .email-h{font-size:18px;font-weight:700;margin:2px 0 24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:32px;}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:left;transition:border-color .15s;position:relative;}
  .stat:hover{border-color:#CFC6B2;}
  .stat .ic{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;}
  .stat .num{font-size:30px;font-weight:700;margin-top:14px;color:var(--navy);}
  .stat .num::before{content:"";display:block;width:22px;height:2px;background:var(--gold-line);margin-bottom:8px;}
  .stat .lbl{font-size:12px;color:var(--muted);margin-top:2px;}
  .sec{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
  .sec h2{font-size:12.5px;font-weight:700;color:var(--gold);margin:0;letter-spacing:.12em;}
  .sec .rule{height:1px;background:#E4DCCB;flex:1;}
  .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .svc .t{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;
    text-align:left;width:100%;transition:border-color .15s;}
  .svc .t:hover{border-color:#CFC6B2;}
  .svc .t .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
  .svc .t .ic{width:36px;height:36px;border-radius:9px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;}
  .svc .t .name{font-size:14px;font-weight:600;}
  .svc .t .note{font-size:12px;color:var(--faint);margin-top:4px;}
  .svc .add{border:1px dashed #D8CFBA;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;background:var(--navy);color:#fff;
    border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600;}
  .add-btn:hover{opacity:.9;}
  .search{position:relative;max-width:320px;margin:20px 0 12px;}
  .search input{width:100%;padding:8px 12px 8px 34px;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:8px;outline:none;}
  .search input:focus{border-color:var(--navy);}
  .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 #F1EBDD;}
  .row:first-child{border-top:none;}
  .row:hover{background:#FAF7F0;}
  .av{width:32px;height:32px;border-radius:8px;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:#F1EBDD;}
  .act.del{color:var(--shu);} .act.del:hover{background:#fbeceb;}
  .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(--gold);}
  .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(22,35,59,.45);}
  .modal{background:#fff;border-radius:16px;width:100%;max-width:512px;max-height:88vh;display:flex;flex-direction:column;
    box-shadow:0 20px 40px rgba(27,42,65,.2);}
  .modal .mh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #F1EBDD;}
  .modal .mh h3{margin:0;font-weight:700;}
  .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 #F1EBDD;}
  .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:#F1EBDD;}
  .save{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;color:#fff;background:var(--navy);}
  .save:hover{opacity:.9;} .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:#FBFAF6;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:#fff;}
  .ghost.sm.del{color:var(--shu);}