[data-project-details] *{ box-sizing: border-box; }
[data-project-details]{
      --text: #f5f5f5;
      --muted: #b8b9ca;
      --muted-2: #9394aa;
      --panel: rgba(9,9,16,0.96);
      --border: rgba(255,255,255,0.1);
      --accent: #00b4ff;
      --pink: #ff62c5;
      --yellow: #ffd86f;
      --shadow: 0 24px 64px rgba(0,0,0,0.9);
      color: var(--text);
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      width: 100%;
      display: block;
    }
[data-project-details] .panel{
      border-radius:24px;
      background: radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%), var(--panel);
      border:1px solid var(--border);
      box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.02);
      padding:24px;
      width:100%;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
[data-project-details] .panel-title{ font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:#d6d6e5; }
[data-project-details] .details-title{ font-size:20px; font-weight:650; margin:2px 0 2px; }
[data-project-details] .details-path{ font-size:12px; color:var(--muted-2); }
[data-project-details] .details-meta{ margin-top:4px; font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; }
[data-project-details] .chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 10px; }
[data-project-details] .chip{ padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); font-size:11px; font-weight:650; letter-spacing:0.04em; }
[data-project-details] .details-section-title{ margin-top:8px; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:#d6d6e6; }
[data-project-details] .details-text{ margin-top:6px; font-size:12px; color:#c2c3d6; line-height:1.6; }
[data-project-details] .details-actions{ margin-top:10px; display:flex; flex-wrap:nowrap; gap:6px; }
[data-project-details] .pill-btn{
      border-radius: 999px;
      padding: 5px 10px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.03);
      font-size: 10px;
      color: #f5f5ff;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: .12s ease;
      white-space: nowrap;
    }
[data-project-details] .pill-btn.primary{ border-color:rgba(255,0,140,0.6); background:linear-gradient(120deg, #ff62c5, #ff008c); color:#07040a; font-weight:550; }
[data-project-details] .pill-btn:hover{ border-color: rgba(0,180,255,0.65); }
[data-project-details] .details-meta-inline{
      margin-top:8px;
      font-size:11px;
      color:var(--muted);
      display:flex;
      flex-wrap:wrap;
      gap:14px;
    }
[data-project-details] .details-meta-inline strong{ color:#f0f1ff; font-weight:600; }
[data-project-details] .activity-note{ margin-top:8px; font-size:11px; color:#a7a8bc; }
[data-project-details] .ag-card{ margin-top:10px; border-radius:14px; border:1px solid rgba(255,255,255,0.12); background: radial-gradient(circle at 100% 0, rgba(0,180,255,0.26), transparent 60%), rgba(5,5,10,0.96); box-shadow:0 8px 32px rgba(0,0,0,0.45); color:#e8e8f5; padding:12px; }
[data-project-details] .ag-header{ font-size:13px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:6px; }
[data-project-details] .ag-sub{ font-size:12px; color:#b4b5c7; margin-bottom:10px; line-height:1.5; }
[data-project-details] .ag-note{ font-size:12px; color:#a5aac0; margin:-4px 0 12px; }
[data-project-details] .ag-tabs{ display:grid; grid-template-columns:repeat(2,1fr); margin:0 -12px 4px; }
[data-project-details] .ag-tab{ padding:10px 0; background:rgba(255,255,255,0.02); color:#e8e8f5; border:none; border-bottom:1px solid rgba(255,255,255,0.07); border-top:1px solid rgba(255,255,255,0.12); cursor:pointer; font-size:13px; font-weight:600; }
[data-project-details] .ag-tab:first-child{ border-right:1px solid rgba(255,255,255,0.08); }
[data-project-details] .ag-tab:last-child{ border-left:1px solid rgba(255,255,255,0.08); }
[data-project-details] .ag-tab.active{ background: linear-gradient(90deg, rgba(255,0,140,0.28), rgba(255,98,197,0.28)); color:#fff; box-shadow: inset 0 0 0 1px #ff33b855; }
[data-project-details] .ag-content{ display:none; margin-top:8px; }
[data-project-details] .ag-content.active{ display:block; }
[data-project-details] .grid-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:nowrap; }
[data-project-details] .grid-toolbar .hint{ font-size:12px; color:#c2c3d6; margin-left:auto; display:flex; align-items:center; gap:8px; }
[data-project-details] .gen-date-btn svg{ width:16px; height:16px; stroke:#e9e9f4; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
[data-project-details] .gen-date-popover{ position:fixed; top:0; left:0; z-index:9999; min-width:260px; background:rgba(9,9,16,0.98); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:10px 12px; box-shadow:0 18px 48px rgba(0,0,0,0.6); display:none; }
[data-project-details] .gen-date-popover.open{ display:block; }
[data-project-details] .gen-date-popover.debug{ outline:2px solid #ff2e88; }
[data-project-details] .gen-date-row{ display:flex; gap:10px; align-items:center; margin:6px 0; position:relative; }
[data-project-details] .gen-date-popover label{ font-size:12px; color:#b9bacb; }
[data-project-details] .gen-dr-text{ width:130px; background:#0f1018; color:#e9e9f4; border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:8px 30px 8px 10px; font-size:13px; letter-spacing:0.02em; }
[data-project-details] .gen-cal-btn{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:none; background:transparent; color:#cfd2e6; border-radius:6px; cursor:pointer; display:grid; place-items:center; }
[data-project-details] .gen-cal-btn svg{ width:16px; height:16px; stroke:#e9e9f4; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
[data-project-details] .gen-cal-panel{ position:absolute; top:36px; left:28px; background:#0c0e18; border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,0.55); padding:10px; min-width:260px; display:none; z-index:45; }
[data-project-details] .gen-cal-panel.open{ display:block; }
[data-project-details] .cal-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
[data-project-details] .cal-title{ font-size:13px; color:#e9ebff; letter-spacing:0.02em; display:flex; align-items:center; gap:8px; }
[data-project-details] .cal-select,[data-project-details] .cal-year{ background:#0f1018; color:#e9e9f4; border:1px solid rgba(255,255,255,0.14); border-radius:8px; padding:6px 8px; font-size:12px; }
[data-project-details] .cal-year{ width:84px; text-align:center; }
[data-project-details] .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
[data-project-details] .cal-dow{ font-size:11px; color:#9aa0b8; text-align:center; padding:4px 0; }
[data-project-details] .cal-day{ font-size:12px; color:#e9e9f6; text-align:center; padding:7px 0; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); }
[data-project-details] .cal-day:hover{ border-color:rgba(0,180,255,0.6); }
[data-project-details] .gen-date-actions{ display:flex; gap:6px; margin-top:8px; }
[data-project-details] .icon-btn{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#e8e8f5; display:grid; place-items:center; cursor:pointer; transition:.12s ease; }
[data-project-details] .sort-btn{
      width: auto;
      height: 30px;
      padding: 4px 12px;
      min-width: auto;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
    }
[data-project-details] .icon-btn:hover{ border-color: rgba(0,180,255,0.6); }
[data-project-details] .icon-btn.active{ background: linear-gradient(120deg, #ff62c5, #ff008c); border-color: rgba(255,0,140,0.6); color:#0b0710; box-shadow: 0 0 0 1px rgba(255,0,140,0.45); }
[data-project-details] .bulk-only{ display:none; }
[data-project-details] .grid-toolbar.selection-on .bulk-only{ display:grid; }
[data-project-details] .gen-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; max-height:460px; overflow-y:auto; padding-right:6px; }
[data-project-details] .gen-grid::-webkit-scrollbar{ width:6px; }
[data-project-details] .gen-grid::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #00b4ff, #ff62c5); border-radius:999px; }
[data-project-details] .gen-thumb{ position:relative; display:block; width:100%; padding-top:100%; border-radius:12px; overflow:hidden; background:#0d0d14; border:1px solid rgba(255,255,255,0.08); box-shadow:0 6px 18px rgba(0,0,0,0.35); cursor:pointer; transition:.12s ease; }
[data-project-details] .gen-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0f1018; }
[data-project-details] .gen-thumb:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.48); border-color:rgba(255,255,255,0.2); }
[data-project-details] .gen-thumb.selected{ border-color:#ff62c5; box-shadow:0 0 0 2px #ff62c566, 0 10px 26px rgba(0,0,0,0.48); }
[data-project-details] .gen-thumb.fav{ border-color:var(--yellow); box-shadow:0 0 0 2px #ffd86f66, 0 10px 26px rgba(0,0,0,0.48); }
[data-project-details] .gen-grid.show-select .gen-thumb.fav{ border-color:#ff62c5; box-shadow:0 0 0 2px #ff62c566, 0 10px 26px rgba(0,0,0,0.48); }
[data-project-details] .thumb-overlay{ position:absolute; bottom:0; left:0; right:0; padding:6px 8px; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.78) 100%); color:#f7f7fb; font-size:12px; display:flex; flex-direction:column; gap:2px; }
[data-project-details] .thumb-meta{ display:flex; gap:6px; align-items:center; color:#cfd2e2; font-size:11px; }
[data-project-details] .thumb-tag{ padding:2px 8px; border-radius:999px; background:rgba(0,180,255,0.14); border:1px solid rgba(0,180,255,0.35); color:#bde8ff; font-size:10px; }
[data-project-details] .select-box{ position:absolute; top:6px; left:6px; width:20px; height:20px; border-radius:6px; border:2px solid rgba(255,255,255,0.6); background:rgba(0,0,0,0.45); color:#fff; display:none; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
[data-project-details] .gen-grid.show-select .select-box{ display:flex; }
[data-project-details] .select-box.active{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,180,255,0.25); }
[data-project-details] .fav-toggle{ position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:8px; border:1px solid rgba(255,255,255,0.32); background:rgba(0,0,0,0.75); color:#f5f6ff; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.45); z-index:2; }
[data-project-details] .fav-toggle svg{ width:14px; height:14px; fill:currentColor; }
[data-project-details] .fav-toggle.active{ color:var(--yellow); }
[data-project-details] .card-actions{ position:absolute; bottom:6px; right:6px; display:flex; gap:6px; z-index:2; }
[data-project-details] .card-actions button{ width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,0.22); background:rgba(0,0,0,0.78); color:#f5f5ff; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.45); }
[data-project-details] .gen-grid.show-select .card-actions{ display:flex; }
[data-project-details] .hover-preview{ position:fixed; width:22vw; max-width:520px; min-width:280px; background:#05070f; border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:10px; box-shadow:0 18px 48px rgba(0,0,0,0.52); opacity:0; pointer-events:none; transition:opacity .1s ease; z-index:20; display:none; }
[data-project-details] .hover-preview img{ width:100%; height:100%; object-fit:contain; display:block; }
[data-project-details] .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,0.86); display:none; align-items:center; justify-content:center; z-index:999; }
[data-project-details] .lightbox.open{ display:flex; }
[data-project-details] .lightbox-img{ max-width:78vw; max-height:78vh; border-radius:18px; border:1px solid rgba(255,255,255,0.14); background:#05070d; object-fit:contain; transition:transform .16s ease; cursor:zoom-in; box-shadow:0 22px 60px rgba(0,0,0,0.65); }
[data-project-details] .lightbox-img.zoomed{ transform:scale(1.35); cursor:zoom-out; }
[data-project-details] .lb-toolbar{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; gap:8px; background:rgba(8,10,16,0.9); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:10px 12px; backdrop-filter:blur(6px); box-shadow:0 14px 36px rgba(0,0,0,0.5); }
[data-project-details] .lb-btn{ width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:#dfe2f0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:.12s ease; }
[data-project-details] .lb-btn:hover{ border-color: rgba(0,180,255,0.6); }
[data-project-details] .lb-btn.star.active{ color: var(--yellow); }
[data-project-details] .tooltip{ position:absolute; bottom:48px; left:50%; transform:translateX(-50%); padding:6px 8px; border-radius:8px; background:#0b0e16; border:1px solid rgba(255,255,255,0.12); font-size:11px; color:#f5f5f5; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease; }
[data-project-details] .lb-btn:hover .tooltip{ opacity:1; }
[data-project-details] .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.5); color:#e5e9fa; display:grid; place-items:center; cursor:pointer; transition:.12s ease; }
[data-project-details] .lb-nav:hover{ border-color: rgba(0,180,255,0.6); }
[data-project-details] .lb-nav.prev{ left:32px; }
[data-project-details] .lb-nav.next{ right:32px; }
[data-project-details] .hero{ display:grid; grid-template-columns: 250px 1fr; gap:18px; align-items:start; }
@media (max-width: 1200px){ [data-project-details] .hero{ grid-template-columns: 1fr; } }
[data-project-details] .summary{
      padding:0;
      margin-top:26px;
    }
@media (max-width: 1200px){
      [data-project-details] .summary{ margin-top:12px; }
    }
[data-project-details] .summary-grid{ display:grid; grid-template-columns: 0.8fr 2.2fr 160px; gap:12px; width:100%; align-items:stretch; }
@media (max-width: 1600px){ [data-project-details] .summary-grid{ grid-template-columns: 0.9fr 2fr 160px; } }
@media (max-width: 1400px){ [data-project-details] .summary-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px){ [data-project-details] .summary-grid{ grid-template-columns: 1fr; } }
[data-project-details] .s-card{ border-radius:12px; border:1px solid rgba(255,255,255,0.12); background: rgba(12,14,24,0.96); padding:12px; min-height: 72px; display:flex; flex-direction:column; gap:8px; }
[data-project-details] .s-title{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:#d6d6e6; }
[data-project-details] .s-row{ display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:#b8b9ca; }
[data-project-details] .s-row strong{ color:#f0f1ff; }
[data-project-details] .s-text{ font-size:12px; color:#c2c3d6; line-height:1.5; }
[data-project-details] .s-action{ display:flex; align-items:stretch; justify-content:flex-end; }
[data-project-details] .btn-primary-lg{
      border:none; border-radius:12px; padding:12px 18px; font-size:14px; font-weight:600;
      color:#07040a; background:linear-gradient(120deg, #ff62c5, #ff008c); box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 0 26px rgba(255,0,140,0.55);
      width:100%; height:100%; cursor:pointer; white-space:normal; transition:opacity .12s ease; display:flex; align-items:center; justify-content:center; text-align:center;
    }
[data-project-details] .btn-primary-lg:hover{ opacity:.92; }
@media (max-width: 1400px){ [data-project-details] .s-action{ grid-column:1 / -1; } }