:root{
      --bg:#0d0d14;--bg2:#161622;--bg3:#1e1e2e;--bg4:#252538;
      --border:#2a2a42;--border2:#353558;
      --text:#f2f2ff;--text2:#b0b0d0;--text3:#6a6a90;
      --accent:#c084fc;--accent2:#818cf8;
      --radius:14px;--radius-sm:8px;
      --shadow:0 4px 24px rgba(0,0,0,.5);
      --shadow-sm:0 2px 8px rgba(0,0,0,.3);
    }
    *{box-sizing:border-box;margin:0;padding:0;}
    body{background:var(--bg);color:var(--text);font-family:'Hiragino Sans','Yu Gothic UI','Noto Sans JP',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;}
    #root{min-height:100vh;}
    input,textarea,select{font-family:inherit;color:var(--text);}
    input::placeholder,textarea::placeholder{color:var(--text3);}
    ::-webkit-scrollbar{width:4px;height:4px;}
    ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
    @keyframes spin{to{transform:rotate(360deg);}}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
    @keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
    @keyframes slideIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
    @keyframes slideInFull{from{transform:translateX(100%);}to{transform:translateX(0);}}
    .fade-in{animation:fadeIn 0.2s ease;}
    .slide-up{animation:slideUp 0.3s cubic-bezier(.32,.72,0,1);}
    .slide-in{animation:slideIn 0.25s ease;}
    .slide-in-full{animation:slideInFull 0.28s cubic-bezier(.32,.72,0,1);}
    /* PCレイアウト */
    .app-layout{display:flex;min-height:100vh;}
    .sidebar{width:224px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:50;}
    .main-content{flex:1;margin-left:224px;min-height:100vh;}
    .detail-panel{width:420px;flex-shrink:0;background:var(--bg2);border-left:1px solid var(--border);position:fixed;top:0;right:0;height:100vh;overflow-y:auto;z-index:50;}
    .grid-pc{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:0 16px;}
    /* スマホレイアウト */
    @media(max-width:767px){
      .sidebar{display:none;}
      .main-content{margin-left:0;}
      .detail-panel{display:none;}
      .grid-pc{grid-template-columns:repeat(4,1fr);gap:6px;padding:0 10px;}
      .mobile-only{display:flex!important;}
      .pc-only{display:none!important;}
      .mobile-fullscreen{position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto;}
    }
    @media(min-width:768px){
      .mobile-only{display:none!important;}
      .pc-only{display:flex!important;}
      .bottom-sheet-overlay{display:none!important;}
      .mobile-fullscreen{display:none!important;}
    }
    /* スクロールバー非表示 */
    .no-scroll{scrollbar-width:none;-ms-overflow-style:none;}
    .no-scroll::-webkit-scrollbar{display:none;}
    /* 詳細パネル表示時のmain幅調整 */
    @media(min-width:768px){
      .has-detail .main-content{margin-right:420px;}
    }
    /* カード hover */
    .item-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4);}
    .item-card{transition:transform .15s,box-shadow .15s;}