/* AI社員 SaaS 共通スタイル（機能優先の暫定デザイン。ブランドデザインは次フェーズ） */
:root{--bg:#f3f7fd;--card:#fff;--text:#1f2937;--muted:#5b6574;--line:#dbe3ee;--blue:#1f5fbf;--blue-d:#174a96;--green:#16855a;--red:#b42318;--orange:#9a5c05;--radius:14px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:"Segoe UI","Yu Gothic UI","Hiragino Sans","Noto Sans JP",sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.7}
a{color:var(--blue)}
.wrap{max-width:980px;margin:0 auto;padding:24px 16px 80px}
.narrow{max-width:520px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;margin:8px 0 18px}
.brand .icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#5b9bff,#1f5fbf);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900;letter-spacing:.02em;box-shadow:0 6px 16px rgba(31,95,191,.28)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 6px 20px rgba(15,23,42,.05)}
h1{font-size:26px;margin:0 0 8px}h2{font-size:21px;margin:0 0 10px}h3{font-size:18px;margin:18px 0 8px}
.lead{color:var(--muted);margin:0 0 18px}
label{display:block;font-weight:800;margin:16px 0 6px}
.hint{color:var(--muted);font-size:14px;margin-top:4px}
input,select,textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;border:1.5px solid #c7d2e1;border-radius:10px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:3px solid #bfdbfe;border-color:var(--blue)}
textarea{min-height:160px;line-height:1.7}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 22px;font:inherit;font-size:17px;font-weight:900;cursor:pointer;background:var(--blue);color:#fff;min-height:52px;text-decoration:none}
.btn:hover{background:var(--blue-d)}.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.big{width:100%;font-size:19px;min-height:60px}
.btn.green{background:var(--green)}.btn.light{background:#e8eef7;color:var(--text)}.btn.red{background:#fde8e8;color:var(--red)}
.btn.small{min-height:40px;padding:8px 14px;font-size:15px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row>*{flex:1 1 auto}
.topnav{flex:1 1 auto;justify-content:flex-end}.topnav>*{flex:0 0 auto}
.msg{display:none;margin:14px 0;padding:14px 16px;border-radius:12px;font-weight:700}
.msg.show{display:block}.msg.ok{background:#ecfdf3;border:1px solid #a7f3c8;color:#065f3c}.msg.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}.msg.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600;margin:14px 0}.check input{width:24px;height:24px;flex:0 0 auto;margin-top:2px}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:800;background:#e8eef7}
.pill.ok{background:#dcfce7;color:#065f3c}.pill.warn{background:#fef3c7;color:#92400e}.pill.ng{background:#fee2e2;color:#991b1b}
table{width:100%;border-collapse:collapse;font-size:15px}th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--muted);font-size:14px}
.table-wrap{overflow-x:auto}
.demo-bar{background:#7c3aed;color:#fff;text-align:center;font-weight:800;padding:8px 12px;font-size:14px}
/* ステップ */
.steps{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.step-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:800;cursor:pointer}
.step-list li .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e8eef7;font-size:16px;flex:0 0 auto}
.step-list li.done .num{background:var(--green);color:#fff}
.step-list li.current{border:2px solid var(--blue);background:#eff6ff}
.step-list li.current .num{background:var(--blue);color:#fff}
.progress{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:6px 0 18px}.progress>div{height:100%;background:var(--green);width:0;transition:width .3s}
.confirm-box{margin-top:16px;padding:16px;border:2px dashed #f59e0b;background:#fffbeb;border-radius:12px}
.lock{padding:12px 14px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0;font-weight:800;color:#065f3c;margin-bottom:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font:inherit;font-weight:800;cursor:pointer}.tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.meter{height:16px;border-radius:999px;background:#e5e7eb;overflow:hidden}.meter>div{height:100%;background:var(--green)}.meter.warn>div{background:#f59e0b}.meter.over>div{background:#dc2626}
.kv{display:grid;grid-template-columns:200px 1fr;gap:8px 16px}.kv dt{color:var(--muted);font-weight:700}.kv dd{margin:0;font-weight:800}
.token-box{font-family:Consolas,monospace;font-size:15px;word-break:break-all;background:#0f172a;color:#e2e8f0;padding:12px;border-radius:10px}
@media(max-width:800px){.steps{grid-template-columns:1fr}.step-list{grid-template-columns:repeat(3,1fr)}.step-list li{flex-direction:column;text-align:center;font-size:13px;padding:10px 6px;gap:4px}.kv{grid-template-columns:1fr}.card{padding:18px}h1{font-size:23px}}