/* ==========================================================================
   Our Projects portal - page-specific styles
   Reuses the global design tokens from /style.css (brand colours, fonts).
   ========================================================================== */

/* ---- Intro / privacy line ---- */
.op-intro-privacy{
    display:inline-flex;align-items:flex-start;gap:.6rem;
    margin-top:1rem;padding:.7rem 1rem;
    background:rgba(0,242,254,.06);border:1px solid var(--panel-border);
    border-left:3px solid var(--accent-cyan);border-radius:12px;
    color:var(--text-muted);font-size:.9rem;line-height:1.6;max-width:760px;
}
.op-intro-privacy svg{flex:0 0 auto;margin-top:2px;color:var(--accent-cyan)}

/* ---- Admin toolbar ---- */
.op-toolbar{
    display:none;flex-wrap:wrap;align-items:center;gap:.75rem;
    margin-bottom:1.5rem;padding:.85rem 1rem;
    background:var(--panel-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);
    border:1px solid var(--panel-border);border-radius:14px;
}
body.op-admin .op-toolbar{display:flex}
.op-toolbar .op-admin-badge{
    display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--text-main);
    font-family:var(--font-heading);font-size:.92rem;
}
.op-toolbar .op-admin-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}
.op-toolbar .op-spacer{flex:1 1 auto}
.op-save-state{font-size:.82rem;color:var(--text-dark);min-width:0}
.op-save-state.saving{color:var(--warning)}
.op-save-state.saved{color:var(--success)}
.op-save-state.error{color:var(--error)}

