*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f6f7;color:#222}.container{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;height:100vh;padding:16px}.panel{background:#fff;border:1px solid #e6e6e6;border-radius:10px;padding:12px;min-height:0;box-shadow:0 1px 3px #0000000d}.controls-root .headline{font-size:26px;margin-bottom:10px}.btn{background:#eee;color:#222;border:1px solid #ccc;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:14px}.btn:hover{background:#e0e0e0}.ghost-nav{border:1px solid #e1e1e1;background:#fff;width:32px;height:28px;border-radius:8px;cursor:pointer;color:#333}.ghost-nav:disabled{opacity:.35;cursor:not-allowed}.del-pill{width:32px;height:32px;border-radius:50%;border:1px solid #ffc7c7;background:#ffecec;color:#e23b3b;font-size:18px;line-height:1;cursor:pointer}.cta-row{margin:14px 0 8px;display:flex;justify-content:flex-end}.cta-outline{background:#fff;color:#18a058;border:2px solid #18a058;padding:12px 18px;border-radius:12px;font-size:16px;cursor:pointer}.hint{color:#666;font-size:12px}.error-msg{color:#d32f2f;font-size:12px;margin-top:2px;text-align:center}.input{width:110px;background:#fff;color:#222;border:1px solid #ccc;padding:6px 8px;border-radius:6px;font-size:14px}.input.full{width:100%}.url-block{margin:8px 0 14px}.url-block .input.full{height:36px}.dim-col{display:flex;flex-direction:column;gap:6px}.dim-label{display:flex;justify-content:space-between;color:#333;font-size:14px}.dim-range{color:#787878;font-size:12px}.dims-row{gap:18px;display:flex;align-items:center;justify-content:center}.big-input-wrap{position:relative}.big-input{width:100%;font-size:28px;font-weight:700;padding:12px 48px 12px 16px;border-radius:14px;border:1px solid #e3e3e3;background:#fff}.big-input.error{border-color:#f19999;background:#fff7f7}.unit-pill{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:14px;color:#555;padding:4px 8px;border-radius:10px;background:#f1f1f1;border:1px solid #e7e7e7}.mm-hint{text-align:center;color:#666;font-size:12px;margin-top:2px}.times{align-self:center;font-size:20px;color:#666;font-weight:600}.unit-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}.seg{display:inline-flex;border:1px solid #ddd;border-radius:10px;overflow:hidden}.seg-btn{background:#fff;padding:6px 12px;font-size:14px;border:none;cursor:pointer}.seg-btn+.seg-btn{border-left:1px solid #ddd}.seg-btn.active{background:#0ea15f;color:#fff}.canvas-wrap{position:relative;height:100%;min-height:300px;display:flex;flex-direction:column;gap:8px}.canvas{flex:1;background:linear-gradient(180deg,#fcfcfc,#f2f2f2);border:1px solid #e6e6e6;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12px;box-shadow:inset 0 1px #ffffff80}.canvas-inner{position:relative;transform-origin:top left;background:#f8f8f8;border-radius:8px;box-shadow:inset 0 0 0 1px #e5e5e5}.plate{position:absolute;bottom:0;border:1px solid #cfcfcf;background-color:#fff;overflow:hidden;border-radius:6px}.anim-plate{transition:left .18s ease,width .18s ease,height .18s ease}.plate-card{background:#f5f6f7;border-radius:14px;padding:14px;border:1px solid #ececec;margin:12px 0}.plate-card-head{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:8px;margin-bottom:10px}.head-spacer{min-width:1px}.badge{width:50px;height:50px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:400;background:#111;color:#fff;font-size:22px;border:2px solid #111}.fade-in{animation:fadeSlide .22s ease-out}@keyframes fadeSlide{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 960px){.container{grid-template-columns:1fr;grid-auto-rows:minmax(min-content,max-content);height:auto}}@media (max-width: 600px){.big-input{font-size:24px}.controls-root .headline{font-size:22px}.plate-card{padding:12px}.times{display:none}.badge{width:50px;height:25px;font-size:12px;border-radius:6px;position:relative;left:-5%;top:-95px}.del-pill{width:60px;height:25px;position:relative;left:5%;top:-95px}.ghost-nav{width:60px;height:25px}}