:root{--paper: #f8f9fb;--surface: #fff;--text: #111827;--muted: #64748b;--line: #dfe4ed;--primary: #635bff;--soft: #f1efff;--blue: #3458ff;--green: #087c61;--greenbg: #e9f8f0;--amber: #996209;--amberbg: #fff6df;--red: #b42332;--redbg: #fff0f0;--font: Arial, "Noto Sans Thai", Tahoma, sans-serif;--radius: 13px;--shadow: 0 2px 8px #15243b08}*{box-sizing:border-box}html,body{margin:0;overflow-x:clip;font:14px/1.65 var(--font);color:var(--text);background:var(--paper)}a{color:var(--primary);text-decoration:none}button,input,textarea,select{font:inherit}button,a.btn{display:inline-flex;justify-content:center;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--line);border-radius:23px;padding:8px 17px;background:var(--surface);color:var(--text);cursor:pointer;min-height:40px}button:hover,a.btn:hover{background:var(--soft)}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.primary,a.primary{background:var(--primary);color:var(--surface);border-color:var(--primary)}.primary:hover{background:var(--blue)}.small{font-size:12px;padding:5px 12px;min-height:31px}.badge{display:inline-flex;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600;background:var(--soft);color:var(--primary)}.green{color:var(--green);background:var(--greenbg)}.amber{color:var(--amber);background:var(--amberbg)}.red{color:var(--red);background:var(--redbg)}.gray{color:var(--muted);background:var(--paper)}header{height:76px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-size:25px;letter-spacing:-1px;font-weight:700}.brand img{width:36px;height:36px}.subbrand{font-size:11px;line-height:1.1;letter-spacing:0;font-weight:400;color:var(--muted)}nav{display:flex;gap:24px;align-items:center;font-size:13px}nav a{color:var(--muted)}.designbar{background:var(--soft);color:var(--primary);font-size:11px;padding:6px 32px;display:flex;justify-content:space-between}.wrap{max-width:1100px;margin:0 auto;padding:30px 26px}.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}h1{font-size:28px;line-height:1.35;margin:4px 0 8px;letter-spacing:-.6px;overflow-wrap:anywhere}h2{font-size:18px;line-height:1.45;margin:0 0 14px}h3{font-size:15px;margin:0 0 8px}p{margin:6px 0 12px}.muted,small{color:var(--muted)}.eyebrow{font-size:12px;color:var(--primary);font-weight:600}.grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);margin-bottom:18px}.card.soft{background:var(--soft);border-color:var(--soft)}.compact{padding:17px}.steps{display:flex;border-bottom:1px solid var(--line);padding:0 0 20px;margin:0 0 26px;gap:0}.step{flex:1;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:8px}.step i{font-style:normal;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface)}.step.active{color:var(--primary);font-weight:700}.step.active i{background:var(--primary);color:var(--surface)}.step.done i{background:var(--greenbg);color:var(--green);border-color:var(--greenbg)}label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.field{margin-bottom:17px}.field small{display:block;margin-top:4px;font-size:11px}input,textarea,select,.input{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);min-width:0}textarea{height:100px;resize:none}.upload{padding:25px;text-align:center;border:1px dashed var(--line);border-radius:10px;background:var(--paper)}.upload b{display:block}.choice{border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 0 12px;display:flex;gap:12px;align-items:flex-start}.choice.selected{border-color:var(--primary);background:var(--soft)}.radio{width:17px;height:17px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;margin-top:4px;background:var(--surface)}.selected .radio{border:5px solid var(--primary)}.check{width:17px;height:17px;border-radius:4px;background:var(--primary);color:var(--surface);font-size:12px;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;margin-top:4px}.choice h3{margin:0}.actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.kv{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:9px 0;font-size:13px}.kv:last-child{border:0}.note{padding:12px 14px;border-radius:9px;background:var(--soft);font-size:13px}.note.warn{background:var(--amberbg);color:var(--amber)}.note.good{background:var(--greenbg);color:var(--green)}.list{padding-left:20px;margin:10px 0}.list li{margin-bottom:7px}.side p{font-size:12px}.side h2{font-size:15px}.price{font-size:26px;font-weight:700;color:var(--text)}.timeline{padding:0;list-style:none}.timeline li{position:relative;padding:0 0 22px 32px}.timeline li:before{content:"";position:absolute;left:6px;top:8px;width:8px;height:8px;border:2px solid var(--line);border-radius:50%;background:var(--surface)}.timeline li:after{content:"";position:absolute;left:11px;top:20px;bottom:0;width:1px;background:var(--line)}.timeline li:last-child:after{display:none}.timeline .done:before{background:var(--green);border-color:var(--green)}.timeline .current:before{background:var(--primary);border-color:var(--primary)}.timeline small{display:block}.person{display:flex;align-items:center;gap:10px}.avatar{width:35px;height:35px;border-radius:50%;background:var(--soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:600}.sidebar{position:fixed;top:0;bottom:0;width:220px;background:var(--surface);border-right:1px solid var(--line);padding:24px 18px}.sidebar .brand{font-size:21px;margin-bottom:38px}.menu{padding:12px 14px;margin:6px 0;color:var(--muted);border-radius:10px;font-size:13px}.menu.active{background:var(--soft);color:var(--primary);font-weight:600}.admin{padding-left:220px}.admin header{height:65px;padding:0 28px}.admin .wrap{max-width:1200px;padding:26px}.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:22px}.tabs span{padding:10px 0;color:var(--muted);font-size:13px}.tabs .active{border-bottom:2px solid var(--primary);color:var(--primary)}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;font-weight:600;background:var(--paper);color:var(--muted);font-size:11px}td,th{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}td:last-child{text-align:right}.tablecard{padding:0;overflow:hidden}.toolbar{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.search{width:270px}.id{font-size:11px;color:var(--muted)}.callout{border-left:3px solid var(--primary);padding:0 0 0 15px;margin:20px 0}.comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}.comparison div{padding:16px}.comparison div+div{background:var(--soft);border-left:1px solid var(--line)}.success{font-size:28px;color:var(--green);width:60px;height:60px;border-radius:50%;background:var(--greenbg);display:flex;align-items:center;justify-content:center;margin-bottom:16px}.progress{height:7px;background:var(--soft);border-radius:10px;overflow:hidden;margin:18px 0}.progress span{display:block;width:66%;height:100%;background:var(--primary)}.disabled{opacity:.5;cursor:default}.annotation{color:var(--muted);font-size:11px;margin-top:16px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.thumb{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}.thumb img{width:100%;display:block}.thumb div{padding:12px}.thumb b{color:var(--text)}.foot{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;padding:18px 0}.chips{display:flex;gap:6px;flex-wrap:wrap}.mobileonly{display:none}@media(max-width:800px){header{padding:0 18px;height:65px}nav>a:not(.btn){display:none}.wrap,.admin .wrap{padding:22px 16px}.grid,.two,.three,.gallery{grid-template-columns:minmax(0,1fr)}.side{order:2}.heading{display:block}h1{font-size:25px}.heading>.inline{margin-top:15px}.steps{gap:6px}.step{font-size:10px;display:block}.step i{display:flex;margin-bottom:5px}.actions{position:sticky;bottom:0;background:var(--surface);padding:14px 0;margin-top:18px;z-index:2}.sidebar{display:none}.admin{padding-left:0}.admin header{padding:0 16px}.tabs{gap:16px;flex-wrap:wrap}.designbar{padding:5px 16px}.designbar span:last-child{display:none}.card{padding:18px}.toolbar{flex-wrap:wrap}.search{width:100%}.tablecard{overflow:auto}table{min-width:660px}.comparison{grid-template-columns:minmax(0,1fr)}.comparison div+div{border:0;border-top:1px solid var(--line)}.foot{display:block}.gallery{grid-template-columns:minmax(0,1fr)}}.brand{color:var(--text)}.sidebar{left:0;z-index:10}.short-label{display:none}@media(max-width:800px){.wide-label{display:none}.short-label{display:inline}.actions{flex-wrap:wrap}.actions>.btn{flex:1}.actions>.muted{width:100%;font-size:12px}.heading .badge{margin-top:12px}}@media(max-width:800px){.actions{position:static}}button.step{border:0;border-radius:0;background:transparent;white-space:normal;padding:7px;min-width:0}.field{display:block}.field>span{display:block;font-weight:600;margin-bottom:6px}button:disabled{opacity:.5;cursor:wait}.choice{display:flex;gap:12px;align-items:flex-start;cursor:pointer}.choice input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:5px}.choice small{display:block}.quote-line{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:8px 0}.quote-line dd{margin:0;white-space:nowrap}.quote-total{font-size:24px;font-weight:600}.quote-total small{font-size:12px;color:var(--muted);font-weight:400}.error{border-color:var(--red);color:var(--red)}.notice{background:var(--soft)}.review dt{font-size:12px;color:var(--muted)}.review dd{margin:0 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}.pre-line{white-space:pre-wrap;overflow-wrap:anywhere}h1,h2,h3{overflow-wrap:anywhere;min-width:0}input,textarea,select{max-width:100%}.wrap{max-width:1240px}.brand img{width:30px}.actions{flex-wrap:wrap}.file-panel,.review-result{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.file-list{padding:0;list-style:none}.file-list li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}.file-list span{flex:1;min-width:100px;overflow-wrap:anywhere}.file-list small{display:block;color:var(--muted)}.file-list button{min-height:32px;font-size:12px;padding:5px 10px}.ai-working{display:flex;align-items:center;gap:12px;padding:20px;background:var(--soft);border-radius:var(--radius);margin-top:18px}.ai-working img{width:32px;animation:ai-pulse 1.5s ease-in-out infinite}@keyframes ai-pulse{50%{transform:translateY(-5px) rotate(8deg)}}@media(prefers-reduced-motion:reduce){.ai-working img{animation:none}}@media(max-width:500px){.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.step{white-space:nowrap!important}.file-list button{flex:initial}}