/* Small buttons used across the admin UI */
.op-btn{
    display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
    font-family:var(--font-body);font-size:.85rem;font-weight:600;
    padding:.5rem .85rem;border-radius:10px;border:1px solid var(--panel-border);
    background:rgba(255,255,255,.04);color:var(--text-main);
    transition:var(--transition-smooth);white-space:nowrap;
}
.op-btn:hover{background:rgba(255,255,255,.09);border-color:var(--panel-border-glow)}
.op-btn.primary{background:var(--accent-gradient);color:#04060a;border:none}
.op-btn.primary:hover{filter:brightness(1.08)}
.op-btn.danger{color:#fff;background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.5)}
.op-btn.danger:hover{background:rgba(239,68,68,.3)}
.op-btn.ghost{background:transparent}
.op-btn svg{width:15px;height:15px}
.op-btn.small{padding:.35rem .6rem;font-size:.78rem}

/* ---- Category tabs (scrollable, no overlap) ---- */
.op-tabs-wrap{position:relative;margin-bottom:1.75rem}
.op-tabs{
    display:flex;gap:.5rem;align-items:center;
    overflow-x:auto;overflow-y:hidden;
    flex-wrap:nowrap;white-space:nowrap;
    padding:.35rem .2rem .75rem;
    scrollbar-width:thin;scrollbar-color:var(--accent-indigo) transparent;
    -webkit-overflow-scrolling:touch;
}
.op-tabs::-webkit-scrollbar{height:7px}
.op-tabs::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-indigo));border-radius:20px}
.op-tabs::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:20px}
.op-tab{
    display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;cursor:pointer;
    padding:.55rem 1rem;border-radius:999px;border:1px solid var(--panel-border);
    background:rgba(255,255,255,.03);color:var(--text-muted);
    font-family:var(--font-heading);font-weight:600;font-size:.9rem;
    transition:var(--transition-smooth);
}
.op-tab:hover{color:var(--text-main);border-color:var(--panel-border-glow)}
.op-tab.active{background:var(--accent-gradient);color:#04060a;border-color:transparent}
.op-tab .op-tab-count{
    font-size:.72rem;font-weight:700;background:rgba(0,0,0,.18);
    padding:.05rem .45rem;border-radius:999px;
}
.op-tab.active .op-tab-count{background:rgba(0,0,0,.22)}
.op-tab .op-tab-del{
    display:none;margin-left:.1rem;width:16px;height:16px;border-radius:50%;
    align-items:center;justify-content:center;background:rgba(0,0,0,.25);
    font-size:.85rem;line-height:1;
}
body.op-admin .op-tab:not(.op-tab-all) .op-tab-del{display:inline-flex}
.op-tab .op-tab-del:hover{background:var(--error);color:#fff}
.op-tab-add{
    flex:0 0 auto;cursor:pointer;padding:.5rem .8rem;border-radius:999px;
    border:1px dashed var(--panel-border-glow);background:transparent;color:var(--accent-cyan);
    font-weight:600;font-size:.88rem;display:none;align-items:center;gap:.35rem;
}
body.op-admin .op-tab-add{display:inline-flex}
.op-tab-add:hover{background:rgba(0,242,254,.08)}

/* ---- Admin controls on each card header ---- */
.op-card-admin{
    display:none;align-items:center;gap:.4rem;margin-left:.6rem;
}
body.op-admin .op-card-admin{display:inline-flex}
.op-icon-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:9px;cursor:pointer;
    border:1px solid var(--panel-border);background:rgba(255,255,255,.05);
    color:var(--text-muted);transition:var(--transition-smooth);
}
.op-icon-btn:hover{color:var(--text-main);background:rgba(255,255,255,.12);border-color:var(--panel-border-glow)}
.op-icon-btn.danger:hover{color:#fff;background:rgba(239,68,68,.35);border-color:var(--error)}
.op-icon-btn svg{width:16px;height:16px}

/* Byline: "Role, Name" - shrinks to content, never leaves a gap */
.op-byline{
    display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;
    font-size:.82rem;color:var(--accent-cyan);font-family:var(--font-mono);
    max-width:100%;
}
.op-byline svg{width:13px;height:13px;flex:0 0 auto;opacity:.8}
.op-byline span{white-space:normal;overflow-wrap:anywhere}

/* image gallery inside a card */
.op-img-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.op-img-gallery img{width:100%;height:auto;border-radius:10px;border:1px solid var(--panel-border);background:#000}
.op-single-img{width:100%;border-radius:12px;border:1px solid var(--panel-border)}

/* empty state */
.op-empty{
    text-align:center;padding:3rem 1rem;color:var(--text-muted);
    border:1px dashed var(--panel-border);border-radius:16px;
}

/* ---- Modals ---- */
.op-modal-overlay{
    position:fixed;inset:0;z-index:2000;display:none;
    align-items:flex-start;justify-content:center;
    background:rgba(2,4,8,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    padding:5vh 1rem 2rem;overflow-y:auto;
}
.op-modal-overlay.show{display:flex}
.op-modal{
    width:100%;max-width:560px;background:linear-gradient(180deg,rgba(20,30,45,.96),rgba(8,12,20,.98));
    border:1px solid var(--panel-border-glow);border-radius:20px;
    box-shadow:var(--shadow-premium);padding:1.75rem;
    animation:opPop .25s cubic-bezier(.4,0,.2,1);
}
.op-modal.wide{max-width:820px}
@keyframes opPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.op-modal h2{font-family:var(--font-heading);font-size:1.35rem;color:var(--text-main);margin:0 0 .4rem}
.op-modal .op-modal-sub{color:var(--text-muted);font-size:.92rem;margin:0 0 1.25rem;line-height:1.6}
.op-modal-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;margin-top:1.5rem}
.op-modal-close{position:absolute}
.op-gate-choices{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
@media(max-width:520px){.op-gate-choices{grid-template-columns:1fr}}
.op-gate-card{
    cursor:pointer;text-align:center;padding:1.6rem 1rem;border-radius:16px;
    border:1px solid var(--panel-border);background:rgba(255,255,255,.03);
    transition:var(--transition-smooth);
}
.op-gate-card:hover{border-color:var(--accent-cyan);background:rgba(0,242,254,.06);transform:translateY(-3px)}
.op-gate-card .op-gate-ico{
    width:54px;height:54px;margin:0 auto .8rem;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-gradient);color:#04060a;
}
.op-gate-card .op-gate-ico svg{width:28px;height:28px}
.op-gate-card h3{font-family:var(--font-heading);font-size:1.1rem;color:var(--text-main);margin:0 0 .35rem}
.op-gate-card p{font-size:.84rem;color:var(--text-muted);margin:0;line-height:1.5}

/* ---- Forms ---- */
.op-field{margin-bottom:1.1rem}
.op-field > label{display:block;font-weight:600;color:var(--text-main);font-size:.9rem;margin-bottom:.4rem;font-family:var(--font-heading)}
.op-field .op-hint{font-weight:400;color:var(--text-dark);font-size:.8rem;margin-left:.4rem}
.op-input,.op-textarea,.op-select{
    width:100%;padding:.65rem .8rem;border-radius:10px;
    border:1px solid var(--panel-border);background:rgba(0,0,0,.28);
    color:var(--text-main);font-family:var(--font-body);font-size:.92rem;
    transition:var(--transition-smooth);
}
.op-input:focus,.op-textarea:focus,.op-select:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(0,242,254,.12)}
.op-textarea{min-height:90px;resize:vertical;line-height:1.6}
.op-textarea.code{font-family:var(--font-mono);font-size:.82rem}
.op-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:560px){.op-row{grid-template-columns:1fr}}

/* chips (badges / tech tags) */
.op-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.op-chip{
    display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;
    border-radius:999px;background:rgba(0,242,254,.1);border:1px solid var(--panel-border);
    color:var(--text-main);font-size:.8rem;
}
.op-chip button{cursor:pointer;background:none;border:none;color:var(--text-muted);font-size:.95rem;line-height:1;padding:0}
.op-chip button:hover{color:var(--error)}
.op-chip-add{display:flex;gap:.4rem}
.op-chip-add .op-input{flex:1}

/* repeatable list rows (features, media, table rows) */
.op-list-row{display:flex;gap:.5rem;align-items:flex-start;margin-bottom:.5rem}
.op-list-row .op-input,.op-list-row .op-textarea{flex:1}
.op-list-row .op-icon-btn{flex:0 0 auto;width:38px;height:38px}

/* media editor items */
.op-media-item{
    border:1px solid var(--panel-border);border-radius:12px;padding:.75rem;margin-bottom:.65rem;
    background:rgba(0,0,0,.2);
}
.op-media-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.op-media-type{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    padding:.2rem .5rem;border-radius:6px;background:rgba(79,172,254,.18);color:var(--accent-indigo)}
.op-media-type.image{background:rgba(16,185,129,.18);color:var(--success)}
.op-media-prev{max-height:120px;border-radius:8px;margin-top:.4rem;max-width:100%}
.op-add-media-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}

