/* ============================================================
   LULYGraphics — video-inspired usability upgrade
   Adds a creator workflow bento, project spotlight and copy UX.
   Intentionally uses the existing LULY dark/orange identity.
   ============================================================ */

.luly-creator-bento{position:relative;overflow:hidden}
.luly-creator-bento:before{content:"";position:absolute;inset:8% -12% auto auto;width:34rem;height:34rem;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.12),transparent 68%);filter:blur(18px);pointer-events:none}
.creator-bento-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:34px}
.creator-bento-card{position:relative;min-height:210px;padding:26px;border:1px solid rgba(255,255,255,.085);border-radius:28px;background:linear-gradient(145deg,rgba(20,20,20,.96),rgba(8,8,8,.98));box-shadow:0 22px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden;isolation:isolate;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.creator-bento-card:hover{transform:translateY(-5px);border-color:rgba(255,106,0,.28);box-shadow:0 28px 70px rgba(0,0,0,.33),0 0 38px rgba(255,106,0,.06)}
.creator-bento-card:after{content:"";position:absolute;width:170px;height:170px;right:-55px;bottom:-70px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.17),transparent 68%);z-index:-1}
.creator-bento-card h3{font-size:clamp(1.15rem,1.8vw,1.55rem);margin:12px 0 8px;font-weight:800;letter-spacing:-.035em}
.creator-bento-card p{margin:0;color:#a9a9a9;line-height:1.7;max-width:48ch}
.creator-bento-card .bento-kicker{display:inline-flex;align-items:center;gap:8px;color:#ff8b2a;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.creator-bento-card .bento-kicker:before{content:"";width:18px;height:1px;background:#ff6a00;box-shadow:0 0 9px rgba(255,106,0,.55)}
.creator-bento-card.card-brief{grid-column:span 7;min-height:330px}
.creator-bento-card.card-visual{grid-column:span 5;min-height:330px;padding:0}
.creator-bento-card.card-flow{grid-column:span 5}
.creator-bento-card.card-portal{grid-column:span 4}
.creator-bento-card.card-files{grid-column:span 3}
.bento-brief-ui{margin-top:24px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:#0a0a0a;padding:18px;display:grid;gap:11px}
.bento-brief-top{display:flex;gap:8px}.bento-brief-top i{width:8px;height:8px;border-radius:50%;background:#292929}.bento-brief-top i:first-child{background:#ff6a00;box-shadow:0 0 10px rgba(255,106,0,.55)}
.bento-input{height:38px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.015));position:relative;overflow:hidden}.bento-input:after{content:"";position:absolute;left:12px;top:50%;height:5px;width:var(--line,62%);border-radius:20px;background:#282828;transform:translateY(-50%)}
.bento-brief-actions{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.bento-brief-actions span{font-size:.72rem;color:#6e6e6e}.bento-brief-actions b{font-size:.75rem;color:#ff8b2a;border:1px solid rgba(255,106,0,.25);background:rgba(255,106,0,.07);padding:7px 10px;border-radius:999px}
.bento-visual-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease}.creator-bento-card.card-visual:hover .bento-visual-img{transform:scale(1.045);filter:saturate(1.05) contrast(1.06)}
.bento-visual-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.88) 100%)}
.bento-visual-copy{position:absolute;left:25px;right:25px;bottom:24px}.bento-visual-copy h3{margin-bottom:4px}.bento-visual-copy p{color:#d0d0d0;font-size:.9rem}
.bento-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:25px}.bento-flow span{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.075);background:#0b0b0b;color:#bdbdbd;font-size:.78rem;font-weight:700}.bento-flow i{width:18px;height:1px;background:linear-gradient(90deg,#444,#ff6a00);position:relative}.bento-flow i:after{content:"";position:absolute;right:-1px;top:-3px;border-left:5px solid #ff6a00;border-top:3px solid transparent;border-bottom:3px solid transparent}
.bento-status-list{margin-top:22px;display:grid;gap:10px}.bento-status{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#0a0a0a;border:1px solid rgba(255,255,255,.06);font-size:.76rem;color:#aaa}.bento-status b{color:#ddd}.bento-status.active{border-color:rgba(255,106,0,.24);background:rgba(255,106,0,.045)}.bento-status.active span{color:#ff8b2a}
.bento-file-stack{position:relative;height:90px;margin-top:18px}.bento-file{position:absolute;left:4px;right:4px;height:64px;border-radius:15px;border:1px solid rgba(255,255,255,.08);background:#0a0a0a;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 12px 26px rgba(0,0,0,.18)}.bento-file:nth-child(1){transform:translateY(0) rotate(-2deg)}.bento-file:nth-child(2){transform:translateY(20px) rotate(2deg);left:15px;right:-3px}.bento-file strong{font-size:.8rem}.bento-file span{font-size:.66rem;color:#ff8b2a;text-transform:uppercase;letter-spacing:.08em}

.luly-project-spotlight{position:relative;overflow:hidden}
.project-spotlight-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);gap:28px;margin-top:32px;align-items:stretch}
.project-spotlight-media{position:relative;min-height:510px;border-radius:30px;border:1px solid rgba(255,255,255,.08);background:#080808;overflow:hidden;box-shadow:0 26px 65px rgba(0,0,0,.32);perspective:1100px}
.project-spotlight-media:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 210deg,transparent,rgba(255,106,0,.11),transparent 29%);animation:lulySpotGlow 12s linear infinite;z-index:0}
@keyframes lulySpotGlow{to{transform:rotate(360deg)}}
.project-spotlight-frame{position:absolute;inset:20px;border-radius:22px;overflow:hidden;background:#050505;transform:rotateX(var(--spot-rx,0deg)) rotateY(var(--spot-ry,0deg));transition:transform .18s ease-out;z-index:1;box-shadow:0 30px 75px rgba(0,0,0,.45)}
.project-spotlight-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .22s ease,transform .55s ease}.project-spotlight-frame.is-changing img{opacity:.18;transform:scale(1.035)}
.project-spotlight-badge{position:absolute;z-index:2;left:38px;top:38px;padding:8px 12px;border:1px solid rgba(255,106,0,.32);background:rgba(8,8,8,.78);backdrop-filter:blur(9px);border-radius:999px;color:#ff9a48;font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800}
.project-spotlight-panel{border-radius:30px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#111,#080808);padding:30px;display:flex;flex-direction:column;min-height:510px}
.spotlight-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.spotlight-tab{appearance:none;border:1px solid rgba(255,255,255,.09);background:#0a0a0a;color:#8f8f8f;padding:9px 12px;border-radius:999px;font-size:.72rem;font-weight:800;transition:.2s ease}.spotlight-tab:hover,.spotlight-tab.active{border-color:rgba(255,106,0,.36);color:#fff;background:rgba(255,106,0,.09);box-shadow:0 0 22px rgba(255,106,0,.07)}
.project-spotlight-panel h3{font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.03;letter-spacing:-.05em;font-weight:900;margin:4px 0 12px}.spotlight-description{color:#aaa;line-height:1.75;margin-bottom:22px}
.spotlight-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}.spotlight-meta div{padding:13px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.065);background:#0a0a0a}.spotlight-meta span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.11em;color:#686868;margin-bottom:5px}.spotlight-meta strong{font-size:.82rem;color:#dedede}
.spotlight-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.spotlight-tags span{border-radius:999px;background:rgba(255,106,0,.06);border:1px solid rgba(255,106,0,.16);padding:7px 10px;color:#c8c8c8;font-size:.68rem;font-weight:700}
.spotlight-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}.spotlight-actions .btn{flex:1 1 160px}

.copy-inline{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.luly-copy-btn{appearance:none;border:1px solid rgba(255,106,0,.22);background:rgba(255,106,0,.06);color:#ff9a48;border-radius:999px;padding:6px 10px;font-size:.68rem;font-weight:800;letter-spacing:.03em;transition:.2s ease}.luly-copy-btn:hover{background:rgba(255,106,0,.12);border-color:rgba(255,106,0,.4);color:#fff}.luly-copy-btn.copied{background:rgba(67,170,95,.10);border-color:rgba(67,170,95,.35);color:#8fe1a5}

@media (max-width:991.98px){.creator-bento-card.card-brief,.creator-bento-card.card-visual{grid-column:span 12}.creator-bento-card.card-flow{grid-column:span 6}.creator-bento-card.card-portal{grid-column:span 6}.creator-bento-card.card-files{grid-column:span 12}.project-spotlight-shell{grid-template-columns:1fr}.project-spotlight-media,.project-spotlight-panel{min-height:auto}.project-spotlight-media{aspect-ratio:16/9}}
@media (max-width:575.98px){.creator-bento-grid{gap:12px}.creator-bento-card,.creator-bento-card.card-flow,.creator-bento-card.card-portal,.creator-bento-card.card-files{grid-column:span 12;border-radius:22px;padding:21px}.creator-bento-card.card-visual{min-height:290px;padding:0}.project-spotlight-media{border-radius:22px}.project-spotlight-frame{inset:10px;border-radius:16px}.project-spotlight-badge{left:22px;top:22px}.project-spotlight-panel{padding:22px;border-radius:22px}.spotlight-meta{grid-template-columns:1fr}.spotlight-actions{display:grid}.spotlight-actions .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.project-spotlight-media:before{animation:none}.creator-bento-card,.bento-visual-img,.project-spotlight-frame,.project-spotlight-frame img{transition:none}}