.oio-sub-app{
  --oio-primary:#0ea5e9;
  --oio-primary-dark:#0284c7;
  --oio-bg:#f8fafc;
  --oio-border:#e2e8f0;
  --oio-text:#0f172a;
}
.oio-hero{margin-bottom:8px}
.oio-title{font-size:28px;margin:6px 0 2px;color:var(--oio-text)}
.oio-subtitle{margin:0 0 10px;color:#475569}
.oio-panel{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.oio-file{display:inline-flex;align-items:center;border:1px solid var(--oio-border);border-radius:10px;padding:8px 12px;background:#fff;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.oio-file input{display:none}
#oioFileName{min-width:140px;color:#334155}
.oio-select{border:1px solid var(--oio-border);border-radius:10px;padding:8px 10px;background:#fff}
.oio-btn{border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(2,132,199,.2);transition:transform .04s ease, box-shadow .2s ease, background .2s ease}
.oio-btn:active{transform:translateY(1px)}
.oio-primary{background:linear-gradient(180deg, var(--oio-primary), var(--oio-primary-dark));color:#fff;border:0}
.oio-primary:hover{box-shadow:0 8px 24px rgba(2,132,199,.3)}
.oio-ghost{background:#fff;color:var(--oio-primary-dark);border:1px solid var(--oio-primary)}
.oio-status{margin:6px 0 10px;color:#065f46;font-weight:500}
.oio-table-wrap{overflow:auto;border:1px solid var(--oio-border);border-radius:12px}
.oio-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.oio-table th,.oio-table td{border:1px solid var(--oio-border);padding:6px;vertical-align:top}
.oio-textarea{width:100%;height:90px}
.oio-input{width:100%}
.oio-footer{display:flex;gap:8px;align-items:center;margin-top:14px;color:#475569;border-top:1px solid var(--oio-border);padding-top:10px}
.oio-brand a{color:var(--oio-primary-dark);font-weight:700;text-decoration:none}