/* upload progress */
.op-progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:.5rem;display:none}
.op-progress.show{display:block}
.op-progress > i{display:block;height:100%;width:0;background:var(--accent-gradient);transition:width .2s}

/* table editor */
.op-table-editor{overflow-x:auto}
.op-table-editor table{border-collapse:collapse;width:100%;font-size:.82rem}
.op-table-editor th,.op-table-editor td{border:1px solid var(--panel-border);padding:.2rem}
.op-table-editor input{width:100%;min-width:90px;background:rgba(0,0,0,.25);border:none;color:var(--text-main);padding:.35rem .4rem;font-size:.8rem}
.op-table-editor input:focus{outline:1px solid var(--accent-cyan)}

/* toast */
.op-toast{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:rgba(8,12,20,.96);border:1px solid var(--panel-border-glow);
    color:var(--text-main);padding:.7rem 1.15rem;border-radius:12px;
    font-size:.88rem;z-index:3000;opacity:0;pointer-events:none;transition:all .3s;
    box-shadow:var(--shadow-premium);max-width:90vw;
}
.op-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.op-toast.error{border-color:var(--error)}
.op-toast.success{border-color:var(--success)}

/* move popover (quick category assign) */
.op-move-pop{
    position:absolute;z-index:1500;top:100%;right:0;margin-top:.4rem;
    min-width:220px;background:linear-gradient(180deg,rgba(20,30,45,.98),rgba(8,12,20,.99));
    border:1px solid var(--panel-border-glow);border-radius:14px;padding:.85rem;
    box-shadow:var(--shadow-premium);
}
.op-move-pop h4{font-family:var(--font-heading);font-size:.85rem;margin:0 0 .55rem;color:var(--text-main)}
.op-move-pop label{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;color:var(--text-muted);font-size:.86rem;cursor:pointer}
.op-move-pop label:hover{color:var(--text-main)}
.op-move-pop .op-none{color:var(--text-dark);font-size:.82rem;padding:.2rem 0}
.op-card-wrap{position:relative}

