*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F2F0EB;--surface:#FFFFFF;--surface2:#F7F5F1;--border:#DDD9D2;--border2:#C8C4BC;
  --text:#1A1816;--text2:#6A6660;--text3:#9E9A95;
  --accent:#2C5F4A;--accent-light:#EAF3EE;--accent2:#1E4535;
  --red:#C0392B;--red-light:#FDF0EE;--green:#27AE60;
  --mono:system-ui,-apple-system,sans-serif;--sans:system-ui,-apple-system,sans-serif;
  --radius:5px;--radius-lg:9px;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5}

/* FILTER BAR */
.filter-bar{padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.filter-bar select{padding:4px 10px;border:1px solid var(--border2);border-radius:20px;font-size:12px;background:var(--surface);color:var(--text);outline:none;cursor:pointer;font-family:var(--sans)}
.filter-bar select:focus{border-color:var(--accent)}
/* SORT */
.sort-th{cursor:pointer;user-select:none}
.sort-th:hover{color:var(--text)}
.sort-th.active-sort{color:var(--accent)}
.tbl-sub{font-size:10px;color:var(--text2);margin-top:4px;line-height:1.4}
.tbl-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-right:3px}
/* PHOTOS */
.photo-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.photo-thumb-wrap{position:relative;width:auto;max-width:200px}
.photo-thumb{max-width:200px;max-height:180px;width:auto;height:auto;object-fit:contain;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;display:block;background:var(--surface2)}
.photo-del-btn{position:absolute;top:-5px;right:-5px;background:var(--red);color:white;border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px;line-height:18px;text-align:center;padding:0}
.photo-add-btn{width:80px;height:80px;border-radius:var(--radius);border:1.5px dashed var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:11px;gap:4px;background:var(--surface2)}
.photo-add-btn:hover{border-color:var(--accent);color:var(--accent)}
.photo-add-icon{font-size:22px;line-height:1}
/* PHOTO LIGHTBOX */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}
#lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px}
#lightbox-close{position:absolute;top:16px;right:20px;color:white;font-size:28px;cursor:pointer;background:none;border:none;line-height:1}
/* DET PHOTO GRID */
.det-photo-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.det-photo-thumb{max-width:220px;max-height:200px;width:auto;height:auto;object-fit:contain;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;background:var(--surface2)}
.det-photo-thumb:hover{opacity:0.85}

/* LOGIN */
#login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:360px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 2px 12px rgba(0,0,0,0.1);padding:40px 36px}
.login-gem{width:44px;height:44px;background:var(--accent);border-radius:50%;margin-bottom:20px;display:flex;align-items:center;justify-content:center}
.login-gem svg{width:22px;height:22px;stroke:white;fill:none;stroke-width:1.5}
.login-title{font-size:20px;font-weight:600;margin-bottom:3px}
.login-sub{font-size:13px;color:var(--text2);margin-bottom:28px}
.login-fallback{font-size:12px;color:var(--text3);text-align:center;margin-top:14px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;background:none;border:none;font-family:var(--sans);width:100%}
.login-fallback:hover{color:var(--text2)}
.passkey-btn{width:100%;padding:13px;background:var(--surface2);color:var(--text);border:1.5px solid var(--border2);border-radius:var(--radius);font-size:15px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);transition:all .15s}
.passkey-btn:hover{background:var(--bg);border-color:var(--accent);color:var(--accent)}
.passkey-btn:active{transform:scale(0.98)}
.login-divider{display:flex;align-items:center;gap:8px;margin:14px 0;color:var(--text3);font-size:12px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.passkey-icon{font-size:18px;line-height:1}
.passkey-reg-bar{margin-top:16px;padding:10px 12px;background:var(--accent-light);border:1px solid #C4DDD3;border-radius:var(--radius);display:none;align-items:center;justify-content:space-between;gap:8px}
.passkey-reg-bar.visible{display:flex}
.passkey-reg-text{font-size:12px;color:var(--accent2)}
.passkey-reg-btn{padding:4px 12px;background:var(--accent);color:#fff;border:none;border-radius:20px;font-size:12px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
.passkey-reg-btn:hover{background:var(--accent2)}
.passkey-list{margin-top:12px}
.passkey-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;font-size:13px}
.passkey-item-left{display:flex;align-items:center;gap:8px}
.passkey-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:0}
.passkey-del:hover{color:var(--red)}
.lf{margin-bottom:14px}
.lf label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text2);margin-bottom:5px}
.lf input{width:100%;padding:9px 12px;border:1px solid var(--border2);border-radius:var(--radius);font-size:14px;color:var(--text);outline:none;transition:border-color .15s}
.lf input:focus{border-color:var(--accent)}
.login-btn{width:100%;padding:10px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;margin-top:4px}
.login-btn:hover{background:var(--accent2)}
.login-err{font-size:12px;color:var(--red);margin-top:10px;min-height:16px}

