/* Workflow specific styles */
.wf-form{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow)}
.wf-form h2{font-size:1.2rem;margin-bottom:16px}
.form-grid{display:flex;flex-direction:column;gap:12px}
.form-grid label,.submit-form label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:600;color:var(--sub)}
.form-grid input,.form-grid textarea,.form-grid select,
.submit-form input,.submit-form textarea,.submit-form select{
  padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:.85rem;font-family:inherit;resize:vertical}
.form-grid input:focus,.form-grid textarea:focus,.submit-form input:focus,.submit-form textarea:focus{outline:none;border-color:var(--accent)}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row label{flex:1;min-width:120px}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* Guide 3-part sections */
.guide-section{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px}
.guide-section-title{font-size:.9rem;font-weight:700;color:var(--text)}
.guide-section-desc{font-size:.75rem;color:var(--sub);line-height:1.4}
.guide-section textarea{margin-top:2px}
.image-upload-area{display:flex;flex-direction:column;gap:8px}
.image-upload-btn{font-size:.75rem!important;padding:4px 10px!important;cursor:pointer;width:fit-content}
.image-upload-btn input[type="file"]{display:none}
.image-preview-list{display:flex;gap:8px;flex-wrap:wrap}
.image-preview-item{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.image-preview-item img{display:block;max-height:120px;max-width:200px;object-fit:cover}
.image-preview-item .img-remove{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.btn-sm{font-size:.75rem;padding:4px 10px}

/* Guide detail sections */
.guide-detail-section{margin-bottom:16px;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:10px}
.guide-detail-section-title{font-size:.8rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.guide-detail-section-body{font-size:.85rem;white-space:pre-wrap;line-height:1.7}
.guide-detail-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.guide-detail-images img{max-height:200px;max-width:100%;border-radius:8px;border:1px solid var(--border);cursor:pointer}
.btn-danger{background:var(--danger);color:#fff}

/* Guide list */
.guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:14px;padding-bottom:40px}
.guide-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.guide-card:hover{transform:translateY(-2px)}
.gc-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.gc-header h3{font-size:1rem;color:var(--text);margin:0;flex:1;min-width:0}
.gc-actions{display:flex;gap:4px;flex-shrink:0}
.gc-actions .btn{padding:2px 8px;font-size:.72rem;white-space:nowrap}
.gc-actions .gc-del-btn{color:var(--danger,#e53935)}
.guide-card .gc-range{font-size:.8rem;color:var(--sub);margin-bottom:10px}
.guide-card .gc-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.75rem}
.guide-card .gc-badge{padding:2px 8px;border-radius:5px;font-weight:600}
.gc-badge.pts{background:#ff9f0a20;color:#ff9f0a}
.gc-badge.diff{background:#af52de20;color:#af52de}
.gc-badge.subs{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.gc-badge.approved{background:#34c75920;color:#34c759}

/* Guide detail */
.wf-detail{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow)}
.wf-detail h2{font-size:1.1rem;margin-bottom:12px}
.detail-field{margin-bottom:12px}
.detail-field .df-label{font-size:.75rem;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.detail-field .df-value{font-size:.85rem;white-space:pre-wrap;line-height:1.6}

/* Submission list */
.sub-filter{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sub-filter h3{font-size:1rem}
.sub-filter select{padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-size:.8rem}
.sub-list{display:flex;flex-direction:column;gap:10px;padding-bottom:40px}
.sub-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;transition:transform .12s}
.sub-card:hover{transform:translateY(-1px)}
.sub-card .sc-info{flex:1}
.sub-card .sc-author{font-size:.85rem;font-weight:600}
.sub-card .sc-preview{font-size:.8rem;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:400px}
.sub-card .sc-date{font-size:.7rem;color:var(--sub);margin-top:2px}
.status-badge{padding:3px 10px;border-radius:16px;font-size:.7rem;font-weight:700;white-space:nowrap}
.status-badge.pending{background:#ff9f0a20;color:#ff9f0a}
.status-badge.approved{background:#34c75920;color:#34c759}
.status-badge.rejected{background:#ff3b3020;color:#ff3b30}
.status-badge.draft{background:var(--badge);color:var(--sub)}
.status-badge.published{background:#0071e320;color:#0071e3}
.status-badge.revised{background:#5ac8fa20;color:#5ac8fa}

/* Submit form */
.submit-section{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
.submit-section textarea{min-height:200px}
.submit-section-title{font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
.submit-section-details{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px}
.submit-section-details[open]{padding-bottom:16px}
.submit-section-details summary{list-style:none;display:flex;align-items:center;gap:6px}
.submit-section-details summary::before{content:'\25B6';font-size:.6rem;transition:transform .2s}
.submit-section-details[open] summary::before{transform:rotate(90deg)}
.submit-form{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.form-split{display:grid;grid-template-columns:3fr 2fr;gap:24px}
@media(max-width:800px){.form-split{grid-template-columns:1fr}}
.form-left,.form-right{display:flex;flex-direction:column;gap:12px}
.choices-inputs{display:flex;flex-direction:column;gap:6px}
.choice-row{display:flex;align-items:center;gap:8px}
.choice-row span{font-size:.9rem;font-weight:700;min-width:20px}
.choice-row input{flex:1}
.preview-area{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;min-height:300px;font-size:.9rem;line-height:1.7;overflow-x:auto}

/* Guide accordion */
.guide-accordion{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px}
.guide-accordion summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--accent)}
.guide-accordion>div{margin-top:12px}

/* AI panel */
.ai-panel{background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:20px;margin-bottom:16px}
.ai-panel h3{font-size:1rem;margin-bottom:8px}
.ai-panel pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:.8rem;white-space:pre-wrap;max-height:400px;overflow-y:auto;margin:10px 0}

/* Review */
.review-content{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow)}
.review-content .q-text{font-size:1rem;line-height:1.8;margin:16px 0}
.review-history{margin-bottom:16px}
.review-history h3{font-size:.9rem;margin-bottom:8px}
.rh-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);font-size:.8rem}
.rh-item:last-child{border-bottom:none}
.rh-action{font-weight:700;min-width:60px}
.rh-comment{color:var(--text);background:var(--badge);padding:4px 8px;border-radius:6px;margin-top:4px;font-size:.78rem}
.review-actions{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.review-actions label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:600;color:var(--sub);margin-bottom:12px}
.review-actions textarea{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:.85rem;font-family:inherit;resize:vertical}

/* ── Mobile (iOS Safari) ── */
@media(max-width:600px){
  .guide-card{padding:14px}
  .gc-header{flex-direction:column;gap:6px}
  .gc-header h3{font-size:.9rem}
  .gc-actions .btn{padding:6px 12px;font-size:.75rem;min-height:36px}
  .submit-form{padding:14px}
  .submit-section{padding:12px}
  .submit-section textarea{min-height:140px}
  .submit-section-details{padding:12px}
  .form-row{flex-direction:column;gap:8px}
  .form-row label{min-width:0}
  .choice-row input,.submit-form select,.submit-form input{font-size:16px;padding:10px 12px}
  .btn{min-height:44px;padding:10px 16px}
  .gc-actions .btn,.gc-del-btn,.gc-edit-btn{min-height:36px}
  .review-content{padding:14px}
  .review-actions{padding:14px}
  .sub-card{padding:12px;flex-direction:column;align-items:flex-start;gap:8px}
  .wf-detail{padding:14px}
  .ai-panel{padding:14px}
  .ai-panel pre{max-height:200px}
  .guide-detail-images img{max-height:140px}
}