/* Make the header meta area allow admin buttons without breaking layout */
.projects-section .project-header{gap:.6rem}
.op-cat-scope{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.op-cat-scope label{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem;border:1px solid var(--panel-border);border-radius:12px;cursor:pointer;transition:var(--transition-smooth)}
.op-cat-scope label:hover{border-color:var(--panel-border-glow);background:rgba(255,255,255,.03)}
.op-cat-scope input{margin-top:.2rem}
.op-cat-scope .t{color:var(--text-main);font-weight:600;font-size:.9rem;display:block}
.op-cat-scope .d{color:var(--text-muted);font-size:.82rem}

/* checkbox list in editor for categories */
.op-cat-checks{display:flex;flex-wrap:wrap;gap:.5rem}
.op-cat-checks label{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--panel-border);cursor:pointer;font-size:.85rem;color:var(--text-muted)}
.op-cat-checks label:has(input:checked){background:rgba(0,242,254,.12);color:var(--text-main);border-color:var(--accent-cyan)}

/* admin-only helpers */
.op-admin-only{display:none}
body.op-admin .op-admin-only{display:revert}

/* Guest-facing "Admin login" entry (hidden once logged in as admin) */
.op-guest-adminbar{display:flex;justify-content:flex-end;margin-bottom:1.1rem}
body.op-admin .op-guest-adminbar{display:none}
.op-admin-entry{
    background:rgba(0,242,254,.08);border-color:var(--panel-border-glow);color:var(--accent-cyan);
}
.op-admin-entry:hover{background:rgba(0,242,254,.16);color:var(--text-main)}
.op-admin-entry svg{width:15px;height:15px}

/* "Show card status" toggle (admin toolbar) + per-card status line.
   Guests never receive .op-card-status in the DOM at all; even for the admin
   it stays hidden until the checkbox is ticked. */
.op-status-toggle{display:none;align-items:center;gap:.45rem;cursor:pointer;
    color:var(--text-muted);font-size:.85rem;font-family:var(--font-body);white-space:nowrap}
body.op-admin .op-status-toggle{display:inline-flex}
.op-status-toggle input{accent-color:var(--accent-cyan);width:15px;height:15px;cursor:pointer}
.op-card-status{display:none;margin-top:.4rem;font-size:.75rem;color:var(--text-dark);
    font-family:var(--font-mono);letter-spacing:.01em}
body.op-admin.op-show-status .op-card-status{display:block}

