:root{
  --brand:#002147;
  --accent:#f28c28;
  --bg:#f6f8fb;
  --card:#fff;
  --text:#1b1f23;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg)}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.topbar{background:var(--brand); color:#fff; box-shadow:var(--shadow)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.logo{height:56px; width:auto; display:block}
.center{display:flex; flex-direction:column; align-items:center; gap:6px}
.title{font-weight:700; font-size:32px}
.subtitle{font-size:20px; opacity:.95}
.nav{display:flex; gap:14px; padding:8px 0 10px; overflow-x:auto}
.nav a{color:#fff; opacity:.95; text-decoration:none; padding:8px 6px; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer}
.nav a:hover{opacity:1}
.nav a.active{border-color:var(--accent); opacity:1}
main{padding:16px 0}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin:16px 0; box-shadow:var(--shadow)}
h2{margin:0 0 12px}
.help{color:var(--muted); margin:-4px 0 8px}
.warn{color:#8a4b00; background:#fff5e6; border:1px solid #ffd9b3; padding:10px; border-radius:10px; margin-bottom:10px}
.row{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.grow{flex:1}
input[type=file]{display:block; margin:8px 0}
input,select{padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; outline:none; min-width:120px}
.btn{padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; cursor:pointer}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.05)}
.file-list{margin:10px 0; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px}
.file-item{display:flex; align-items:center; justify-content:space-between; padding:8px; border-radius:10px; border:1px solid #f1f5f9; margin:6px 0; background:#fff; font-size:14px}
.file-item.selected{outline:2px solid var(--brand); background:#f0f7ff}
.actions{display:flex; gap:8px; margin-top:8px}
.toolbar{display:flex; gap:8px; margin:10px 0}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin:10px 0}
.thumb{background:#fff; border:1px solid var(--border); border-radius:12px; padding:6px; text-align:center}
.thumb.selected{outline:2px solid var(--brand); background:#fffaf2}
.footer{border-top:1px solid var(--border); background:#fff}
.foot-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.created-by {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  text-align: right;
}
.tiny{font-size:12px}
.muted{color:var(--muted)}
.tab{display:none}
.tab.active{display:block}
.dropzone{border:2px dashed var(--border); background:#fff; padding:20px; border-radius:12px; text-align:center; color:#475569; margin:10px 0}
.dropzone.drag{border-color:var(--accent); background:#fff7ec; color:#8a4b00}

.thumb.rot90 canvas{transform:rotate(90deg)}
.thumb.rot180 canvas{transform:rotate(180deg)}
.thumb.rot270 canvas{transform:rotate(270deg)}