.tmw-shell{
  width:100%;
  min-height:100vh;
  box-sizing:border-box;
  --tmw-primary:#566f2e;
  --tmw-primary-dark:#425825;
  --tmw-surface:#fff;
  --tmw-muted:#f4f5f7;
  --tmw-border:#e8eaee;
  --tmw-text:#111;
  --tmw-sub:#6b7280;
  font-family: inherit;
}

.tmw-shell *{ box-sizing:border-box; }

.tmw-card{
  width:100%;
  min-height:100vh;
  background:var(--tmw-surface);
  display:flex;
  flex-direction:column;
  border:1px solid var(--tmw-border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.08);
}

.tmw-scroll{
  flex:1 1 auto;
  overflow:auto;
  padding:18px;
}

.tmw-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.tmw-head__left{
  display:flex;
  align-items:center;
  gap:12px;
}

.tmw-plus{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:34px;
  line-height:1;
  color:#111;
  flex:none;
}

.tmw-title{
  font-size:clamp(18px, 2vw, 28px);
  font-weight:800;
  color:var(--tmw-text);
}

.tmw-subtitle{
  margin-top:2px;
  font-size:14px;
  color:var(--tmw-sub);
}

.tmw-stepper{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:6px 0 18px;
  padding:0 8px;
}

.tmw-stepper__line{
  position:absolute;
  left:22px;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  height:3px;
  background:#ececef;
  border-radius:999px;
  z-index:0;
}

.tmw-step{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:800;
  color:#444;
  background:#f3f4f6;
  position:relative;
  z-index:1;
  flex:none;
}

.tmw-step.is-active{
  background:var(--tmw-primary);
  color:#fff;
}

.tmw-panel{
  padding:0 2px 8px;
}

.tmw-section-title{
  font-size:clamp(15px, 1.8vw, 20px);
  font-weight:800;
  color:#111;
  margin:10px 0 14px;
}

.tmw-category-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 768px){
  .tmw-category-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.tmw-category{
  width:100%;
  background:#efeff1;
  border:none;
  border-radius:16px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tmw-category:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.07); }
