first commit

static/css/style.css

@@ -0,0 +1,62 @@
+/* Global reset */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html,body{height:100%;}
+:root{
+  --bg:#f7f9fb;
+  --card:#ffffff;
+  --muted:#707b86;
+  --accent:#0d6efd;
+  --success:#198754;
+  --danger:#dc3545;
+  --radius:8px;
+  --max-width:1100px;
+  --gap:12px;
+  --font-sans: Inter, Roboto, "Segoe UI", Arial, sans-serif;
+}
+body{
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: #12222b;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+  padding: 24px 16px;
+}
+.wrapper{max-width:var(--max-width);margin:0 auto;}
+.site-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
+.brand{display:flex;align-items:center;gap:10px}
+.brand h1{font-size:1.25rem;margin:0;font-weight:600}
+.site-actions{margin-left:auto;display:flex;gap:8px}
+.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:white;border:none;padding:8px 12px;border-radius:6px;text-decoration:none;cursor:pointer}
+.btn.secondary{background:#f0f2f5;color:var(--muted);border:1px solid #e1e6ea}
+.small-btn{padding:6px 10px;border-radius:6px}
+.tabs{display:flex;gap:8px;margin-bottom:12px}
+.tab-button{background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--muted)}
+.tab-button.active{background:var(--accent);color:#fff}
+.controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}
+.container-card{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid #e9eef2}
+.question{margin-bottom:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eef5}
+.question > div:first-child{margin-bottom:8px}
+.answers{margin-top:6px;display:flex;flex-direction:column;gap:6px}
+.answer{display:flex;align-items:center;gap:8px;padding:9px;border-radius:8px;cursor:pointer;border:1px solid transparent}
+.answer:hover{background:#f6fbff}
+.answer input{margin-right:8px}
+.answer.correct{background:#eaf6ec;border-color:rgba(25,135,84,0.15)}
+.answer.wrong{background:#fff1f2;border-color:rgba(220,53,69,0.12)}
+.feedback{margin-top:8px;font-weight:600}
+.feedback .good{color:var(--success)}
+.feedback .bad{color:var(--danger)}
+.manage-item{padding:10px;border-radius:8px;border:1px solid #f0f3f5;background:linear-gradient(180deg,#fff,#fbfdff);margin-bottom:8px}
+.hidden{display:none}
+.footer{margin-top:22px;padding:12px;text-align:center;color:var(--muted);font-size:0.9rem}
+.iframe-wrap{border-radius:8px;overflow:hidden;border:1px solid #e6eef5;background:white}
+.iframe-wrap iframe{width:100%;height:80vh;border:0;display:block}
+@media (max-width:800px){
+  .tabs{flex-wrap:wrap}
+  .site-header{flex-direction:column;align-items:flex-start;gap:8px}
+  .site-actions{margin-left:0}
+  .iframe-wrap iframe{height:60vh}
+}
+@media (max-width:420px){
+  .brand h1{font-size:1rem}
+  .btn{padding:8px}
+}