/* --- Dropdown / select readability (solid dark options in every browser) --- */
.op-select{background:#0d141e;color:#f1f5f9;appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem}
.op-select option,.op-input option{background:#0d141e;color:#f1f5f9}

/* --- Draft badge (admin-only) --- */
.op-draft-badge{display:inline-block;margin-left:.5rem;padding:.12rem .5rem;border-radius:6px;
    font-family:var(--font-heading);font-size:.66rem;font-weight:800;letter-spacing:.08em;
    background:rgba(245,158,11,.16);color:var(--warning);border:1px solid rgba(245,158,11,.5);vertical-align:middle}
body:not(.op-admin) .op-draft-badge{display:none}

/* --- Editor modal close (X) button = save as draft --- */
.op-modal{position:relative}
.op-modal-x{position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;border-radius:9px;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--panel-border);
    background:rgba(255,255,255,.05);color:var(--text-muted);transition:var(--transition-smooth);z-index:2}
.op-modal-x:hover{background:rgba(255,255,255,.12);color:var(--text-main);border-color:var(--panel-border-glow)}
.op-modal-x svg{width:17px;height:17px}
.op-modal-x .op-x-tip{position:absolute;top:110%;right:0;white-space:nowrap;font-size:.7rem;
    background:rgba(8,12,20,.96);border:1px solid var(--panel-border);border-radius:6px;padding:.25rem .5rem;
    color:var(--text-muted);opacity:0;pointer-events:none;transition:opacity .2s}
.op-modal-x:hover .op-x-tip{opacity:1}

/* --- Copy-link button: visible to everyone (guests + admin) --- */
.op-copy{color:var(--accent-cyan);border-color:var(--panel-border-glow);background:rgba(0,242,254,.06)}
.op-copy:hover{color:#04060a;background:var(--accent-cyan);border-color:var(--accent-cyan)}
.op-open-ico{margin-left:.15rem;color:var(--text-dark)}
.op-open-card .project-header{cursor:pointer}
.op-open-card:hover{border-color:var(--panel-border-glow)}
.op-open-card:hover .op-open-ico{color:var(--accent-cyan)}

/* Keep the header controls tidy on every width */
.projects-section .accordion-indicators{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:640px){
  .projects-section .accordion-indicators{gap:.3rem}
  .projects-section .op-icon-btn{width:30px;height:30px}
  .projects-section .op-icon-btn svg{width:14px;height:14px}
}

/* --- Move-to-position popover (admin) --- */
.op-pos-pop{
    position:absolute;z-index:1500;top:100%;right:0;margin-top:.4rem;
    width:min(300px,86vw);background:linear-gradient(180deg,rgba(20,30,45,.98),rgba(8,12,20,.99));
    border:1px solid var(--panel-border-glow);border-radius:14px;padding:.85rem;
    box-shadow:var(--shadow-premium);
}
.op-pos-pop h4{font-family:var(--font-heading);font-size:.85rem;margin:0 0 .55rem;color:var(--text-main)}
.op-pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:.4rem;max-height:210px;overflow-y:auto}
.op-pos-num{
    cursor:pointer;padding:.45rem 0;border-radius:9px;border:1px solid var(--panel-border);
    background:rgba(255,255,255,.04);color:var(--text-muted);
    font-family:var(--font-heading);font-weight:700;font-size:.88rem;transition:var(--transition-smooth);
}
.op-pos-num:hover{color:#04060a;background:var(--accent-cyan);border-color:var(--accent-cyan)}
.op-pos-num.current{background:var(--accent-gradient);color:#04060a;border-color:transparent}
.op-pos-hint{margin-top:.6rem;font-size:.76rem;color:var(--text-dark)}

/* --- Project window (modal) : premium showcase layout --- */
.op-modal.op-project-modal{max-width:980px;padding:0;overflow:hidden}
#op-project-modal{padding-top:4vh;padding-bottom:4vh}
.op-project-x{z-index:6;top:1rem;right:1rem;background:rgba(8,12,20,.7);backdrop-filter:blur(4px)}
/* Header band with a soft brand gradient */
.opm-head{
    position:relative;padding:2.1rem 2.2rem 1.5rem;
    background:linear-gradient(135deg,rgba(0,242,254,.10),rgba(79,172,254,.06) 55%,transparent);
    border-bottom:1px solid var(--panel-border);
}
.opm-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:linear-gradient(90deg,var(--accent-cyan),var(--accent-indigo),transparent)}
.opm-eyebrow{display:inline-block;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--accent-cyan);
    padding:.2rem .55rem;border:1px solid var(--panel-border-glow);border-radius:999px;
    background:rgba(0,242,254,.06);margin-bottom:.75rem}
.opm-head h2{font-family:var(--font-heading);font-size:1.7rem;line-height:1.18;color:var(--text-main);
    margin:0 0 .5rem;padding-right:2.5rem;font-weight:800}
.opm-cat{color:var(--accent-indigo);font-family:var(--font-mono);font-size:.86rem;margin-bottom:.3rem}
.opm-byline{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent-cyan);
    font-family:var(--font-mono);font-size:.82rem;margin-top:.1rem}
.opm-byline svg{width:14px;height:14px;opacity:.85}
.opm-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}
/* Body reuses the accordion's polished stacked layout (info grid, then centred media) */
.opm-content{border-top:none;background:transparent;
    padding:0 2.2rem 2.4rem;max-height:64vh;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--accent-indigo) transparent}
.opm-content::-webkit-scrollbar{width:8px}
.opm-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-cyan),var(--accent-indigo));border-radius:20px}
.opm-content .project-details-grid{padding-top:1.8rem;gap:2rem}
.opm-content .project-assets{max-width:100%}
@media(max-width:640px){
    .opm-head{padding:1.7rem 1.2rem 1.3rem}
    .opm-head h2{font-size:1.35rem}
    .opm-content{padding:0 1.2rem 1.6rem;max-height:70vh}
    .op-modal.op-project-modal{max-width:100%}
}

/* --- Password show/hide eye toggle --- */
.op-pass-wrap{position:relative}
.op-pass-wrap .op-input{padding-right:2.6rem}
.op-eye{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);width:32px;height:32px;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    background:transparent;border:none;color:var(--text-muted);border-radius:8px;transition:var(--transition-smooth)}
.op-eye:hover{color:var(--accent-cyan);background:rgba(255,255,255,.05)}
.op-eye svg{width:18px;height:18px}