.device-access{grid-column:1/-1;min-width:0;padding:var(--space-inline) var(--space-fields);border:1px solid var(--line);border-radius:var(--action-radius);background:var(--surface-field);display:grid;gap:var(--space-inline);container:device-unlock / inline-size}
.device-access-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-inline)}
.device-access-heading h3{display:flex;align-items:center;gap:var(--space-inline);margin:0;font-size:var(--type-body)}
.device-access .os-note{margin:0;font-size:var(--type-meta);color:var(--muted)}
.device-access .icon{width:18px;height:18px;flex:none}
.device-access-content{display:grid;gap:var(--space-inline)}
.device-access-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-inline);align-items:end}
.device-access-field{min-width:0;display:grid;gap:var(--space-inline);font-size:var(--type-label)}
.device-access-field :is(input,select){width:100%;box-sizing:border-box;min-height:var(--control-target);font:inherit;font-size:var(--type-control);background:var(--surface-field);color:var(--text-primary);border:1px solid var(--line);border-radius:var(--action-radius);padding:var(--action-padding-block) var(--action-padding-inline)}
.device-access-secret{display:flex;gap:var(--space-inline);min-width:0}.device-access-secret input{min-width:0;flex:1}.device-access-secret button{width:var(--control-target);height:var(--control-target);padding:var(--space-inline);flex:none}
.device-access-password{grid-column:1/-1}.device-access button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-inline);min-height:var(--control-target);font-size:var(--type-action)}
.device-access-stored{display:flex;align-items:center;gap:var(--space-inline);flex-wrap:wrap}.device-access-stored>span{flex:1;min-width:100px;font-size:var(--type-body)}
:root body.in-workspace dialog.device-pattern-dialog,:root body.in-workspace dialog.device-secret-dialog{width:min(360px,calc(100vw - 24px));height:fit-content;min-height:0}
.device-pattern-body{display:grid;gap:var(--space-fields);text-align:center}.device-pattern-body .os-note{font-size:var(--type-meta);margin:0}
.device-pattern-grid{position:relative;display:grid;grid-template-columns:repeat(3,44px);gap:12px;width:168px;height:168px;margin:auto;touch-action:none;padding:6px;box-sizing:border-box;user-select:none}
.device-pattern-grid svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.device-pattern-grid polyline{fill:none;stroke:var(--text-link);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.device-pattern-point{position:relative;z-index:1;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface-field);color:var(--text-secondary);font-size:var(--type-label);touch-action:none}
.device-pattern-point.is-selected{border-color:var(--text-link);color:var(--text-link);background:var(--surface-pressed)}.device-pattern-point:hover{background:var(--surface-hover)}
.device-pattern-point:disabled{opacity:1;cursor:default}.device-secret-dialog input{font-size:var(--type-control);padding:var(--space-fields);border:1px solid var(--line);border-radius:var(--action-radius);width:100%;box-sizing:border-box;background:var(--surface-field);color:var(--text-primary)}
.device-access-pattern{display:grid;gap:var(--space-inline);min-width:0;grid-column:1/-1}
.device-access-pattern>button{justify-self:start;width:auto;max-width:100%;box-shadow:none;padding:var(--action-padding-block) var(--action-padding-inline)}
:root body.in-workspace .device-access .device-access-help{width:var(--control-target);height:var(--control-target);flex:none;padding:var(--space-inline);border:0;background:transparent;box-shadow:none}
:root body.in-workspace .device-access .device-access-help:hover{background:var(--surface-hover)}
:root body.in-workspace .device-access .device-access-help:active{background:var(--surface-pressed)}
@container device-unlock (min-width:620px){.device-access-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.device-access-fields[data-count="2"]{grid-template-columns:repeat(2,minmax(0,240px))}.device-access-password,.device-access-pattern{grid-column:auto}.device-access-fields[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container device-unlock (max-width:280px){.device-access-fields{grid-template-columns:minmax(0,1fr)}}
@media(max-width:500px){.device-access-stored>span{flex-basis:100%}}

.device-access-fields :is(input,select),.device-access-pattern>button{margin:0}
.device-access .device-access-field{margin:0}