*{box-sizing:border-box}
:root{
  --bg:#f7f8fa;--panel:#fff;--text:#222;--muted:#6f7782;--line:#d9dee5;
  --accent:#2f6fed;--accent-dark:#2458bd;--soft:#eef3ff;--danger:#c44343;
}
html,body{margin:0;width:100%;height:100%;font-family:"Yu Gothic","Meiryo",sans-serif;color:var(--text);background:var(--bg)}
button,input,select{font:inherit}
button{cursor:pointer}
.screen{display:none;min-height:100vh;width:100%;position:relative}
.screen.active{display:block}
#screen-home{}
.settings-wrap{position:absolute;top:22px;right:28px;width:120px;text-align:center}
.settings-btn{width:110px;height:50px;border:1px solid #bfc7d2;border-radius:12px;background:#fff;font-size:20px;font-weight:700}
.hold-note{margin-top:5px;font-size:13px;color:#7d8793}
.hold-progress{width:0;height:4px;margin:5px auto 0;background:var(--accent);border-radius:999px;transition:width .08s linear}
.home-center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:52px;padding:70px 20px}
.app-title{margin:0;font-size:42px;letter-spacing:.04em}
.start-btn{width:min(460px,70vw);height:150px;border:none;border-radius:28px;background:var(--accent);color:#fff;font-size:52px;font-weight:800;box-shadow:0 12px 30px rgba(47,111,237,.18)}
.start-btn:hover,.primary-btn:hover,.action-btn:hover{background:var(--accent-dark)}
.version{position:absolute;right:20px;bottom:14px;color:#9099a5;font-size:13px}
.topbar{height:86px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);background:#fff;position:relative;padding:0 150px}
.topbar h2{margin:0;font-size:34px}
.small-btn{position:absolute;right:24px;min-width:120px;height:48px;border:1px solid #bfc7d2;border-radius:12px;background:#fff;font-size:18px;padding:0 14px}
.content{padding:36px 42px}
.question-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1220px;margin:0 auto}
.question-card{min-height:205px;border:2px solid #d9e1ed;border-radius:22px;background:#fff;padding:28px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;box-shadow:0 6px 16px rgba(25,45,80,.05)}
.question-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.question-icon{font-size:62px}
.question-text{font-size:30px;font-weight:800;text-align:center}
.page-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:28px}
.page-nav button{height:44px;min-width:92px;border:1px solid #c6ccd6;border-radius:10px;background:#fff}
.page-nav span{font-weight:700}
.choice-content{display:flex;flex-direction:column;align-items:center;gap:28px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;width:min(1060px,92vw)}
.choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));width:min(920px,88vw)}
.choice-card{min-height:300px;border:3px solid #d7dfeb;border-radius:26px;background:#fff;padding:26px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px}
.choice-grid.three .choice-card{min-height:320px}
.choice-grid.four .choice-card{min-height:230px}
.choice-card:hover{border-color:var(--accent)}
.choice-image,.preview-image,.manage-thumb{object-fit:contain;background:#fff}
.choice-image{max-width:88%;max-height:190px;border-radius:16px}
.choice-icon{font-size:100px}
.choice-label{font-size:36px;font-weight:800;text-align:center}
.none-btn{min-width:300px;height:62px;border:1px solid #c8ced7;border-radius:16px;background:#fff;color:#4f5863;font-size:22px}
.confirm-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px 20px}
.confirm-wrap h2{font-size:42px;margin:0}
.confirm-card{width:min(440px,78vw);min-height:350px;border:3px solid #d7dfeb;border-radius:26px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px}
.primary-btn,.secondary-btn{width:min(360px,70vw);height:74px;border-radius:18px;font-size:28px;font-weight:800}
.primary-btn{border:none;background:var(--accent);color:#fff}
.secondary-btn{border:1px solid #bcc4cf;background:#fff}
.settings-layout{min-height:calc(100vh - 86px);display:grid;grid-template-columns:250px 1fr}
.settings-menu{background:#eef1f5;border-right:1px solid #d5dae1;padding:20px 14px}
.menu-btn{width:100%;height:54px;margin-bottom:10px;border:none;border-radius:10px;background:transparent;text-align:left;padding:0 16px;font-size:18px}
.menu-btn.active-menu{background:#fff;font-weight:800}
.menu-btn:disabled{opacity:.4;cursor:not-allowed}
.settings-main{padding:34px}
.settings-panel{display:none}
.settings-panel.active-panel{display:block}
.settings-main h3{margin:0 0 6px;font-size:28px}
.settings-main p{color:var(--muted);margin:0}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
.action-btn,.ghost-btn,.danger-btn{min-height:44px;border-radius:10px;padding:0 16px;font-weight:700}
.action-btn{border:none;background:var(--accent);color:#fff}
.ghost-btn{border:1px solid #c4cad3;background:#fff}
.danger-btn{border:1px solid #dfb3b3;background:#fff;color:var(--danger)}
.settings-question-list{display:grid;gap:12px}
.settings-q-item{background:#fff;border:1px solid #d6dce4;border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.manage-title{display:flex;align-items:center;gap:12px}
.manage-emoji{font-size:28px;width:38px;text-align:center}
.manage-meta{font-size:13px;color:#77808a;margin-top:3px}
.manage-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.manage-actions button{height:36px;border:1px solid #c6ccd6;border-radius:9px;background:#fff;padding:0 12px}
.manage-actions .delete{color:var(--danger)}
.editor-grid{display:grid;grid-template-columns:minmax(430px,1fr) minmax(320px,.8fr);gap:30px}
.editor-form{background:#fff;border:1px solid #d9dee5;border-radius:14px;padding:22px}
.editor-form>label{display:block;margin-bottom:18px;font-weight:700}
.editor-form input[type=text],.editor-form select{width:100%;height:44px;margin-top:8px;border:1px solid #c8ced8;border-radius:9px;padding:0 12px;background:#fff}
.check-row{display:flex!important;align-items:center;gap:10px;font-weight:600!important}
.check-row input{width:20px;height:20px}
.option-editors{display:grid;gap:14px;margin:20px 0}
.option-editor{border:1px solid #d9dee5;border-radius:12px;padding:14px}
.option-editor h5{margin:0 0 12px;font-size:17px}
.option-editor label{display:block;margin:10px 0;font-size:14px;font-weight:700}
.option-editor input[type=text]{width:100%;height:40px;margin-top:6px;border:1px solid #c8ced8;border-radius:8px;padding:0 10px}
.option-editor input[type=file]{margin-top:8px}
.img-preview-small{margin-top:8px;max-width:130px;max-height:90px;display:block;border-radius:8px;border:1px solid #ddd}
.editor-actions{display:flex;gap:12px}
.editor-preview{background:#fff;border:1px solid #d9dee5;border-radius:14px;padding:22px;min-height:400px}
.editor-preview h4{margin:0 0 18px;font-size:20px}
.preview-question{font-size:28px;font-weight:800;text-align:center;margin-bottom:22px}
.preview-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.preview-options.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.preview-card{border:2px solid #d9e1ed;border-radius:12px;min-height:150px;padding:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}
.preview-emoji{font-size:48px}
.preview-image{max-width:100%;max-height:90px;border-radius:8px}
.preview-label{font-size:18px;font-weight:800;text-align:center}
.history-list{display:grid;gap:10px}
.history-item{background:#fff;border:1px solid #d7dde5;border-radius:10px;padding:14px 16px;display:grid;grid-template-columns:170px 1fr 1fr;gap:12px}
.history-empty{padding:30px;text-align:center;color:#7a8490;background:#fff;border:1px dashed #ccd2db;border-radius:10px}

@media(max-width:1000px){
  .question-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editor-grid{grid-template-columns:1fr}
}

.settings-card{
  background:#fff;
  border:1px solid #d9dee5;
  border-radius:14px;
  padding:22px;
  display:grid;
  gap:18px;
  max-width:720px;
}
.settings-card>label:not(.check-row){
  display:grid;
  gap:8px;
  font-weight:700;
}
.settings-card select{
  height:44px;
  border:1px solid #c8ced8;
  border-radius:9px;
  padding:0 12px;
  background:#fff;
  max-width:260px;
}
.data-actions{display:flex;flex-wrap:wrap;align-items:center}
.file-action input{display:none}
.file-label-btn{display:inline-flex;align-items:center}
body.font-large .question-text{font-size:34px}
body.font-large .choice-label{font-size:42px}
body.font-large .topbar h2{font-size:38px}
body.font-xlarge .question-text{font-size:38px}
body.font-xlarge .choice-label{font-size:48px}
body.font-xlarge .topbar h2{font-size:42px}
.hide-choice-labels .choice-label{display:none}
@media(max-width:1100px){
  .question-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ---- Theme backgrounds ---- */
body{
  --bg-base: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  --bg-decoration:
    radial-gradient(circle at 12% 18%, rgba(130, 185, 255, 0.18) 0, rgba(130,185,255,0.18) 80px, transparent 81px),
    radial-gradient(circle at 86% 22%, rgba(160, 220, 255, 0.20) 0, rgba(160,220,255,0.20) 95px, transparent 96px),
    radial-gradient(circle at 22% 84%, rgba(186, 208, 255, 0.16) 0, rgba(186,208,255,0.16) 90px, transparent 91px),
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.34));
  --screen-overlay: rgba(255,255,255,0.35);
  --panel-strong: rgba(255,255,255,0.92);
  --panel-soft: rgba(255,255,255,0.86);
  background: var(--bg-base);
}

body[data-theme="softblue"]{
  --bg-base: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  --bg-decoration:
    radial-gradient(circle at 12% 18%, rgba(130, 185, 255, 0.18) 0, rgba(130,185,255,0.18) 80px, transparent 81px),
    radial-gradient(circle at 86% 22%, rgba(160, 220, 255, 0.20) 0, rgba(160,220,255,0.20) 95px, transparent 96px),
    radial-gradient(circle at 22% 84%, rgba(186, 208, 255, 0.16) 0, rgba(186,208,255,0.16) 90px, transparent 91px),
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.34));
}
body[data-theme="mint"]{
  --bg-base: linear-gradient(180deg, #f7fffb 0%, #ecfff7 100%);
  --bg-decoration:
    radial-gradient(circle at 14% 20%, rgba(142, 233, 206, 0.20) 0, rgba(142,233,206,0.20) 84px, transparent 85px),
    radial-gradient(circle at 84% 26%, rgba(181, 244, 210, 0.18) 0, rgba(181,244,210,0.18) 96px, transparent 97px),
    radial-gradient(circle at 24% 82%, rgba(160, 219, 190, 0.16) 0, rgba(160,219,190,0.16) 88px, transparent 89px),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.35));
}
body[data-theme="peach"]{
  --bg-base: linear-gradient(180deg, #fffaf6 0%, #fff2ea 100%);
  --bg-decoration:
    radial-gradient(circle at 14% 20%, rgba(255, 205, 173, 0.22) 0, rgba(255,205,173,0.22) 84px, transparent 85px),
    radial-gradient(circle at 84% 24%, rgba(255, 226, 183, 0.20) 0, rgba(255,226,183,0.20) 96px, transparent 97px),
    radial-gradient(circle at 22% 84%, rgba(255, 196, 211, 0.16) 0, rgba(255,196,211,0.16) 90px, transparent 91px),
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.36));
}
body[data-theme="lavender"]{
  --bg-base: linear-gradient(180deg, #fbf9ff 0%, #f3efff 100%);
  --bg-decoration:
    radial-gradient(circle at 12% 18%, rgba(201, 183, 255, 0.22) 0, rgba(201,183,255,0.22) 80px, transparent 81px),
    radial-gradient(circle at 84% 26%, rgba(225, 198, 255, 0.18) 0, rgba(225,198,255,0.18) 96px, transparent 97px),
    radial-gradient(circle at 24% 84%, rgba(186, 203, 255, 0.16) 0, rgba(186,203,255,0.16) 90px, transparent 91px),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.35));
}

.screen{
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}
.screen::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--custom-bg-image, none), var(--bg-decoration);
  background-size: cover, auto;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  opacity: 1;
  pointer-events:none;
}
.screen::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--screen-overlay);
  pointer-events:none;
}
.screen > *{
  position:relative;
  z-index:1;
}

#screen-home{
  background: var(--bg-base) !important;
}

.topbar,
.editor-form,
.editor-preview,
.settings-card,
.settings-q-item,
.history-item,
.confirm-card,
.question-card,
.choice-card{
  background: var(--panel-strong);
  backdrop-filter: blur(4px);
}

.settings-menu{
  background: rgba(238,241,245,0.82);
  backdrop-filter: blur(6px);
}
.page-nav button,
.none-btn,
.secondary-btn,
.small-btn,
.settings-btn,
.manage-actions button,
.ghost-btn,
.danger-btn{
  background: var(--panel-soft);
  backdrop-filter: blur(4px);
}

.inline-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.stacked-file-action{
  display:grid !important;
  gap:10px;
  font-weight:700;
}
.bg-preview-box{
  display:grid;
  gap:8px;
}
.bg-preview-label{
  font-size:14px;
  color:#6e7782;
  font-weight:700;
}
.bg-preview{
  width:100%;
  min-height:140px;
  border-radius:14px;
  border:1px solid #d7dde5;
  background-size: cover, auto;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  position:relative;
  overflow:hidden;
}
.bg-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.28);
}


/* ===== Ver.0.5 viewport/layout fixes ===== */
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
}

.screen{
  width:100%;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
}

#screen-settings{
  overflow:auto;
}

#screen-settings .settings-layout{
  min-height:calc(100vh - 86px);
}

.settings-wrap{
  position:absolute !important;
  top:20px !important;
  right:24px !important;
  width:124px !important;
  z-index:20 !important;
}

.settings-btn{
  width:112px !important;
  height:50px !important;
}

.hold-note{
  width:112px;
  text-align:center;
  margin:5px 0 0 0 !important;
  line-height:1.2;
}

.hold-progress{
  width:0;
  max-width:112px;
}

.home-center{
  height:100vh;
  min-height:100vh;
  padding:70px 24px 34px;
  gap:38px;
}

.content{
  height:calc(100vh - 86px);
  min-height:0;
  overflow:hidden;
  padding:22px 34px 20px;
}

#screen-list .content{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:14px;
}

.question-grid{
  width:min(1220px,100%);
  height:100%;
  min-height:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:18px;
  align-content:stretch;
}

.question-card{
  min-height:0 !important;
  height:100%;
  padding:14px 16px;
  gap:10px;
}

.question-icon{
  font-size:clamp(38px,5.5vh,58px);
}

.question-text{
  font-size:clamp(22px,3.3vh,30px);
}

.page-nav{
  margin-top:0 !important;
  min-height:44px;
}

.choice-content{
  height:calc(100vh - 86px);
  min-height:0;
  overflow:hidden;
  padding:18px 30px 18px !important;
  gap:16px !important;
  justify-content:center;
}

.choice-grid{
  width:min(1060px,92vw);
  max-height:calc(100vh - 190px);
  min-height:0;
  gap:18px;
  align-items:stretch;
}

.choice-grid:not(.three):not(.four){
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:1fr;
}

.choice-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:1fr;
}

.choice-grid.four{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  width:min(920px,88vw);
}

.choice-card,
.choice-grid.three .choice-card,
.choice-grid.four .choice-card{
  min-height:0 !important;
  height:100%;
  padding:16px;
  gap:14px;
}

.choice-image{
  max-height:min(24vh,170px);
}

.choice-icon{
  font-size:clamp(64px,12vh,104px);
}

.choice-label{
  font-size:clamp(28px,4.8vh,38px);
}

.none-btn{
  height:54px;
  min-height:54px;
  flex:0 0 auto;
}

.confirm-wrap{
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  padding:22px 20px;
  gap:18px;
}

.confirm-wrap h2{
  font-size:clamp(32px,5vh,42px);
}

.confirm-card{
  width:min(420px,74vw);
  height:min(48vh,330px);
  min-height:0;
  padding:20px;
}

.primary-btn,.secondary-btn{
  height:62px;
  min-height:62px;
  font-size:26px;
}

.version{
  bottom:10px;
}

@media(max-width:1100px){
  .question-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
}

.manage-actions button[data-act="toggle"]{
  min-width:96px;
  font-weight:700;
}

body[data-theme="none"]{
  --bg-base: linear-gradient(180deg,#ffffff 0%,#ffffff 100%);
  --bg-decoration: none;
  --screen-overlay: rgba(255,255,255,0);
}

.panel-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.preset-question-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.preset-card{
  background:#fff;
  border:1px solid #d6dce4;
  border-radius:14px;
  padding:16px;
  display:grid;
  gap:10px;
}
.preset-card h4{
  margin:0;
  font-size:20px;
}
.preset-meta{
  color:#77808a;
  font-size:13px;
}
.preset-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.preset-chip{
  background:#f1f4f8;
  border-radius:999px;
  padding:5px 9px;
  font-size:13px;
}
.preset-add-btn{
  justify-self:end;
  min-width:110px;
  height:40px;
  border:none;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
@media(max-width:900px){
  .preset-question-list{grid-template-columns:1fr}
}

.image-source-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  width:100%;
  margin-top:8px;
}
.image-source-btn{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  height:44px;
  margin:0;
  padding:0 14px;
  border:1px solid #bfc7d2;
  border-radius:9px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1;
  color:inherit;
  box-sizing:border-box;
  cursor:pointer;
  white-space:nowrap;
}
.image-source-btn:hover{
  background:#f6f8fb;
}
.hidden-opt-image{
  display:none !important;
}
.image-preview-wrap{
  min-height:98px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.img-preview-small{
  max-width:150px !important;
  max-height:96px !important;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#fff;
}
.library-category-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.library-category-tabs button{
  min-height:38px;
  border:1px solid #c7ced8;
  border-radius:999px;
  background:#fff;
  padding:0 14px;
}
.library-category-tabs button.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.image-library-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.library-image-card{
  border:1px solid #d5dce5;
  border-radius:14px;
  background:#fff;
  padding:12px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.library-image-card img{
  width:86px;
  height:86px;
  object-fit:contain;
}
.library-image-card span{
  font-size:14px;
  font-weight:700;
  text-align:center;
}
@media(max-width:1000px){
  .image-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.editor-icon-preview{
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  background:#fff;
  border:1px solid #e0e4ea;
  border-radius:12px;
}

.library-search-input{
  width:min(420px,100%);
  height:42px;
  border:1px solid #c8ced8;
  border-radius:10px;
  padding:0 12px;
  margin-bottom:18px;
  background:#fff;
}

.preset-category-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.preset-category-tabs button{
  min-height:38px;
  border:1px solid #c7ced8;
  border-radius:999px;
  background:#fff;
  padding:0 14px;
}
.preset-category-tabs button.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.preset-search-input{
  width:min(420px,100%);
  height:42px;
  border:1px solid #c8ced8;
  border-radius:10px;
  padding:0 12px;
  margin-bottom:18px;
  background:#fff;
}

.guide-card{
  background:#fff;
  border:1px solid #dce2ea;
  border-radius:14px;
  padding:18px;
  margin-bottom:14px;
}
.guide-card h4{
  margin:0 0 8px;
  font-size:18px;
}
.guide-card p,
.guide-card li{
  line-height:1.7;
}
.warning-card{
  border-color:#e8c77b;
  background:#fffaf0;
}

.first-run-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,30,45,.48);
}
.first-run-overlay.hidden{display:none}
.first-run-card{
  width:min(560px,100%);
  background:#fff;
  border-radius:20px;
  padding:28px;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  text-align:center;
}
.first-run-card h2{margin-top:0}
.first-run-points{
  display:grid;
  gap:10px;
  text-align:left;
  margin:20px 0;
  background:#f6f8fb;
  border-radius:14px;
  padding:16px;
}

/* タブレット最終調整 */
@media (max-width: 1100px){
  .question-grid{
    gap:12px !important;
  }
  .question-card{
    min-width:0;
  }
  .preview-card{
    min-width:0;
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .question-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:720px){
  .image-source-actions{
    grid-template-columns:1fr;
  }
}


/* ===== 体験版専用 ===== */
body{}
.trial-badge{
  display:inline-block;
  padding:7px 16px;
  margin-bottom:10px;
  border-radius:999px;
  background:#fff3bf;
  border:2px solid #e3b341;
  color:#6e4d00;
  font-weight:800;
  letter-spacing:.08em;
}
.trial-lead{
  margin:10px 0 0;
  color:#5f6b76;
  font-weight:700;
}
.trial-locked{
  position:relative;
}
.trial-lock-overlay{
  margin:18px 0;
  padding:26px 22px;
  border:2px dashed #d5b45b;
  border-radius:14px;
  background:#fffaf0;
  text-align:center;
}
.trial-lock-overlay strong{
  display:block;
  margin-bottom:8px;
  font-size:1.08em;
}
.trial-lock-overlay a{
  display:inline-block;
  margin-top:10px;
  padding:9px 15px;
  border-radius:9px;
  background:#fff;
  border:2px solid #d6a43b;
  color:#6a4b00;
  text-decoration:none;
  font-weight:800;
}
@media(max-width:700px){
  body{}