:root { --bg:#0f1020; --card:#191a2e; --ink:#e8e8f0; --accent:#6c7bff; --line:#2a2c46; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Hiragino Sans", sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
.login { min-height:100vh; display:grid; place-items:center; }
.login-card { background:var(--card); padding:32px; border-radius:16px; display:grid; gap:12px; width:280px; }
.login-card input, .login-card button { padding:12px; border-radius:10px; border:1px solid var(--line); }
.login-card button, .sidebar a, .logout { cursor:pointer; }
.app { display:flex; min-height:100vh; }
.sidebar { width:210px; flex-shrink:0; background:var(--card); border-right:1px solid var(--line); padding:12px 10px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.sidebar .brand { display:flex; align-items:center; gap:8px; font-weight:700; padding:6px 8px 12px; }
.sidebar .brand span { font-size:15px; }
.sidebar a { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; padding:10px 12px; border-radius:10px; font-size:14px; }
.sidebar a svg { flex-shrink:0; opacity:.9; }
.sidebar a:hover { background:#20223c; }
.sidebar a.active { background:var(--accent); color:#fff; }
.sidebar .logout { margin-top:auto; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
main { flex:1; padding:20px 24px; max-width:1000px; }
@media(max-width:720px){
  .app { flex-direction:column; }
  .sidebar { width:auto; height:auto; flex-direction:row; align-items:center; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:6px; gap:2px; }
  .sidebar .brand { display:none; }
  .sidebar a { flex-direction:column; gap:3px; font-size:11px; padding:6px 9px; white-space:nowrap; }
  .sidebar .logout { margin-top:0; margin-left:auto; }
  main { padding:14px; }
}
.error { color:#ff8080; min-height:1em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; }
button.primary { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 14px; cursor:pointer; }
input, select, textarea { background:#12132a; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--line); padding:8px; text-align:left; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:8px; }
.cell { min-height:64px; border:1px solid var(--line); border-radius:8px; padding:4px; }
.cell.empty { border:none; }
.cell.click { cursor:pointer; transition:background .1s, border-color .1s; }
.cell.click:hover { border-color:var(--accent); background:#1b1d33; }
.cell.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.hint { font-size:12px; opacity:.6; margin:2px 0 6px; }
.sns { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.sns button { display:flex; align-items:center; gap:6px; background:#12132a; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:6px 10px; cursor:pointer; font-size:13px; }
.sns button:hover { border-color:var(--accent); }
.cell .d { font-size:12px; opacity:.7; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin:1px; }
.dot.x{background:#fff}.dot.youtube{background:#ff5252}.dot.instagram{background:#e15eff}.dot.tiktok{background:#25f4ee}
.badge.posted{color:#7CFC8C}.badge.planned{opacity:.7}
.mini,.del{margin-left:6px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer}
.field{display:grid;gap:4px;margin-bottom:8px}
.table-wrap{overflow-x:auto}
.vault-table th{font-size:12px;opacity:.7;white-space:nowrap}
.vault-table td{vertical-align:middle}
.vault-table .pw{font-family:ui-monospace,Menlo,monospace}
.vault-table .notes{font-size:12px;opacity:.8;max-width:200px;word-break:break-word}
.vault-table td:last-child{white-space:nowrap}
.vault-table tr.editing input{width:100%;min-width:90px}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ed-card{cursor:pointer;display:grid;gap:6px}
.ed-thumb{height:120px;border-radius:8px;background:#12132a center/cover no-repeat}
.ed-workspace{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;padding:10px 16px 12px;gap:8px}
.ed-top{flex:0 0 auto}
.ed-main{display:flex;gap:14px;align-items:stretch;flex:1;min-height:0}
.ed-stage{flex:1;display:flex;justify-content:center;min-width:0}
.ed-stage canvas{height:100%;width:auto;max-width:100%;object-fit:contain;background:#000;border-radius:8px}
.ed-inspector{flex:0 0 340px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px}
.ed-transport{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.ed-timecode{font-family:ui-monospace,Menlo,monospace;font-size:13px;opacity:.85}
.ed-timeline{position:relative;flex:0 0 auto;background:#0c0d1a;border:1px solid var(--line);border-radius:10px;overflow-x:auto;padding:8px;user-select:none;cursor:crosshair}
.ed-tlinner{position:relative}
.ed-ruler{position:relative;height:16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ed-tick{position:absolute;top:0;font-size:10px;opacity:.5;transform:translateX(-50%);font-family:ui-monospace,Menlo,monospace}
.ed-lane{position:relative;border-radius:6px;background:#14152a;margin-bottom:6px}
.ed-lane-video{height:46px}
.ed-lane-text{height:26px}
.ed-lane-bgm{height:26px;margin-bottom:0}
.ed-lane-hint{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.4}
.ed-bar{position:absolute;top:2px;bottom:2px;border-radius:5px;overflow:hidden;cursor:pointer;padding:3px 8px;box-sizing:border-box}
.ed-bar span{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.ed-bar small{display:block;font-size:10px;opacity:.65;font-family:ui-monospace,Menlo,monospace}
.ed-bar-clip{background:#3d4580;border:1px solid #4d568f}
.ed-bar-clip.sel{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}
.ed-bar-text{background:#8a6520;border:1px solid #a87c2c}
.ed-bar-bgm{background:#1f5c49;border:1px solid #2e7d64}
.ed-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff5252;pointer-events:none;z-index:2}
.ed-playhead::before{content:"";position:absolute;top:-1px;left:-5px;border:6px solid transparent;border-top:7px solid #ff5252}
.ed-addrow{margin-top:8px}
@media(max-width:900px){.ed-main{flex-direction:column}.ed-stage canvas{height:280px}}
.ed-help{position:absolute;inset:0;z-index:60;background:rgba(6,7,16,.72);display:flex;align-items:center;justify-content:center}
.ed-help-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;width:min(460px,92vw);max-height:84vh;overflow-y:auto}
.ed-help-table{width:100%;border-collapse:collapse;margin-top:10px}
.ed-help-table td{border-bottom:1px solid var(--line);padding:7px 6px;font-size:13px;vertical-align:top}
.ed-help-k{white-space:nowrap;font-family:ui-monospace,Menlo,monospace;color:var(--accent);width:42%}
.delta.up{color:#7CFC8C}.delta.down{color:#ff8080}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.board .col h3{font-size:13px;opacity:.8;margin:4px 0}
.board .col .card{padding:8px}
.board select,.board input{width:100%;margin-top:6px}
@media(max-width:800px){.board{grid-template-columns:1fr}}