:root{--accent:#0b61ff;--accent2:#06b6d4;--muted:#6b7280;--radius:12px}
.ntpp-wrap{font-family:Inter,Arial,Helvetica,sans-serif;max-width:1200px;margin:20px auto;background:linear-gradient(180deg,#fff,#f4fbff);padding:18px;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.06)}
.ntpp-header{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:800;color:var(--accent);font-size:20px}
.controls .btn{margin-left:8px}
.btn{padding:8px 12px;border-radius:10px;border:0;background:var(--accent);color:#fff;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;border:1px solid rgba(11,97,255,0.08);color:var(--accent)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.ntpp-main{display:flex;gap:18px;margin-top:12px}
.ntpp-left{width:380px}
#ntpp-input{width:100%;min-height:140px;padding:12px;border-radius:10px;border:1px solid #e6eef8;font-size:16px;resize:vertical}
.ntpp-controls{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center}
.preview-box{margin-top:10px;padding:12px;border-radius:10px;border:1px dashed #e6eef8;background:linear-gradient(90deg,#fff,#fbfdff)}
.live-sample{font-size:28px;margin-bottom:8px}
.top10{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;padding-top:6px}
.ntpp-right{flex:1}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.toolbar input, .toolbar select{padding:8px;border-radius:8px;border:1px solid #e6eef8;flex:1}
.status{padding:10px;border-radius:8px;background:linear-gradient(90deg,#fff,#f7fbff);color:var(--muted);margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;max-height:640px;overflow:auto;padding:6px;border-radius:8px;border:1px solid #eef6ff}
.card{background:linear-gradient(180deg,#fff,#fcfeff);padding:12px;border-radius:10px;border:1px solid rgba(2,6,23,0.03);display:flex;flex-direction:column;gap:8px}
.card .label{font-size:12px;color:var(--muted)}
.card .text{min-height:48px;font-size:18px;word-break:break-word}
.card .actions{display:flex;gap:6px;justify-content:flex-end}
.card .actions button{padding:6px 8px;border-radius:8px;border:0;background:var(--accent);color:#fff;cursor:pointer;font-weight:700}
.ntpp-footer{text-align:right;color:var(--muted);margin-top:12px}
.dark-mode {background:#0b1220;color:#e6eef8}
.dark-mode .card{background:#071023;border-color:rgba(255,255,255,0.03)}
@media(max-width:980px){.ntpp-main{flex-direction:column}.ntpp-left{width:100%}}