/* APP */
#app-view{display:none;height:100vh;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.topbar-logo{font-size:18px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.topbar-logo-sub{font-size:10px;color:var(--text3);font-weight:400;margin-top:1px}
.topbar-right{display:flex;gap:6px;align-items:center}
.topbar-count{font-size:11px;color:var(--text3);font-family:var(--sans);margin-right:6px}

/* BUTTONS */
.btn{padding:6px 14px;border:1px solid var(--border2);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;font-size:13px;font-family:var(--sans);transition:all .12s}
.btn:hover{background:var(--surface2)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:500}
.btn-primary:hover{background:var(--accent2)}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-danger{border-color:#E8B4B0;color:var(--red)}
.btn-danger:hover{background:var(--red-light)}

/* COLLECTION */
#collection-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.search-bar{padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;gap:10px;align-items:center}
.search-bar input{width:280px;padding:7px 12px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;outline:none}
.search-bar input:focus{border-color:var(--accent)}
.table-wrap{flex:1;overflow-y:auto}
table{width:100%;border-collapse:collapse}
thead{position:sticky;top:0;background:var(--surface2);border-bottom:1px solid var(--border)}
th{padding:9px 14px;text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text3)}
td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px}
tr:hover td{background:var(--surface2);cursor:pointer}
.mono{font-family:var(--sans);font-size:12px;font-variant-numeric:tabular-nums}
.chip{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;background:var(--accent-light);color:var(--accent);font-weight:500}
.gem-dot{display:inline-block;width:14px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,0.15);vertical-align:middle;margin-right:5px}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}

/* FORM */
#form-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.form-header{padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.form-header-title{font-size:14px;font-weight:600}
.snav-bar{display:flex;gap:3px;padding:10px 20px;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.snav{padding:5px 12px;border-radius:20px;font-size:12px;color:var(--text2);cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:all .12s}
.snav:hover{background:var(--surface);border-color:var(--border)}
.snav.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.form-body{flex:1;overflow-y:auto;padding:24px 20px;background:var(--bg)}
.form-section{display:none}
.form-section.visible{display:block}

/* FIELDS */
.fblock{margin-bottom:18px}
.fblock label:not(.radio-opt):not(.behandeling-chip),.flabel{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin-bottom:6px}
.fblock input,.fblock select,.fblock textarea{width:100%;padding:8px 11px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text);background:var(--surface);outline:none;transition:border-color .15s;font-family:var(--sans)}
.fblock input:focus,.fblock select:focus,.fblock textarea:focus{border-color:var(--accent)}
.fblock input::placeholder,.fblock textarea::placeholder{color:var(--border2)}input::placeholder,textarea::placeholder{color:#C8C4BC}
.fblock textarea{resize:vertical;min-height:70px}
.fblock .calc{background:var(--surface2);font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--accent);border-color:var(--border);font-size:13px}
.sec-divider{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin:22px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--border)}

