/* LaserLearn Materials 0.6.1 — dark visual system + semantic operation colours */
.materials-page{
  --mat-bg:#0b1219;
  --mat-panel:#101a24;
  --mat-panel-2:#13202c;
  --mat-panel-3:#172633;
  --mat-line:#263746;
  --mat-line-strong:#344a5c;
  --mat-text:#f2f7fb;
  --mat-muted:#9db0c2;
  --mat-subtle:#71869a;
  --mat-green:#49e3ad;
  --mat-green-2:#2bc98e;
  --mat-blue:#55b8ff;
  --mat-cyan:#4ed9e8;
  --mat-violet:#a78bfa;
  --mat-amber:#f4bd63;
  --mat-coral:#ff7a82;
  --mat-shadow:0 18px 50px rgba(0,0,0,.24);
  display:grid;
  gap:1.4rem;
  color:var(--mat-text);
}
.materials-page *{box-sizing:border-box}
.materials-page .eyebrow{color:var(--mat-green);font-weight:850;letter-spacing:.11em;text-transform:uppercase;font-size:.72rem}
.materials-page input,.materials-page select,.materials-page textarea{
  width:100%;
  color:var(--mat-text);
  background:#0b141d;
  border:1px solid var(--mat-line);
  border-radius:12px;
  outline:0;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.materials-page input::placeholder,.materials-page textarea::placeholder{color:#6e8397}
.materials-page input:focus,.materials-page select:focus,.materials-page textarea:focus{
  border-color:rgba(73,227,173,.72);
  box-shadow:0 0 0 3px rgba(73,227,173,.11);
  background:#0e1822;
}
.materials-page select option{background:#101a24;color:var(--mat-text)}
.materials-page .button{
  border-color:var(--mat-line-strong);
  background:#111d28;
  color:var(--mat-text);
  box-shadow:none;
}
.materials-page .button:hover{border-color:#4a657b;background:#172633;transform:translateY(-1px)}
.materials-page .button.primary{
  color:#07140f;
  border-color:transparent;
  background:linear-gradient(135deg,var(--mat-green),#5af0c1);
  box-shadow:0 10px 28px rgba(73,227,173,.17);
}
.materials-page .button.primary:hover{background:linear-gradient(135deg,#59efbd,#70f4ca);box-shadow:0 12px 32px rgba(73,227,173,.23)}
.materials-page .button.ghost{background:rgba(17,29,40,.76);border-color:var(--mat-line-strong)}
.materials-page .button.danger{color:#ffd5d8;background:rgba(255,122,130,.08);border-color:rgba(255,122,130,.33)}
.materials-page .button.danger:hover{background:rgba(255,122,130,.14);border-color:rgba(255,122,130,.55)}

.materials-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem 1.45rem;
  border:1px solid var(--mat-line);
  border-radius:22px;
  background:
    radial-gradient(circle at 88% 15%,rgba(73,227,173,.13),transparent 27%),
    radial-gradient(circle at 66% 105%,rgba(85,184,255,.09),transparent 34%),
    linear-gradient(135deg,#101a24,#0d171f);
  box-shadow:var(--mat-shadow);
}
.materials-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--mat-green),var(--mat-cyan))}
.materials-hero>div:first-child{position:relative;z-index:1}
.materials-hero h1{margin:.2rem 0 .45rem;font-size:clamp(2.15rem,4vw,3.3rem);letter-spacing:-.035em;color:var(--mat-text)}
.materials-hero p{max-width:780px;margin:0;color:#a9bfd2;line-height:1.62}
.materials-hero-actions{position:relative;z-index:1;display:flex;gap:.7rem;flex-wrap:wrap}

.materials-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}
.materials-summary>div{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:1rem 1.05rem 1.05rem;
  border:1px solid var(--mat-line);
  border-radius:17px;
  background:linear-gradient(145deg,var(--mat-panel),#0e1821);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  display:grid;
  gap:.28rem;
}
.materials-summary>div:after{content:"";position:absolute;right:-20px;top:-28px;width:88px;height:88px;border-radius:999px;opacity:.12;background:currentColor}
.materials-summary>div:nth-child(1){color:var(--mat-green)}
.materials-summary>div:nth-child(2){color:var(--mat-blue)}
.materials-summary>div:nth-child(3){color:var(--mat-violet)}
.materials-summary>div:nth-child(4){color:var(--mat-amber)}
.materials-summary strong{position:relative;z-index:1;font-size:1.48rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:currentColor}
.materials-summary span{position:relative;z-index:1;font-size:.79rem;color:var(--mat-muted);font-weight:700}

.materials-workspace{display:grid;grid-template-columns:minmax(225px,275px) minmax(0,1fr);gap:1rem;align-items:start}
.materials-library-panel,.materials-main,.materials-action-card,.materials-format-note{
  border:1px solid var(--mat-line);
  border-radius:19px;
  background:linear-gradient(145deg,var(--mat-panel),#0e1720);
  box-shadow:0 10px 34px rgba(0,0,0,.14);
}
.materials-library-panel{padding:.9rem;display:grid;gap:.55rem;position:sticky;top:92px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem .4rem .72rem;border-bottom:1px solid rgba(38,55,70,.72)}
.section-heading h2{margin:.15rem 0 0;font-size:1.08rem;color:var(--mat-text)}
.count-pill{min-width:2rem;height:2rem;padding:0 .55rem;border-radius:999px;display:grid;place-items:center;background:rgba(73,227,173,.1);border:1px solid rgba(73,227,173,.2);color:var(--mat-green);font-weight:850}
.library-filter{position:relative;display:grid;gap:.18rem;padding:.78rem .82rem;border-radius:13px;text-decoration:none;color:var(--mat-text);border:1px solid transparent;transition:.15s ease}
.library-filter:hover{background:#152431;border-color:var(--mat-line);transform:translateX(2px)}
.library-filter.active{border-color:rgba(73,227,173,.42);background:linear-gradient(135deg,rgba(73,227,173,.12),rgba(78,217,232,.06));box-shadow:inset 3px 0 0 var(--mat-green)}
.library-filter span{font-weight:800;color:var(--mat-text)}
.library-filter small{color:var(--mat-muted);line-height:1.35}
.library-filter em{position:absolute;right:.65rem;top:.58rem;font-style:normal;font-size:.61rem;letter-spacing:.09em;color:var(--mat-green);font-weight:850}

.materials-main{padding:1rem;min-width:0}
.library-context{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.35rem .15rem 1rem;border-bottom:1px solid var(--mat-line);margin-bottom:1rem}
.library-context h2{margin:.18rem 0;color:var(--mat-text)}
.library-context p{margin:0;color:var(--mat-muted);font-size:.88rem;overflow-wrap:anywhere}
.material-filters{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(150px,.8fr) minmax(150px,.9fr) auto;gap:.7rem;align-items:end;margin-bottom:.9rem;padding:.82rem;border:1px solid var(--mat-line);border-radius:14px;background:#0c151e}
.material-filters label{margin:0;color:var(--mat-text)}
.material-filters label>span{display:block;font-size:.75rem;font-weight:800;margin:0 0 .36rem;color:var(--mat-muted);letter-spacing:.02em}
.materials-warning{display:flex;gap:.7rem;align-items:flex-start;padding:.86rem .95rem;border-radius:14px;background:linear-gradient(135deg,rgba(244,189,99,.11),rgba(244,189,99,.05));border:1px solid rgba(244,189,99,.28);font-size:.86rem;margin:.7rem 0 1rem;color:#f6dcae}
.materials-warning:before{content:"!";flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:rgba(244,189,99,.16);color:var(--mat-amber);font-weight:900}
.materials-warning strong{white-space:nowrap;color:var(--mat-amber)}
.materials-warning span{color:#d8c8aa;line-height:1.5}

.preset-table-wrap{overflow:auto;border:1px solid var(--mat-line);border-radius:15px;background:#0d171f}
.preset-table{width:100%;border-collapse:collapse;min-width:860px}
.preset-table th,.preset-table td{padding:.83rem .76rem;text-align:left;vertical-align:top;border-bottom:1px solid rgba(38,55,70,.75)}
.preset-table th{font-size:.69rem;text-transform:uppercase;letter-spacing:.075em;color:#8399ad;background:#111d28;font-weight:850}
.preset-table tbody tr{transition:background .12s ease}
.preset-table tbody tr:hover{background:#13212c}
.preset-table tbody tr:last-child td{border-bottom:0}
.preset-table td{color:#dce7f1}
.preset-table td strong{display:block;color:var(--mat-text)}
.preset-table td small{display:block;margin-top:.26rem;color:var(--mat-subtle);font-size:.72rem;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.operation-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .56rem;border-radius:999px;border:1px solid var(--mat-line);background:#16232e;color:#c6d5e2;font-weight:850;font-size:.72rem;letter-spacing:.01em}
.operation-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.operation-badge[data-operation="cut"]{color:var(--mat-coral);background:rgba(255,122,130,.08);border-color:rgba(255,122,130,.23)}
.operation-badge[data-operation="scan"]{color:var(--mat-cyan);background:rgba(78,217,232,.08);border-color:rgba(78,217,232,.23)}
.operation-badge[data-operation="image"]{color:var(--mat-violet);background:rgba(167,139,250,.09);border-color:rgba(167,139,250,.24)}
.operation-badge[data-operation="offset-fill"]{color:var(--mat-amber);background:rgba(244,189,99,.08);border-color:rgba(244,189,99,.24)}

.materials-empty{display:grid;place-items:center;text-align:center;gap:.35rem;padding:2.25rem;color:var(--mat-muted)}
.materials-empty:before{content:"+";width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#152431;border:1px solid var(--mat-line);color:var(--mat-green);font-size:1.35rem;font-weight:700;margin-bottom:.25rem}
.materials-empty strong{color:var(--mat-text)}
.materials-empty span{max-width:540px;line-height:1.5}
.materials-empty.compact{padding:1.35rem .7rem}.materials-empty.compact:before{width:34px;height:34px;border-radius:10px;font-size:1.05rem}

.materials-actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.materials-action-card{position:relative;overflow:hidden;padding:1.18rem;min-width:0}
.materials-action-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--mat-green),var(--mat-cyan));opacity:.95}
.materials-action-card:nth-child(2):before{background:linear-gradient(90deg,var(--mat-violet),var(--mat-blue))}
.materials-action-card h2{margin:.2rem 0 .4rem;color:var(--mat-text)}
.materials-action-card>div>p{margin:0 0 1rem;color:var(--mat-muted);line-height:1.5}
.materials-form{display:grid;gap:.88rem}.materials-form label{color:#bfd0df;font-weight:700;font-size:.82rem}.materials-form label input,.materials-form label select,.materials-form label textarea{margin-top:.38rem}
.clb-dropzone{position:relative;min-height:190px;border:1.5px dashed #3b566b;border-radius:17px;display:grid;place-items:center;align-content:center;gap:.4rem;text-align:center;padding:1.1rem;cursor:pointer;background:linear-gradient(145deg,#0d1821,#101d27);transition:.18s ease}
.clb-dropzone:hover,.clb-dropzone.dragging{border-color:var(--mat-green);background:linear-gradient(145deg,rgba(73,227,173,.09),rgba(78,217,232,.04));transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.17)}
.clb-dropzone.has-file{border-style:solid;border-color:var(--mat-green);background:rgba(73,227,173,.07)}
.clb-dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.clb-dropzone strong{font-size:1.06rem;color:var(--mat-text)}
.clb-dropzone span,.clb-dropzone em{color:var(--mat-muted);font-style:normal;font-size:.83rem}.clb-dropzone .drop-icon{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--mat-green),var(--mat-cyan));color:#071813;display:grid;place-items:center;font-size:.73rem;font-weight:950;letter-spacing:.09em;box-shadow:0 10px 28px rgba(73,227,173,.18)}
.clb-dropzone em{margin-top:.25rem;font-weight:800;color:var(--mat-green);max-width:100%;overflow-wrap:anywhere}
.inline-check{display:flex!important;align-items:center;gap:.55rem}.inline-check input{width:auto;margin:0!important;accent-color:var(--mat-green)}
.materials-format-note{padding:1.05rem 1.15rem;display:grid;grid-template-columns:minmax(180px,.35fr) minmax(0,1fr);gap:1rem;align-items:start;background:linear-gradient(135deg,#111d28,#101923)}
.materials-format-note h2{margin:.2rem 0 0;color:var(--mat-text)}.materials-format-note p{margin:.2rem 0;color:var(--mat-muted);line-height:1.55}

@media(max-width:980px){
  .materials-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .materials-workspace{grid-template-columns:1fr}
  .materials-library-panel{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .materials-library-panel .section-heading{grid-column:1/-1}
  .material-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .materials-actions-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .materials-hero,.library-context{align-items:stretch;flex-direction:column}
  .materials-hero{padding:1.05rem}
  .materials-hero-actions .button{flex:1}
  .materials-summary,.materials-library-panel,.material-filters,.materials-format-note{grid-template-columns:1fr}
  .materials-library-panel .section-heading{grid-column:auto}
  .materials-main{padding:.75rem}.materials-action-card{padding:.95rem}
  .materials-warning{display:grid;grid-template-columns:auto 1fr}.materials-warning strong{white-space:normal}.materials-warning span{grid-column:1/-1}
  .library-context .inline-actions{width:100%}.library-context .inline-actions>*{flex:1}.library-context .inline-actions .button{width:100%}
}
/* 0.7.0 machine identity integration */
.materials-summary strong a{color:inherit;text-decoration:none}.materials-summary strong a:hover{text-decoration:underline}.materials-machine-context{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.2rem 0 .8rem;padding:.82rem .9rem;border:1px solid rgba(85,184,255,.2);border-radius:14px;background:linear-gradient(135deg,rgba(85,184,255,.075),rgba(73,227,173,.035))}.materials-machine-context>div{display:grid;gap:.15rem}.materials-machine-context strong{color:var(--mat-text)}.materials-machine-context small{color:var(--mat-muted)}.machine-pill{display:inline-flex;max-width:180px;padding:.27rem .5rem;border-radius:999px;border:1px solid rgba(85,184,255,.22);background:rgba(85,184,255,.07);color:#b8def8;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.machine-pill.universal{border-color:rgba(73,227,173,.22);background:rgba(73,227,173,.06);color:#bff6db}.machine-pill.archived{border-color:rgba(244,189,99,.24);background:rgba(244,189,99,.07);color:#f6dcae}.preset-table{min-width:980px}@media(max-width:680px){.materials-machine-context{align-items:stretch;flex-direction:column}.materials-machine-context .button{width:100%}}