:root{--accent:#e8942e;--accent-dark:#c97918;--accent-soft:#fdf0dd;--blue:#3d6ea5;--blue-soft:#eaf1f8;--blue-deep:#1f3a5c;--green:#3f9169;--green-soft:#e9f6ef;--red:#d1573f;--red-soft:#fbebe8;--bg:#f6f7f5;--panel:#fff;--line:#e6e6e2;--ink:#232a30;--muted:#7c8894;--radius:12px;font-family:"Inter","Segoe UI","IBM Plex Sans",Arial,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-size:13px;line-height:1.5}button,input,select,textarea{font:inherit}a{color:var(--blue-deep)}
.top{height:64px;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid var(--line);padding:0 32px;gap:20px;position:sticky;top:0;z-index:10}.top>b{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:14.5px;font-weight:800;white-space:nowrap}.top>b:first-letter{font-size:18px}.top nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.top nav a{padding:9px 13px;border-radius:8px;color:#5c6874;text-decoration:none;font-size:13px;font-weight:600}.top nav a:hover{background:#f4f5f3}.top nav a.active{background:var(--accent-soft);color:var(--accent-dark)}
.wrap{max-width:1120px;margin:0 auto;padding:28px 32px 50px}.pagehead{margin-bottom:20px}.pagehead h1{font-size:23px;line-height:1.2;margin:0 0 5px;color:var(--ink);font-weight:800;letter-spacing:-.01em}.sub{font-size:13px;color:var(--muted)}
.panel,.room,.card,.result-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 16px}.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dark);margin:0 0 14px;font-weight:700;display:flex;align-items:center;gap:8px}.panel h3:after{content:"";height:1px;background:var(--line);flex:1}
.field-row{display:grid;gap:12px;margin-bottom:12px}.field-row:last-child{margin-bottom:0}.field-row.c2{grid-template-columns:1fr 1fr}.field-row.c4{grid-template-columns:2fr 1fr 1fr 1fr}.field-row.c3{grid-template-columns:repeat(3,1fr)}label{display:block;color:#5c6874;font-size:12px;font-weight:600}input,select,textarea{width:100%;margin-top:6px;border:1.5px solid #d6dce2;border-radius:8px;padding:9px 11px;font-size:13px;color:var(--ink);background:#fbfcfd}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:#fff}textarea{resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:10px 18px;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;transition:.15s}.btn.primary{background:var(--accent);color:#fff;border:0;box-shadow:0 4px 12px rgba(232,148,46,.25)}.btn.primary:hover{background:var(--accent-dark)}.btn.secondary{background:#fff;border:1.5px solid var(--line);color:var(--ink)}.btn.secondary:hover{border-color:#cfd6dc;background:#fafbfb}.btn.danger{background:#fff;border:1.5px solid #f0c9c0;color:var(--red)}button:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 16px}.notice{padding:11px 13px;border-radius:8px;background:var(--accent-soft);color:#8a5a10;border:1px solid #f3d5a8;font-size:12px;margin:0 0 12px}.notice.ok{background:var(--green-soft);border-color:#bfe4cf;color:#2e7454}.notice.error,.notice.red{background:var(--red-soft);border-color:#efc1b7;color:var(--red)}
.room{padding:12px;margin:10px 0;background:#fcfdfe;border-color:#e7ebef}.room-head,.subhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.room-head{margin-bottom:10px}.room-no{font-size:13px;color:var(--ink);font-weight:800}.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid #d6dce2;background:#fff;color:#8d98a2;cursor:pointer;flex:0 0 auto}.icon-btn:hover{color:var(--red);border-color:#efc8bf}.subpanel{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}.subhead b{font-size:12px;color:var(--ink)}.link-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--blue-deep);font-weight:700;font-size:12px;cursor:pointer;padding:4px 0}.inline-row{display:grid;grid-template-columns:1.3fr 1fr 1fr .65fr .8fr 34px;gap:7px;align-items:center;margin:8px 0}.inline-row input,.inline-row select{margin-top:0}.inline-row span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--blue-deep)}.room-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}.stat{background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px;color:var(--muted);font-size:9px}.stat b{display:block;color:var(--ink);font-size:12px}.thumb{width:100%;max-width:220px;height:150px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}.room-thumb{width:100px;height:70px;object-fit:cover;border-radius:8px}.preview{margin-top:8px}.file-label{display:inline-flex;align-items:center;gap:7px;border:1.5px dashed #cfd6dc;border-radius:8px;padding:8px 10px;cursor:pointer;font-size:11px;font-weight:700;color:#5c6874}.file-label input{display:none}
.level-seg{display:flex;gap:8px}.level-seg label{flex:1;border:1.5px solid #d6dce2;border-radius:9px;padding:10px 6px;background:#fff;font-weight:700;font-size:12px;color:#7c8894;cursor:pointer;text-align:center}.level-seg label:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}.level-seg label input{width:auto;margin:0 5px 0 0;accent-color:var(--accent)}
.check{display:flex;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid #f0f2f5;color:var(--ink);font-size:13px}.check input{width:17px;height:17px;margin:0;accent-color:var(--accent)}.check small{margin-left:auto;color:#a7b0b9;font-family:"IBM Plex Mono",monospace;font-size:11px}.check:last-child{border-bottom:0}.svc-table{width:100%;border-collapse:collapse}.svc-table td{padding:8px 3px;border-bottom:1px solid #f0f2f5;font-size:12.5px}.svc-table td:last-child{text-align:right;font-family:"IBM Plex Mono",monospace;color:var(--blue-deep)}
.result-box{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:var(--blue-soft);border-color:#d7e4ef;padding:18px 20px}.result-box>div{font-size:12px;color:#4b6a86}.result-box b{color:var(--blue-deep)}.result-box .total{grid-column:1/-1;font-size:20px;color:var(--blue-deep);padding-top:10px;border-top:1px solid #d6e2ee}.result{background:linear-gradient(135deg,var(--blue-deep),#16283f);border-radius:12px;color:#fff;padding:20px}.result .big{font-size:36px;font-weight:900;margin:3px 0}.bd{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #f0f2f5}.bd:last-child{border-bottom:0}.bd small{color:#a7b0b9}.bd b{color:var(--blue-deep)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}.proj{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;text-decoration:none;color:var(--ink)}.proj:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.05)}.projtop{display:flex;justify-content:space-between;gap:10px}.price{font-family:"IBM Plex Mono",monospace;font-weight:800;color:var(--accent-dark)}.meta{font-size:11px;color:#8a8578;margin-top:7px;display:flex;justify-content:space-between;gap:10px}.proj-thumb{width:100%;height:150px;object-fit:cover;border-radius:9px;margin-bottom:10px}.empty{text-align:center;padding:45px;color:#a7b0b9}
.toolbar{display:flex;gap:9px;align-items:center;margin-bottom:15px}.toolbar .spacer{flex:1}.toolbar input{max-width:300px}.sort-chip{padding:9px 14px;border-radius:8px;border:1.5px solid #d6dce2;background:#fff;font-size:12px;font-weight:600;color:#5c6874;cursor:pointer}.sort-chip.active{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.kpi-grid,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px}.kpi small{display:block;color:var(--muted);font-size:11px}.kpi b{display:block;font-size:25px;margin-top:4px;color:var(--ink)}
.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:10px;border-bottom:1px solid var(--line);font-size:12px;text-align:left;vertical-align:top}.table th{color:var(--muted);font-weight:700;background:transparent}.table tr:last-child td{border-bottom:0}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 15px}.admin-nav a{background:#fff;border:1px solid var(--line);padding:8px 11px;border-radius:8px;text-decoration:none;color:var(--blue-deep);font-size:12px;font-weight:700}.admin-nav a:hover,.admin-nav a.active{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.auth-bg{background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px}.auth-card{width:440px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}.auth-card h1{margin-top:0;color:var(--ink)}
@media(max-width:900px){.wrap{padding:22px 18px 40px}.top{height:auto;min-height:64px;padding:12px 18px;align-items:flex-start;flex-direction:column}.top nav{width:100%}.field-row.c2,.field-row.c3,.field-row.c4,.kpi-grid,.grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.room-stats{grid-template-columns:repeat(2,1fr)}.result-box{grid-template-columns:repeat(2,1fr)}.inline-row{grid-template-columns:1fr 1fr 1fr 1fr 1fr 34px;overflow:auto}.inline-row select,.inline-row input{min-width:110px}}
@media(max-width:560px){.top nav a{padding:8px 9px;font-size:12px}.room-stats{grid-template-columns:1fr 1fr}.result-box{grid-template-columns:1fr 1fr}.result-box .total{grid-column:1/-1}.panel{padding:15px}.inline-row{grid-template-columns:1fr 1fr}.inline-row span{grid-column:1}.inline-row .mini-remove{grid-column:2;justify-self:end}}
.brand{display:flex;align-items:center;gap:10px;min-width:225px}.brand-mark{width:32px;height:32px;border-radius:8px;background:var(--blue-deep);color:#fff;display:grid;place-items:center;font-size:18px}.brand strong{display:block;font-size:14.5px;color:var(--ink);font-weight:800;letter-spacing:-.01em}.brand span{display:block;font-size:10px;color:var(--muted);font-family:"IBM Plex Mono",monospace}.top-user{display:flex;align-items:center;gap:10px;min-width:150px;justify-content:flex-end}.uname{text-align:right}.uname b{display:block;font-size:12px}.uname small{font-size:10.5px;color:var(--muted)}.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
@media(max-width:1100px){.top-user{display:none}.brand{min-width:auto}.top{justify-content:flex-start}.top nav{flex:1;justify-content:flex-end}}

/* MOCKUP V4 VISUAL PARITY */
body{background:var(--bg);color:var(--ink);font-family:"Inter","Segoe UI","IBM Plex Sans",Arial,sans-serif;font-size:13px;line-height:1.5}
.top{height:64px;flex:0 0 64px;background:#fff;border-bottom:1px solid var(--line);padding:0 28px;gap:20px;position:sticky;top:0;z-index:10}
.wrap{max-width:1240px;margin:0 auto;padding:26px 28px 50px}
.top>b{font-size:14.5px}.top nav{gap:4px}.top nav a{padding:9px 13px;border-radius:8px;color:#5c6874;font-size:13px;font-weight:700}.top nav a:hover,.top nav a.active{background:var(--accent-soft);color:var(--accent-dark)}
.brand{display:flex;align-items:center;gap:10px;min-width:225px}.brand-mark{width:32px;height:32px;border-radius:8px;background:var(--blue-deep);color:#fff;display:grid;place-items:center;font-size:18px}.brand strong{font-size:14.5px}.brand span{font-size:10px}
.top-user{display:flex;align-items:center;gap:10px;min-width:150px;justify-content:flex-end}.uname{text-align:right}.uname b{font-size:12px}.uname small{font-size:10.5px;color:var(--muted)}.avatar{width:32px;height:32px}
.pagehead{margin-bottom:18px}.pagehead h1{font-size:23px;margin:0 0 4px}.sub{font-size:13px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dark);margin:0 0 14px;display:flex;align-items:center;gap:8px}.panel h3:after{content:"";height:1px;background:var(--line);flex:1}
.field-row{display:grid;gap:12px;margin-bottom:12px}.field-row.c2{grid-template-columns:1fr 1fr}.field-row.c3{grid-template-columns:1fr 1fr 1fr}.field-row.c4{grid-template-columns:1.1fr 1fr 1fr 1fr}
label{display:block;color:#5c6874;font-size:12px;font-weight:600}input,select,textarea{width:100%;border:1.5px solid #d6dce2;border-radius:8px;padding:9px 11px;font-size:13px;color:var(--ink);background:#fbfcfd;margin-top:6px}
.room{border:1px solid #e7ebef;border-radius:10px;padding:12px;margin:10px 0;background:#fcfdfe}.room-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.room-no{font-size:13px;font-weight:800}.room-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:8px}.stat{background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px;color:var(--muted);font-size:9px}.stat b{display:block;color:var(--ink);font-size:12px}
.subpanel{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}.subhead b{font-size:12px}.link-btn{color:var(--blue-deep);font-weight:700;font-size:12.5px}.inline-row{display:grid;grid-template-columns:1.3fr 1fr 1fr .65fr .8fr 34px;gap:7px;align-items:center;margin:8px 0}.inline-row input,.inline-row select{margin-top:0}.inline-row span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--blue-deep)}
.notice{padding:11px 13px;border-radius:8px;background:var(--accent-soft);color:#8a5a10;border:1px solid #f3d5a8;font-size:12px;margin:0 0 12px}.notice.ok{background:var(--green-soft);border-color:#bfe4cf;color:#2e7454}
.level-seg{display:flex;gap:8px}.level-seg label{flex:1;padding:10px 5px;border-radius:9px;border:1.5px solid #d6dce2;background:#fff;font-weight:800;color:#7c8894;text-align:center}.level-seg label:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.check{display:flex;align-items:center;gap:9px;padding:8px 3px;border-bottom:1px solid #f0f2f5;color:var(--ink);font-size:12.5px}.check input{width:15px;height:15px;margin:0;accent-color:var(--accent)}.check small{margin-left:auto;color:#a7b0b9;font-family:"IBM Plex Mono",monospace;font-size:11px}
.result-box{background:var(--blue-soft);border-color:#d7e4ef;border-radius:12px;padding:18px 20px}.btn{padding:10px 18px;border-radius:9px;font-size:13px;font-weight:800}.btn.primary{background:var(--accent)}
.cards{grid-template-columns:1fr 1fr;gap:13px}.proj{border-radius:12px;padding:15px}.kpi-grid,.grid{grid-template-columns:repeat(3,1fr);gap:14px}.kpi{border-radius:12px;padding:15px}.table th,.table td{padding:10px;font-size:12px}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}.room-stats{grid-template-columns:repeat(2,1fr)}}
.mockup-hidden-result{display:none!important}
.mockup-action{margin-top:2px}
.area-box{display:flex;justify-content:space-between;align-items:baseline;background:var(--blue-soft);border-radius:9px;padding:10px 14px;margin-top:8px}.area-box .l{font-size:12px;color:#4b6a86}.area-box .v{font-family:"IBM Plex Mono",monospace;font-weight:800;font-size:15px;color:var(--blue-deep)}