/* RADIO BUTTONS */
.radio-group{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.radio-opt{display:flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border2);border-radius:20px;cursor:pointer;font-size:12px;transition:all .12s;user-select:none;white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:400}
.radio-opt input[type=radio]{appearance:none;-webkit-appearance:none;width:12px;height:12px;padding:0;border:1.5px solid var(--border2);border-radius:50%;cursor:pointer;flex-shrink:0;transition:all .12s;position:relative}
.radio-opt input[type=radio]:checked{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px white}
.radio-opt:has(input:checked){border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.radio-opt:hover{border-color:var(--accent2)}

/* CHECKBOX */
.cb-row{display:flex;align-items:center;gap:9px;margin-bottom:12px;cursor:pointer;user-select:none}
.cb-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--border2);border-radius:4px;background:var(--surface);cursor:pointer;flex-shrink:0;position:relative;transition:all .12s;display:inline-flex;align-items:center;justify-content:center}
.cb-row input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.cb-row input[type=checkbox]:checked::after{content:'';position:absolute;width:4px;height:8px;border:2px solid white;border-top:none;border-left:none;transform:rotate(45deg);top:2px;left:6px}
.cb-label{font-size:13px;color:var(--text)}

/* COLOR PICKER */
.color-display{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border2);border-radius:var(--radius);background:var(--surface);margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.color-display:hover{border-color:var(--accent)}
.color-gem-preview{width:40px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,0.12);flex-shrink:0;background:#EEE}
.color-name-display{font-size:13px;color:var(--text);flex:1}
.color-code-display{font-family:var(--sans);font-size:11px;color:var(--text3);padding:2px 6px;background:var(--surface2);border-radius:3px}
.color-palette{display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;box-shadow:0 4px 16px rgba(0,0,0,0.1);margin-bottom:10px}
.color-palette.open{display:block}
.color-palette-grid{display:flex;flex-wrap:wrap;gap:4px}
.gem-btn{width:42px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s;flex-shrink:0;position:relative}
.gem-btn:hover{transform:scale(1.2);z-index:1}
.gem-btn.selected{border-color:#1A1816;transform:scale(1.15)}
.gem-btn[title]:hover::after{content:attr(title);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:#1A1816;color:#fff;padding:3px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none;font-family:var(--sans);z-index:10}
.color-extras{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);display:flex;gap:4px;flex-wrap:wrap}
.color-clear-btn{font-size:11px;color:var(--red);background:none;border:1px solid #E8B4B0;border-radius:20px;padding:3px 10px;cursor:pointer;margin-left:auto}

/* HYDROSTATISCH - grote display */
.hydro-results{display:flex;gap:12px;margin-bottom:14px}
.hydro-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;text-align:center}
.hydro-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:6px}
.hydro-value{font-size:28px;font-weight:600;font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--accent);line-height:1}
.hydro-unit{font-size:12px;color:var(--text3);margin-top:3px}
.hydro-empty{font-size:24px;color:var(--border2)}

/* POSITIE TABLE */
.pos-tbl{width:100%;border-collapse:collapse;margin-bottom:14px}
.pos-tbl th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:6px 8px;text-align:center;background:var(--surface2);border:1px solid var(--border)}
.pos-tbl td{padding:4px;text-align:center;border:1px solid var(--border);background:var(--surface)}
.pos-tbl .pos-num{font-size:11px;color:var(--text3);font-family:var(--sans);background:var(--surface2)}
.pos-tbl input{width:100%;padding:5px 6px;text-align:center;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;border:none;outline:none;color:var(--text);background:transparent}

