.clips-page{padding:clamp(2rem,5vw,4.75rem) 0 5rem;background:linear-gradient(180deg,var(--color-neutral-250),var(--color-neutral-100) 28rem);min-height:60vh}
.clips-shell{max-width:1120px;margin:auto}
.clips-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ff9aa7;margin-bottom:.65rem}
.clips-page-head{margin-bottom:1.5rem}
.clips-page-head h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:-.04em;color:var(--color-neutral-900)}
.clips-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr);gap:1.25rem;align-items:start}
.clips-card{background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:1rem;padding:clamp(1.1rem,3vw,1.65rem);box-shadow:0 .4rem 1.4rem rgb(20 24 40/.06)}
.clips-card h2{font-size:1.35rem;line-height:1.1;color:var(--color-neutral-900)}
.clips-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:start;margin-bottom:1.25rem}
.clips-card-sub{font-size:.83rem;color:var(--color-neutral-600);margin-top:.32rem}
.clips-step{display:flex;align-items:center;gap:.4rem;color:var(--color-primary-400);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.clips-step:before{content:"01";display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--color-primary-100);font-size:.65rem}
.clips-form{display:grid;gap:1rem}
.clips-field{display:grid;gap:.38rem}
.clips-field label{font-size:.78rem;font-weight:800;color:var(--color-neutral-800);letter-spacing:.04em}
.clips-field input,.clips-field textarea,.clips-search{width:100%;border:1px solid var(--color-neutral-300);border-radius:.65rem;padding:.78rem .85rem;background:var(--color-neutral-250);color:var(--color-neutral-900);font:inherit;outline:none}
.clips-field textarea{min-height:6rem;resize:vertical}
.clips-field input:focus,.clips-field textarea:focus,.clips-search:focus{border-color:var(--color-primary-400);box-shadow:0 0 0 3px rgb(229 28 53/.12)}
.clips-field input[aria-invalid=true]{border-color:var(--color-primary-400)}
.clips-hint{font-size:.73rem;color:var(--color-neutral-600)}
.clips-player-box{border:1px solid var(--color-neutral-300);border-radius:.7rem;background:var(--color-neutral-250);padding:.6rem}
.clips-search{padding:.62rem .7rem;background:var(--color-neutral-100);font-size:.9rem}
.clips-selected{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 0}
.clips-tag{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .55rem;border-radius:999px;background:#272d45;color:#fff;font-size:.75rem;font-weight:700}
.clips-tag button{border:0;background:none;color:#fff;cursor:pointer;font-size:1rem;line-height:1;padding:0}
.clips-options{display:grid;max-height:10rem;overflow:auto;margin-top:.5rem}
.clips-option{display:flex;align-items:center;gap:.55rem;padding:.55rem .45rem;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:.4rem}
.clips-option:hover{background:var(--color-primary-100)}
.clips-option.is-selected{color:var(--color-primary-600);font-weight:700}
.clips-option:before{content:"+";display:grid;place-items:center;width:1.4rem;height:1.4rem;border:1px solid var(--color-neutral-300);border-radius:.35rem;color:var(--color-neutral-600)}
.clips-option.is-selected:before{content:"✓";background:var(--color-primary-400);border-color:var(--color-primary-400);color:#fff}
.clips-form-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.2rem}
.clips-submit{border:0;border-radius:999px;padding:.82rem 1.35rem;background:var(--color-primary-400);color:#fff;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 .5rem 1rem rgb(229 28 53/.2)}
.clips-submit:hover:not(:disabled){background:var(--color-primary-600);transform:translateY(-1px)}
.clips-submit:disabled{opacity:.55;cursor:not-allowed}
.clips-status{font-size:.82rem;font-weight:700}.clips-status.error{color:var(--color-primary-600)}.clips-status.success{color:#1a7f37}
.clips-history{display:grid;gap:.7rem}.clips-history-empty{text-align:center;padding:1.8rem .8rem;color:var(--color-neutral-600);font-size:.9rem;border:1px dashed var(--color-neutral-300);border-radius:.7rem}
.clip-item{padding:.9rem;border:1px solid var(--color-neutral-300);border-radius:.7rem;background:var(--color-neutral-250)}
.clip-item-top{display:flex;justify-content:space-between;gap:.7rem;align-items:start}.clip-title{font-weight:800;color:var(--color-neutral-900);line-height:1.25}.clip-platform{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary-400)}
.clip-date{font-size:.72rem;color:var(--color-neutral-600);margin-top:.3rem}.clip-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-primary-400);font-size:.75rem;margin-top:.55rem;text-decoration:none}.clip-url:hover{text-decoration:underline}
.clip-credits{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}.clip-credit{padding:.3rem .5rem;border-radius:999px;background:var(--color-neutral-100);font-size:.7rem;font-weight:700}.clip-credit[data-status=approved]{color:#1a7f37}.clip-credit[data-status=rejected]{color:var(--color-primary-600)}.clip-credit[data-status=pending]{color:#8a6500}
.clips-signin{text-align:center;padding:3rem 1rem;max-width:34rem;margin:2rem auto}.clips-signin h1{font-size:clamp(2rem,5vw,3rem);line-height:1;margin-bottom:.8rem}.clips-signin p{color:var(--color-neutral-600);margin:0 auto 1.4rem}.clips-signin a{display:inline-flex;border-radius:999px;padding:.8rem 1.3rem;background:var(--color-primary-400);color:#fff;text-decoration:none;font-weight:800}
.clips-alert{padding:.8rem 1rem;border-radius:.65rem;background:var(--color-primary-100);color:var(--color-primary-600);font-size:.86rem;font-weight:700;margin-bottom:1rem}.clips-skeleton{display:grid;gap:1rem}.clips-skeleton span{height:5rem;border-radius:1rem;background:linear-gradient(90deg,var(--color-neutral-250),var(--color-neutral-200),var(--color-neutral-250));background-size:200% 100%;animation:clip-shimmer 1.2s infinite}@keyframes clip-shimmer{to{background-position:-200% 0}}
@media(max-width:720px){.clips-page{padding-top:1.2rem}.clips-grid{grid-template-columns:1fr}.clips-card-head{margin-bottom:1rem}.clips-submit{width:100%}.clips-form-actions{display:grid}.clips-status{text-align:center}}
html.dark-mode .clips-page{background:linear-gradient(180deg,#17181e,#111217 30rem)}html.dark-mode .clips-card{background:#1c1d22;border-color:rgb(255 255 255/.1)}html.dark-mode .clips-field input,html.dark-mode .clips-field textarea,html.dark-mode .clips-player-box,html.dark-mode .clip-item{background:#25262d;border-color:rgb(255 255 255/.12)}html.dark-mode .clips-search{background:#1c1d22}html.dark-mode .clips-option:hover{background:rgb(229 28 53/.16)}