/* base */
body{font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; padding:16px; background:#f7f7fb; color:#111; transition:background .3s,color .3s}
body.dark{background:#181818; color:#eee}
header{display:flex; align-items:center; justify-content:space-between}
header h1{margin:0 0 12px 0}
#themeToggle{background:transparent;border:none;font-size:1.2rem;cursor:pointer;padding:4px}
.loader{display:flex; gap:8px; margin-bottom:12px}
.loader input{flex:1; padding:8px}
.loader button{padding:8px 12px}
.player-area{background:#000; height:360px; margin-bottom:12px; display:flex; align-items:center; justify-content:center}
#player iframe{width:100%; height:100%}
.note-editor{display:flex; gap:8px; flex-direction:column; margin-bottom:12px}
.time-inputs, .note-inputs{display:flex; gap:8px}
.time-inputs input, .note-inputs input{flex:1; padding:8px}
.time-inputs button, .note-inputs button{padding:8px 12px}
.notes-list h2{margin:0 0 8px 0}
/* grid style */
.notes-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px}
.note-card{background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.1); overflow:hidden; display:flex; flex-direction:column;transition:background .3s,color .3s}
.note-card.dark{background:#242424}
.note-card img{width:100%; height:auto; display:block}
.note-card .card-content{padding:8px; flex:1; display:flex; flex-direction:column}
.note-card .card-time{font-weight:600; margin-bottom:4px; color:#0b5fff; cursor:pointer}
.note-card .card-text{flex:1; margin-bottom:4px}
.note-card .card-footer{display:flex; justify-content:flex-end; gap:4px; font-size:0.9rem}
.share-btn{background:#eee; border:none; padding:6px 8px; border-radius:4px; cursor:pointer; margin-left:6px}
body.dark .share-btn{background:#333;color:#eee}
body.dark .loader input, body.dark .note-editor input{background:#333;color:#eee}
body.dark .loader button, body.dark .note-editor button{background:#444;color:#eee}
body.dark .note-editor input, body.dark .loader input{border:1px solid #555}