/* SPECTROSCOPE */
.spec-bar-wrap{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border2);cursor:crosshair;user-select:none;margin-bottom:4px}
.spec-bar{height:50px;background:linear-gradient(to right,#0D0010 0%,#2A0050 6%,#6600AA 10%,#4400FF 18%,#0055FF 22%,#0099FF 26%,#00CCEE 30%,#00EED8 34%,#00FF88 42%,#88FF00 48%,#CCFF00 52%,#FFFF00 54%,#FFCC00 58%,#FF9900 62%,#FF5500 67%,#FF0000 70%,#CC0000 78%,#880000 86%,#440000 92%,#180000 100%);position:relative}
.spec-bands-layer{position:absolute;inset:0;pointer-events:auto}
.spec-preview-layer{position:absolute;inset:0;pointer-events:none}
.spec-cursor{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,0.6);pointer-events:none;display:none}
.spec-tooltip{position:absolute;top:-26px;transform:translateX(-50%);background:#1A1816;color:#fff;padding:2px 7px;font-size:11px;border-radius:4px;pointer-events:none;display:none;font-family:var(--sans);white-space:nowrap}
.spec-band{position:absolute;top:0;bottom:0;background:rgba(0,0,0,0.78);cursor:pointer;display:flex;align-items:center;justify-content:center}
.spec-band:hover{background:rgba(0,0,0,0.92)}
.spec-band-nm{font-size:9px;color:rgba(255,255,255,0.9);font-family:var(--sans);writing-mode:vertical-rl;transform:rotate(180deg)}
.spec-scale{position:relative;height:16px;margin-top:2px}
.spec-tick{position:absolute;transform:translateX(-50%);font-size:9px;color:var(--text3);font-family:var(--sans)}
.spec-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:1px;font-style:italic}
.spec-toolbar{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.spec-type-btn{padding:3px 10px;border:1px solid var(--border2);border-radius:20px;font-size:11px;cursor:pointer;background:var(--surface);color:var(--text2);font-family:var(--sans)}
.spec-type-btn.active{background:var(--text);color:#fff;border-color:var(--text)}
.behandeling-chip{text-transform:none;letter-spacing:0;font-weight:400}.behandeling-chip input[type=checkbox]{display:none}.behandeling-chip:has(input:checked){background:var(--accent-light);border-color:var(--accent);color:var(--accent);font-weight:500}
.spec-clear-btn{padding:3px 10px;border:1px solid #E8B4B0;border-radius:20px;font-size:11px;cursor:pointer;background:var(--surface);color:var(--red);font-family:var(--sans)}
.spec-band-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.spec-band-tag{display:flex;align-items:center;gap:4px;padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;font-size:11px;font-family:var(--sans)}
.spec-band-tag button{background:none;border:none;cursor:pointer;color:var(--text3);font-size:12px;padding:0;line-height:1}
.spec-band-tag button:hover{color:var(--red)}

/* FORM FOOTER */
.form-footer{padding:12px 20px;border-top:1px solid var(--border);background:var(--surface);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}

/* DETAIL */
#detail-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.detail-header{padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.detail-name{font-size:20px;font-weight:600}
.detail-sub{font-size:12px;color:var(--text3);margin-top:2px}
.detail-body{flex:1;overflow-y:auto;padding:20px;background:var(--bg);display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.det-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.det-card-full{grid-column:1/-1}
.det-card-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text2);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.det-roman{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:800;letter-spacing:.02em;flex-shrink:0;font-family:var(--sans)}
.det-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--border);font-size:13px}
.det-row:last-child{border-bottom:none}
.det-key{color:var(--text2);font-size:12px}
.det-val{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text);text-align:right;max-width:65%}
.det-val-num{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:var(--text);text-align:right}
.det-note{font-size:11px;color:var(--text3);margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);font-style:italic;line-height:1.5}