.tmw-category.is-selected{ outline:2px solid rgba(86,111,46,.25); background:#f6f7f2; }

.tmw-category__icon{
  width:48px;
  height:48px;
  flex:none;
  color:#111;
}
.tmw-category__icon svg{ width:100%; height:100%; display:block; }

.tmw-category__content{ min-width:0; }
.tmw-category__title{
  font-size:18px;
  font-weight:700;
  color:#202124;
  line-height:1.2;
}
.tmw-category__subtitle{
  font-size:13px;
  color:var(--tmw-sub);
  margin-top:4px;
}

.tmw-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (min-width: 992px){
  .tmw-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

.tmw-measure{
  background:#f4f5f7;
  border-radius:16px;
  padding:12px 12px 10px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:88px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.tmw-measure__icon{
  width:40px;
  height:40px;
  flex:none;
  color:#111;
}
.tmw-measure__icon svg{ width:100%; height:100%; display:block; }

.tmw-measure__body{
  flex:1;
  min-width:0;
}

.tmw-measure__label{
  font-size:15px;
  font-weight:700;
  color:#8b8b8f;
  line-height:1.1;
  margin-bottom:10px;
}

.tmw-input{
  width:100%;
  border:none;
  background:transparent;
  font-size:15px;
  padding:0;
  outline:none;
  color:#111;
  font-weight:600;
}

.tmw-group{
  margin-top:18px;
}

.tmw-group__title{
  font-size:20px;
  font-weight:800;
  color:#111;
  margin:4px 0 10px;
}

.tmw-group__box{
  background:#f4f5f7;
  border-radius:16px;
  padding:10px;
  display:grid;
  gap:10px;
}

.tmw-option{
  width:100%;
  border:none;
  background:#f0f0f2;
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.tmw-option:hover{ transform:translateY(-1px); }
.tmw-option.is-selected{ background:#e9eee0; }

.tmw-option__icon{
  width:34px;
  height:34px;
  flex:none;
  color:#111;
}
.tmw-option__icon svg{ width:100%; height:100%; display:block; }

.tmw-option__label{
  flex:1;
  font-size:18px;
  color:#222;
  min-width:0;
}

.tmw-option__radio{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid #1b1b1b;
  flex:none;
}
.tmw-option__radio.is-on{
  background:transparent;
  box-shadow: inset 0 0 0 7px transparent;
}

.tmw-step3{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tmw-textarea{
  width:100%;
  min-height:220px;
  resize:vertical;
  border:none;
  border-radius:16px;
  background:#f4f5f7;
  padding:16px;
  font-size:16px;
  color:#111;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.tmw-fractions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  background:#f4f5f7;
  padding:10px;
  border-radius:16px;
}

.tmw-fraction,
.tmw-action{
  border:none;
  border-radius:12px;
  padding:14px 12px;
  background:#fff;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  color:#111;
}

.tmw-fraction.is-selected{
  background:var(--tmw-primary);
  color:#fff;
}

.tmw-upload-row,
.tmw-export-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

@media (min-width: 992px){
  .tmw-upload-row,
  .tmw-export-row{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
}

.tmw-action{
  background:var(--tmw-primary);
  color:#fff;
  box-shadow:0 10px 22px rgba(86,111,46,.2);
}

.tmw-action--ghost{
  background:#f4f5f7;
  color:#111;
  box-shadow:none;
  border:1px solid var(--tmw-border);
}

.tmw-media-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

@media (min-width: 992px){
  .tmw-media-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
}

.tmw-thumb{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#f3f4f6;
  min-height:110px;
}
.tmw-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tmw-thumb__remove{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

.tmw-audio audio{
  width:100%;
}

.tmw-summary-card{
  background:#fff;
  border:1px solid var(--tmw-border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.tmw-summary-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.tmw-summary-card__title{
  font-size:20px;
  font-weight:800;
  color:#111;
}

.tmw-summary-card__meta{
  font-size:13px;
  color:var(--tmw-sub);
  margin-top:3px;
}

.tmw-summary-card__fraction{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f4f5f7;
  font-weight:800;
}

.tmw-summary__rows{
  display:grid;
  gap:8px;
}

.tmw-summary__row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:9px 0;
  border-bottom:1px solid #eef0f3;
  font-size:14px;
}
.tmw-summary__row strong{ text-align:right; font-weight:700; color:#111; }
.tmw-summary__row span{ color:#555; }
.tmw-summary__row--full{ align-items:flex-start; }
.tmw-summary__row--full strong{ max-width:60%; white-space:pre-wrap; }

.tmw-note{
  color:var(--tmw-sub);
  font-size:12px;
}

.tmw-message{
  background:#f4f9ef;
  color:#2f5d12;
  border:1px solid #dbe7c8;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
}

.tmw-footer{
  position:sticky;
  bottom:0;
  z-index:10;
  background:#fff;
  border-top:1px solid var(--tmw-border);
  padding:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.tmw-btn{
  height:54px;
  border:none;
  border-radius:14px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}

.tmw-btn--ghost{
  background:#f4f5f7;
  color:#111;
}
.tmw-btn--primary{
  background:var(--tmw-primary);
  color:#fff;
}
.tmw-btn--primary:disabled{
  opacity:.5;
  cursor:not-allowed;
}

@media (min-width: 992px){
  .tmw-card{
    min-height:0;
  }
  .tmw-scroll{
    max-height:calc(100vh - 110px);
  }
}

@media (max-width: 767px){
  .tmw-scroll{ padding:14px; }
  .tmw-title{ font-size:20px; }
  .tmw-category__title{ font-size:17px; }
  .tmw-option__label{ font-size:16px; }
  .tmw-btn{ height:50px; font-size:16px; }
}