/* DET SPEC */
.det-spec-bar{height:30px;border-radius:4px;position:relative;overflow:hidden;border:1px solid var(--border);background:linear-gradient(to right,#0D0010 0%,#2A0050 6%,#6600AA 10%,#4400FF 18%,#0055FF 22%,#0099FF 26%,#00CCEE 30%,#00EED8 34%,#00FF88 42%,#88FF00 48%,#CCFF00 52%,#FFFF00 54%,#FFCC00 58%,#FF9900 62%,#FF5500 67%,#FF0000 70%,#CC0000 78%,#880000 86%,#440000 92%,#180000 100%)}
.det-spec-band{position:absolute;top:0;bottom:0;background:rgba(0,0,0,0.8)}

/* TOAST */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);background:#1A1816;color:#fff;border-radius:var(--radius);padding:8px 16px;font-size:13px;transition:transform .2s;z-index:100;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red)}
#toast.ok{background:var(--green)}

@media(max-width:700px){.detail-body{grid-template-columns:1fr}.det-card-full{grid-column:auto}}

@media(max-width:768px){
  .topbar{padding:0 12px;height:44px}
  .topbar-logo{font-size:13px}
  .topbar-count{display:none}
  .btn-sm{padding:4px 8px;font-size:11px}
  .snav-bar{padding:8px 12px;gap:4px;-webkit-overflow-scrolling:touch}
  .snav{padding:5px 10px;font-size:11px}
  .form-body{padding:16px 14px}
  .fblock label:not(.radio-opt):not(.behandeling-chip){font-size:10px}
  .fblock input,.fblock select,.fblock textarea{font-size:16px!important}
  .radio-group{gap:5px}
  .radio-opt{padding:6px 10px;font-size:13px}
  .hydro-results{flex-direction:column}
  .hydro-value{font-size:22px}
  .search-bar{padding:10px 12px}
  .filter-bar{padding:6px 12px}
  .filter-bar select{font-size:11px}
  table{font-size:12px}
  th,td{padding:8px 8px}
  .detail-body{padding:14px;grid-template-columns:1fr}
  .det-card-full{grid-column:auto}
  .form-footer{padding:10px 14px}
  .form-header{padding:10px 14px}
  .snav-bar{white-space:nowrap}
  #passkey-modal > div{padding:18px;margin:0 12px}
}
@media(max-width:480px){
  .topbar-right .topbar-count{display:none}
  .hydro-card{padding:12px}
  .login-card{padding:28px 22px}
}

/* GIA COLOR WHEEL */
.gia-wheel-wrap{position:relative;width:280px;height:280px;margin:0 auto 12px;flex-shrink:0}
.gia-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;border:2px solid var(--border2);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text3);text-align:center;line-height:1.2;font-family:var(--sans)}
.gia-gem{position:absolute;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transform:translate(-50%,-50%);transition:transform .12s,border-color .12s;display:flex;align-items:center;justify-content:center}
.gia-gem:hover{transform:translate(-50%,-50%) scale(1.25);z-index:2}
.gia-gem.selected{border-color:#1A1816;transform:translate(-50%,-50%) scale(1.2);z-index:3;box-shadow:0 0 0 2px white}
.gia-color-input{width:100%;padding:6px 10px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text);background:var(--surface);outline:none;font-family:var(--sans);margin-bottom:6px}
.gia-color-input:focus{border-color:var(--accent)}
.gia-suggestions{position:absolute;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);max-height:180px;overflow-y:auto;width:100%;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.gia-suggestion{padding:6px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:8px}
.gia-suggestion:hover{background:var(--surface2)}
.gia-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,0.1);flex-shrink:0}
.gia-extras{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gia-extra-btn{width:24px;height:24px;border-radius:50%;border:1.5px solid transparent;cursor:pointer;transition:transform .12s}
.gia-extra-btn:hover{transform:scale(1.2)}
.gia-extra-btn.selected{border-color:#1A1816;box-shadow:0 0 0 2px white}
.gia-selected-display{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;min-height:36px}
.gia-selected-swatch{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,0.12);flex-shrink:0}
.gia-selected-name{font-size:12px;color:var(--text);flex:1}
.gia-selected-code{font-family:var(--sans);font-size:11px;color:var(--text3);background:var(--surface);padding:2px 6px;border-radius:3px}
.gia-clear-btn{font-size:11px;color:var(--text3);background:none;border:none;cursor:pointer;padding:0 2px}
.gia-clear-btn:hover{color:var(--red)}